Web前端性能优化汇总

前端性能优化

• 前端页面需要先下载到本地，然后渲染展示出来

• 从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，
  缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。
  网站的性能直接会影响到用户的数量，所有前端性能优化很重要。

前端性能优化分为如下几个方面：

一、代码部署：

1、代码的压缩与合并（最终代码都会压缩成一行）
2、图片、js、css等静态资源使用和主站不同域名地址存储，从而使得在传输资源时不会带上不必要的cookie信息。
3、使用内容分发网络 CDN （不同地方建设服务器）
4、为文件设置Last-Modified(最后一次修改)、Expires(过期时间)和Etag(时间戳) （网站请求时候，对比时间信息，如果没有变化直接读取本地缓存，避免重复下载）
5、使用GZIP压缩传送
6、权衡DNS查找次数(使用不同域名会增加DNS查找) (网站域名解析需要时间)
7、避免不必要的重定向(加"/")

二、编码

- html：
    1、使用结构清晰，简单，语义化标签
    2、避免空的src和href
    3、不要在HTML中缩放图片
- css：
    1、精简css选择器(尽量要短，层级不要超过4层)
    2、把CSS放到顶部(css读完后，渲染页面)
    3、避免@import方式引入样式(css中再引入css样式)
    4、css中使用base64图片数据取代图片文件，减少请求数，
        在线转base64网站：http://tool.css-js.com/base64.html
        图片转换为数据编码，数据直接放在图片的位置，不用去请求图片了
        一般小图片转换，大图片数据太长了，一般不用
    5、使用css动画来取代javascript动画
    6、使用字体图标
    7、使用css sprite(雪碧图)
    8、使用svg图形
    9、避免使用CSS表达式
        body{
         background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );  
        }
    10、避免使用css滤镜
- javascript：
    1、减少引用库的个数
    2、使用requirejs或seajs异步加载js
    3、JS放到页面底部引入(实际开发是放在头部)
    4、避免全局查找 (查找结果定义为一个变量，多次使用的一个属性定义为一个变量)
    5、使用原生方法 (实际使用jQuery的方法，原生JS可能会不兼容)
    6、用switch语句代替复杂的if else语句
    7、减少语句数，比如说多个变量声明可以写成一句
    8、使用字面量表达式来初始化数组或者对象
    9、使用innerHTML取代复杂的元素注入
    10、使用事件代理(事件委托)
    11、避免多次访问dom选择集
    12、高频触发事件设置使用函数节流
    13、使用Web Storage缓存数据