2020-05-05 前端性能优化

优化方向	优化手段
请求数量	合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
请求带宽	开启GZip，精简JavaScript，移除重复脚本，图像优化
缓存利用	使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存
页面结构	将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
代码校验	避免CSS表达式，避免重定向

雅虎14条优化原则

1、减少HTTP请求数

• 合并脚本和样式表：分开时分开。就很多网站因为首页的访问量太大，将首页的css和js直接写在页面文件中而不是外部引用。
• CSS Sprites：页面上的背景图片合并为一张，通过css的background-position属性定义不同的值来取背景。http://www.csssprites.com/可帮助将上传的图片合并并给出对应的background-position坐标。

2、使用CDN

Content Delivery Network

3、添加Expire头，或者Cache-control

通过缓存减少请求数

4、Gzip组件

通过压缩减少文件传输的大小。所有的文件内容都应该被压缩。

5、将CSS样式放在页面的上方

一次渲染

6、将script放在页面最下面

• 防止脚本阻塞页面的下载，减少页面可视元素的加载时间。（防止页面加载中途去下载脚本）
• 防止脚本阻塞并行下载数量。？

7、避免在CSS中使用Expressions

8、把javascript和css都放到外部文件中

把css和js写在页面内容可减少两次请求，但也增大了页面的大小。使用外部文件，如果做了缓存，也不会有两次多余的http请求。
要视情况而定，参见第一点。

9、减少DNS查询

很好理解，减少DNS解析过程、加快页面加载速度。建议一个页面所包含的域名数量尽量控制在2-4个。

10、压缩JavaScript和CSS

通过压缩，减少页面字节数，从而提高加载速度，同时还可以起到一定的保护作用。但是会丧失可读性，阿里巴巴是在发布的时候在服务器端进行压缩。

11、避免重定向

增加一次冲重定向就会增加一次web请求。

12、移除重复的脚本

13、配置实体标签（ETags）

14、使AJAX缓存