Web性能优化常见技巧（web优化的几个方面）

Web性能优化常见技巧（web优化的几个方面）

首先，我们方法会一下，前端优化的目标是什么？

从用户角度：优化可以让页面加载得更快、对用户的操纵响应更快，给用户供给更加友爱的体验。从办事商角度：优化可以削减页面请求数、大概减小请求所占带宽，节省资本。

web性能优化常见技能以下：

DNS办事优化

当我们输入url后，阅读器第一件事是停止DNS域名剖析，我们可以花钱买更多的DNS办事器，能让DNS办事更快一点，可是一般没有人这么做，由于dns很是快，作为用户可以自己加速DNS办事。

可以设置Hosts, 在hosts中把IP设置好,DNS会读取系统hosts文件，查找其中能否有对应的ip

2. 毗连复用（keep-alive）

域名剖析完成后，会发送http请求，http请求的本质是TCP毗连，倡议Http请求、html请求、css请求、js请求，每一次发送请求都需要停止tcp毗连，这样就有4次tcp毗连，可以利用keep-alive ,让第一次发送请求建立的TCP毗连不要中断，这样第二次发送请求时可以复用这个毗连

3. SQL优化

办事器搜到请求以后能够会去查询数据库，可以优化查询数据库的时候，就是 SQL 优化

4. 进步办事器带宽

后端拿到数据后会返回给前端，可以优化数据返回速度，时候=下载量/速度，可以从削减下载量大概进步速度两个角度动手，带宽决议下载速度，我们不成能改变用户带宽，只能进步办事器带宽

5. 办事器端利用紧缩

在办事器端对文件停止紧缩，在阅读器对文件解紧缩，可有用削减通讯传输的数据量。文本文件的紧缩率可达80%以上，是以HTML、CSS、JavaScript文件 启用GZip紧缩可到达较好的结果。可是紧缩对办事器和阅读器发生一定的压力，在通讯带宽杰出，而办事器资本不敷的情况下要权衡斟酌。

6. 页面展现优化

下载数据以后，会展现HTML，我们可以下降页面的衬着时候。这一步可以优化CSS和JS，从用户的习惯去分析，用户先看页面展现，再用鼠标或键盘操纵，所以应领先把用户看的加载出来，再加载鼠标键盘操纵。

懒加载：先不加载第二屏

7. 图片优化

优化图片巨细，只管利用css sprite（精灵图也叫雪碧图），不要在html中缩放图片，利用小且可缓存的favicon.ico

8. 阅读器端利用缓存

在用户第一次进入页面时将数据缓存，削减用户第二次进入页面加载时候，进步用户第二次的拜候速度。

CSS、JavaScript、Logo、图标这些静态资本文件更新的频次都比力低，而这些文件又几近是每次HTTP请求都需要的，假如将这些文件缓存在阅读器中，可以极好地改良性能。 用法：经过设备HTTP头中的Cache-Control和Expires属性，可设定阅读器缓存，缓存时候可所以数天，数月，甚至数年。

9. 削减Cookie传输

Cookie包括在每次请求和响应中，太大的Cookie会严重影响数据传输，是以哪些数据需要写入Cookie需要稳重斟酌，只管削减Cookie中传输的数据量

10. 利用域名加速

用户在请求一个页面的时，会下载多个文件，比如一个页面有1个html，10个css，20个js，理论上要发31个请求，假如31个请求同时发的话时候会很短，但这样会消耗办事器带宽和用户带宽。一切每个阅读器城市做限制，一个域名最多同时发10个/8个/4个请求。假定每个域名同时发10个，那末最少要发4次请求，这样就致使时候太长，处理计划是加域名，a域名专门请求html，b域名请求css，c域名请求js，这样就只需两次请求的时候, 加域名我们一般加的是 cdn域名。

11. cookie-free

加了域名以后还有第二个益处是 cookie-free ， 举个例子：

cookie会随着请求上传，假定cookie有4k，那末31个请求就有124k的cookie

由于cookie只会随着主域名走，那末加了域名后，一切的css和js就没有cookie，这就实现了cookie-free