前端性能优化

工具

性能评级工具（PageSpeed 或 YSlow）

页面加载缓慢的原因

浏览器部分

（1）网络层面

• 过多的HTTP请求
  打开一个网页的时候，后台程序的响应并不需要太多时间，等待的时间主要花费在下载网页元素上了，即 HTML、CSS、JavaScript、Flash、图片等。据统计，每增加一个元素，网页载入的时间就会增加25-40毫秒(具体取决于用户的带宽情况)。
• 资源访问带宽小
• 网页元素(图片、视频、样式)太大

（2）浏览器渲染层面

• 渲染阻塞（jS阻塞与CSS阻塞）
• 重复渲染（频繁操作元素，造成的重排重绘）
• DNS解析（DNS解析找出IP地址越快，响应的越快）

（3）服务端层面

• 硬件配置低:这个是双向的
• 服务器软件，比如防火墙、内网策略等
• 未对Nginx这类web服务器进行配置优化
• CPU占满，数据库未优化
• 代码问题，代码效率，代码性能
• 包含了过多的分析类工具

代码部分

（1）构建层面

未对代码进行打包、压缩、兼容性优化（webpack打包优化）

未合并重复的请求、代码

（2）编码层面

• 错误的编排JS与CSS

• for循环，迭代、同步、重定向、阻塞请求（JS代码阻塞）

• 未删除重复、无用的代码

• 未对逻辑业务复杂的代码进行重构，了解设计模式，对业务进行梳理

（3）机制（SSR,英文Server Side Render:服务器端渲染）

• 未加入Async异步机制

• 未思考页面加载、用户体验（可以使用页面懒加载，快要滚动到页面的时候，图片等显示出来）

（4）规范

• CSS规范

• HTML规范/HTML5规范

• Airbnb代码规范

优化原则

CSS

• 多个css合并，尽量减少HTTP请求

  内联图片(data URI scheme)

  
  <img src="data:image/png;base64,iVAGRw0KGDCFGNSUhEUgACBBQAVGAD CAIATYJ7ljmRGGAAGElEVQQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPACCCTElFTEVBQmGA" />
  1
  2

• 将css文件放在页面最上面

• 移除空的css规则

  避免空src或者href值

• 避免使用css表达式

• 选择器优化嵌套，尽量避免层级过深

• 充分利用css继承属性，减少代码量

• 抽象提取公共样式，减少代码量

• 属性值为0时，不加单位

• 属性值为小于1的小数时，省略小数点前面的0

• 使用CSS Sprites将多张图片拼接成一张图片，通过CSS background 属性来访问图片内容

JS

• 节流、防抖

• 长列表滚动到可视区域动态加载（大数据渲染）

• 图片懒加载（src）

• 使用闭包时，在函数结尾手动删除不需要的局部变量，尤其在缓存dom节点的情况下

• DOM 操作优化

• • 批量添加dom可先createElement创建并添加节点，最后一次性加入dom
  • 批量绑定事件，使用事件委托绑定父节点实现，利用了事件冒泡的特性
  • 如果可以，使用innerHTML代替appendChild
  • 在 DOM 操作时添加样式时尽量增加 class 属性，而不是通过 style 操作样式，以减少重排（Reflow）

网络

• 减少 HTTP 请求数量

  组合文件、优化图片，使用sprites设计风格：将背景图片合并成一个文件，通过background-image和background-position控制显示；

• 利用浏览器缓存，公用依赖包（如vue、Jquery、ui组件等）单独打包/单文件在一起，避免重复请求

• 减小cookie大小，尽量用localStorage代替

• CDN托管静态文件

• 开启 Gzip 压缩

资源压缩与合并

• 使用在线网站进行压缩
• node.js提供了html-minifier工具
• 后端模板引擎渲染压缩