1.背景介绍

为什么要对网站进行性能优化

网站的访问量及用户的持久性其实在一定程度上取决于其性能，如果一个网站响应耗时久， 动画卡顿，占用大量的cpu等，往往就会导致用户流失。 尤其是app及微信端应用，可以这么说，如果页面打开都要超过4秒， 这体验绝对差。作为一个开发者，是不允许出现这种情况的，那么该如何提高页面的性能呢？

大致的网站优化性能步骤不外乎减少HTTP请求次数，减少DNS访问，减少对DOM的操作，缩减请求的文件大小/cookie大小等等.

2.知识剖析

如何进行网站性能优化

1、尽量减少HTTP请求次数

2、减少DNS查找次数

3、避免跳转

4、可缓存的AJAX

5、推迟加载内容

6、预加载

7、减少DOM元素数量

8、根据域名划分页面内容

9、使iframe的数量最小

10、不要出现404错误

11、使用内容分发网络（CDN）

12、为文件头指定Expires或Cache-Control

13、Gzip压缩文件内容

14、配置ETag

15、尽早刷新输出缓冲

16、使用GET来完成AJAX请求

17、把样式表置于顶部

18、避免使用CSS表达式（Expression）

19、使用外部JavaScript和CSS

20、削减JavaScript和CSS

21、用代替@import

22、避免使用滤镜

23、把脚本置于页面底部

24、剔除重复脚本

25、减少DOM访问

26、开发智能事件处理程序

27、减小Cookie体积

28、对于页面内容使用无coockie域名

29、优化图像

30、优化CSS Spirite

31、不要在HTML中缩放图像

32、favicon.ico要小而且可缓存

33、保持单个内容小于25K

34、打包组件成复合文本

3.常见问题

HTTP缓存怎样设置？
链接后面是否带“/”有什么区别？
如何正确理解 Repaint 和 Reflow？

4.解决方案

HTTP缓存怎样设置？
meta http-equiv="Cache-Control" content="max-age=7200"
meta http-equiv="expires" content="someGMT"

链接后面是否带“/”有什么区别？
有/会认为是目录，没/会认为是文件。
加了/浏览器会指向一个目录，目录的话会读取默认文件index等等。
没有/会先尝试读取文件，如果没有文件再找与该文件同名的目录，最后才读目录下的默认文件。
网址没有加上/会给服务器增加一个查找是否有同名文件的过程。

如何正确理解 Repaint 和 Reflow ？
Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。
Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效， 浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。 如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。 如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。
减少性能影响的办法：
总之，因为 Reflow 有时确实不可避免，所以只能尽可能限制Reflow的影响范围。

5.编码实战

6.扩展思考

7.参考文献

参考一： 参考二： 参考四

8.更多讨论