不能错过的web前端性能优化总结

web前端性能优化主要分为如下几个板块:

• 加载优化

  • DNS预解析
  • 合并img、css、javascript文件，减小http请求
  • 缓存一切可缓存资源
  • 使用长Cache
  • 使用外联式引用css、javascript文件
  • 压缩HTML、css、javascript文件
  • 启用GZip
  • 使用首屏加载(好比同构)
  • 使用按需加载资源文件
  • 使用滚屏记载资源文件
  • 资源懒加载
  • 经过Media Query加载css文件
  • 增长Loading进度条
  • 减小Cookie
  • 避免重点向

• 图片优化

  • 在保证图片质量的状况下，压缩图片，减小图片大小
  • 使用Css三、svg、iconfont代替图片
  • 首次加载不大于1024KB的图片
  • 图片宽不大于640px(移动端)

• 脚本优化

  • 减小重回和回流操做
  • 缓存DOM元素、DOM列表长度length、属性值
  • 使用事件委托，避免批量绑定事件
  • 尽可能使用ID选择器
  • 使用touch事件代替click事件
  • 使用节流函数减小性能消耗

• HTML优化

  • css文件写在头部，javascript放在尾部
  • 避免层级深嵌套
  • 避免img、iframe、a等元素的空src
  • 避免行内样式和事件绑定
  • 大图片避免使用base64

• css优化

  • 移除空的css规则
  • 正确使用display的属性
  • 不滥用float
  • 不声明过多的font-size
  • 值为0时不要使用单位
  • 标准化各类浏览器前缀

• 渲染优化

  • HTML使用viewport(移动端)
  • 减小DOM节点
  • 尽可能使用CSS3 3d动画来触发GPU渲染
  • 使用requestAnimationFrame代替setTimeInter和setTimeout
  • 适当使用canvas动画
  • 对于resize、mousemove事件使用节流处理，较少DOM回流和重绘次数

重点提示:

• 首屏加载

  首屏的快速显示，能够大大提高用户对页面速度的感知，所以应尽可能针对首屏的快速显示作优化，好比使用Loading等待动画、服务器渲染首屏(同构)...

• DNS预解析

  DNS 做为互联网的基础协议，其解析的速度彷佛容易被网站优化人员忽视。如今大多数新浏览器已经针对DNS解析进行了优化，典型的一次DNS解析耗费20-120 毫秒，减小DNS解析时间和次数是个很好的优化方式。DNS Prefetching是具备此属性的域名不须要用户点击连接就在后台解析，而域名解析和内容载入是串行的网络操做，因此这个方式能减小用户的等待时间，提高用户体验。

  浏览器对网站第一次的域名DNS解析查找流程依次为：

  浏览器缓存-系统缓存-路由器缓存-ISP DNS缓存-递归搜索

  

  DNS预解析的实现：

  • 用meta信息来告知浏览器, 当前页面要作DNS预解析:

  <meta http-equiv="x-dns-prefetch-control" content="on" />
  复制代码

  • 在页面header中使用link标签来强制对DNS预解析:

  <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
  复制代码

  示例

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta http-equiv="x-dns-prefetch-control" content="on" />
  <link rel="dns-prefetch" href="http://mat1.gtimg.com"/>
  <link rel="dns-prefetch" href="http://tajs.qq.com" />
  复制代码

  注：dns-prefetch需慎用，多页面重复DNS预解析会增长重复DNS查询次数。

  PS：DNS预解析主要是用于网站前端页面优化，在SEO中的做用湛蓝还未做验证，但做为加强用户体验的一部分rel="dns-prefetch"或许值得你们慢慢发现。