前端进阶（1）Web 前端性能优化

Web 前端性能优化, 不仅可能 改善站点的用户体验 ，并且可能 节俭相当的资源利用。上面将从 1）服务器、2）html 内容、3）css、4）javascript、5）图片等几方面介绍具体的优化操作。

1. 服务器优化

1.1. 应用内容散发网络（CDN）

把网站内容扩散到多个、处于不同地区地位的服务器上能够放慢下载速度。

1.2. 服务器应用 http2.0 协定

Http2.0 的长处

1. 二进制分帧
2. 首部压缩
3. 流量管制
4. 多路复用
5. 申请优先级
6. 服务器推送

e.g 应用 nginx, 要求 1)v1.9.5 以上, 2)应用 https；

1.3. GZIP 压缩

1.4. 应用浏览器缓存

CSS、javascript、logo、图标这些动态资源文件更新的频率都比拟低，而这些文件又简直是每次 http 申请都须要的，如果将这些文件缓存在浏览器中，能够极好的改善性能。

通过设置 http 头中的 cache-control 和expires的属性，可设定浏览器缓存，缩小网络申请次数。

1.5. 设置 ETag

ETags（Entity tags，实体标签）是 web 服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。

2. HTML 内容优化

2.1. 缩小 HTTP 申请数

这条策略是最重要最无效的，因为一个残缺的申请要通过 DNS 寻址，与服务器建设连贯，发送数据，期待服务器响应，接收数据这样一个耗费工夫老本和资源老本的简单的过程。常见办法：

1. 合并多个 CSS 文件和 js 文件, 并进行最小化解决。
2. 利用 CSS Sprites 整合图像，
3. 行内图片 Base64 编码，应用 data：URL scheme 在理论的页面嵌入图像数据
4. 正当设置 HTTP 缓存

2.2. 缩小 DNS 查找

为了缩小 DNS 的询次数，最好的解决办法就是在页面中缩小不同的域名申请的机会。

2.3. 防止重定向 301/30x

如果重定向的话，就须要在拜访过程中反复发动一连串的动作，会耗费很多工夫，因而避免出现屡次重定向地址或资源的拜访。

2.4. 防止在 html 标签中写 style 属性

js,css 写到独自的文件中，便于浏览器缓存。

2.5. 异步加载组件, 预加载组件 (ansyc, defer)

ansyc, defer 不会阻塞浏览器的文档解析。

1. ansyc 用于异步加载

2. defer 用于预加载

   2.6. 提早、分页加载图片

   对于图片而言，在页面刚加载的时候能够只加载第一屏，当用户持续往后滚屏的时候才加载后续的图片。这样一来，如果用户只对第一屏的内容感兴趣时，那残余的图片申请就都节俭了。

2.7. 缩小 DOM 元素数量

页面中存在大量 DOM 元素, 会导致 javascript 遍历 DOM 的效率变慢。

2.8. 最小化 iframe 的数量

iframes 提供了一个简略的形式把一个网站的内容嵌入到另一个网站中。但其创立速度比其余包含 JavaScript 和 CSS 的 DOM 元素的创立慢了 1 - 2 个数量级。

2.9. 防止 404

HTTP 申请工夫耗费是很大的，因而应用 HTTP 申请来取得一个没有用途的响应（例如 404 没有找到页面）是齐全没有必要的，它只会升高用户体验而不会有一点益处。

2.10. 对 Ajax 申请应用 GET 办法

2.11. 防止空的图像 src

3. CSS 优化

3.1. 将 CSS 代码放在 HTML 页面的顶部

3.2. 合并、压缩 CSS

3.3. CSS 选择符优化

1. 浏览器对选择符的解析是从右往左进行的
2. 依照 ID 查问效率最高

3.4. 防止应用 CSS 表达式

3.5. 应用 <link> 来代替 @import

3.6. 防止应用 Filters

4. javascript 优化

4.1. 将 JavaScript 脚本放在页面的底部

4.2. 将 JavaScript 和 CSS 作为内部文件来援用

在理论利用中应用内部文件能够进步页面速度，因为 JavaScript 和 CSS 文件都能在浏览器中产生缓存。

4.3. 合并、压缩 JavaScript

4.4. 删除无用、反复的脚本

4.5. 最小化 DOM 的拜访

应用 JavaScript 拜访 DOM 元素比较慢

4.6. 开发智能的事件处理程序

4.7. javascript 代码留神

1. 缩小作用域链查找（多用局部变量，少拜访全局变量）
2. 缩小闭包的应用，防止内存透露
3. 审慎应用 with
4. 防止应用 eval Function 函数
5. 字符串拼接，Javascript 中应用”+”号来拼接字符串效率是比拟低，倡议应用数组的 join 办法

5. 图像优化

5.1. 优化图片大小

5.2. 通过 CSS Sprites 优化图片

5.3. 不要在 HTML 中应用缩放图片

5.4. favicon.ico 要小而且可缓存

6. 其余

6.1. 减小 Cookie 大小，尽量不应用 cookie

cookie 蕴含在每次申请和响应中，太大的 cookie 会重大影响数据传输

6.2. 负载平衡

负载平衡 load balancer，升高每个站点的请求书，进步单个申请的响应工夫。