WEB前端性能优化总结

为什么要进行前端性能优化

    影响用户访问体验的绝大部分来自前端页面，网站前端的用户体验决定了用户是否想要去使用网站的功能，而网站的功能决定了用户是否会一票否决前端体验。不仅仅如此，如果前端优化得好，不仅可以为企业节约成本，还能带来更多的用户，因为增强的用户体验。

前端性能优化有哪些好处

1. 能够让页面加载得更快、对用户的操作响应得更及时， 给用户提供更为友好的体验
2. 能够减少页面请求数、或者减小请求所占带宽，节省可观的资源

性能优化方案

一、减少http请求

1. 合并JS文件
2. 合并CSS文件
3. 雪碧图的使用(css sprite)
4. 使用base64表示简单的图片

    如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。另外， CSS、 Javascript、Image 都可以用相应的工具进行压缩，压缩后往往能省下不少空间

二、减小整体资源体积

1. GZIP压缩
       主要是针对html文件来说的，它可以将html中重复的部分进行一个打包，多次复用的过程
2. JS混淆
       简单的压缩(将空白字符删除)、丑化(丑化的方法，就是将一些变量缩小)、或者可以使用php对js进行混淆加密
3. CSS压缩
        简单的压缩
4. 图片压缩
       主要是减小体积，在不影响观感的前提下，尽量压缩图片，使用png等图片格式，减少矢量图、高清图等

三、使用浏览器缓存

1. DNS缓存
       DNS查询也消耗响应时间，但由于DNS查询结果会缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问网页时的速度有影响
2. HTTP缓存
        给资源设定缓存时间，防止在有效的缓存时间内对资源进行重复的下载，从而提升整体网页的加载速度
3. CDN部署与缓存
       给静态资源做好缓存工作，有效的利用已缓存的静态资源，加快获取速度

四、延迟加载

1. 图片预加载
2. 图片懒加载
3. 最初只加载核心模块，其他模块可以等到需要使用的时候才加载
4. 确保网页在没有JavaScript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能

五、优化网页渲染

1. CSS的文件放在头部
        将样式表放于文档底部会导致在浏览器中阻止内容逐步呈现
2. js文件放在尾部或者异步
   使用脚本时，脚本会阻止并行下载后面的内容
3. 使用外部 JavaScript 和 CSS
       存粹而言，内联（就是把样式表和脚本文件都放在页面中）要快一些。但是将它们外置可以有长期的效益，因为样式表和脚本文件放在外部的话，会有机会缓存的，而html文件特别是那些动态html文件就不会缓存，每次都会请求。如果每个页面都是用了相同的JavaScript和CSS，使用外部组件会提高组件的复用率。

六、减少DOM操作次数

1. 避免在document上直接进行频繁的DOM操作
2. 缓存已经访问过的元素
3. 用innerHTML代替DOM操作
4. 避免通过JavaScript修复layout
5. 使用ClassName代替大量的内联样式修改
6. 避免使用 CSS 表达式（expression）
7. 使用事件代理
8. 对于复杂的UI元素，设置position为absolute或fixed
9. 尽量使用CSS动画
10. 适当使用Canvas

七、避免重定向（跳转）

    重定向时浏览器会自动将用户带到由Location字段所给出的URL，重定向所需要的所有信息都在这个里面。301和302在实际中通常不会缓存，除非明确指定Expires和Cache-Control控制行为。
    当客户端收到服务器的跳转回复时，客户端再次根据服务器回复中的location指定的地址再次发送请求，有的网站甚至会一直跳n次，这个时候用户看不到任何页面内容，只有浏览器的进度条一直在刷新。

八、 操作细节注意

1. 避免图片或者frame使用空src
2. 在css属性为0时，去掉单位
3. 禁止图像缩放
4. 移除空的css规则
5. 对于css中可继承的属性，如font-size，尽量使用继承，少一点设置
6. 缩短css选择器，多使用伪元素等帮助定位

九、减少iframe数量

1. 即使iframe内容为空也消耗加载时间
2. 会阻止页面加载
3. 没有语义

十、去除重复脚本

    重复脚本不仅浪费浏览器的下载时间，而且浪费浏览器的解析和执行时间。一般用来避免引入重复脚本的做法是使用统一的脚本管理模块，这样不仅可以避免重复脚本引入，还可以兼顾脚本依赖管理和版本管理

十一、Cookie

1. 减少cookie传输
2. 将cookie的大小减到最小
3. 去除没有必要的cookie，如果网页不需要cookie就完全禁掉
4. 注意cookie设置的domain级别，没有必要时不要影响到sub-domain
5. 设置合适的过期时间，较长的过期时间可以提高响应速度
6. 页面内容使用无cookie域名

    可以采用不同的domain来单独存放这些静态文件，从而减少cookie的大小从而提高响应速度。
    有些proxy拒绝缓存带有cookie的内容，而大多数网站的静态资源都没必要使用cookie，将这些静态资源的cookie去除，可以得到proxy的缓存支持。

十二、配置ETags

1. 实体标签（Entity Tag，ETage）是Web服务器和浏览器用于确认缓存组件有效性的一种机制。
2. tag通过一个文件版本标识使得服务器可以轻松判断该请求的内容是否有所更新，如果没有就回复304 (not modified)，从而避免下载整个文件。
3. ETag的问题：通常使用组件的某些属性来构造它，这些属性对于特定的、寄宿了网站的服务器来说是唯一的，但是当浏览器从一台服务器上获得原始的组件之后，又向另外一个服务器发起条件GET请求时，ETag是不会匹配的（对于采用服务器集群来处理请求的网站来说，这是很常见的一种情况），这种会大大降低有效性验证的成功率。

十三、Javascript代码优化

1. 慎用 with
       with(obj){ p = 1}; 代码块的行为实际上是修改了代码块中的执行环境 ，将obj放在了其作用域链的最前端，在 with代码块中访问非局部变量是都是先从 obj上开始查找，如果没有再依次按作用域链向上查找，因此使用 with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的，过长的作用域链会导致查找性能下降。
2. 避免使用 eval和 Function
       每次 eval 或Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。
       eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。
       eval Function 构造函数比 eval略好，因为使用此代码不会影响周围代码 ;但其速度仍很慢。
3. 减少作用域链查找和闭包的使用
       如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。