手记

前端性能优化最佳实践

  • 优化的思路:4W

    • Why 为什么要优化(优化的目的)?
    • When 什么时候优化(优化的基本原则)?
    • Where 哪方面需要优化(明确瓶颈所在)?
    • What 怎样优化(针对性能瓶颈对症下药)?
  • 为什么要做性能优化?

    1. 加快页面展示和运行速度
    2. 节约服务器带宽流量
    3. 减少服务器压力
  • 什么时候做性能优化?

    • 基本原则:避免过早优化
      • 首先,保证基本功能完成,再考虑优化
      • 其次,在没有找到性能瓶颈之前,不要优化
  • 哪方面需要做性能优化?

    • 分析一个页面从发起请求到展示到用户大概流程
      • DNS 查询
      • 发送 HTTP 请求
      • 等待服务器响应
      • 下载服务器响应内容
      • 解析 HTML、CSS、JS
      • 渲染 HTML、CSS、JS 和图片
      • 响应用户事件
    • 使用性能评级工具(PageSpeed 或 YSlow)进行定位
  • 怎么做性能优化(对应从发起请求到展示到用户的各环节优化)?
    • 针对 DNS 查询优化
      • 减少网站所用的域名个数(现代浏览器基本都具备并行下载能),减少 DNS 查询时间
      • 建议一个网站使用至少 2 个域,但不多于 4 个域来提供资源
    • 针对发送请求优化
      • localStorage(本地存储)
      • 静态资源打包,开启 Gzip 压缩(节省响应流量)
      • Cookie 隔离(节省请求流量)
      • 使用 CDN 加速(访问最近服务器)
    • 针对等待服务器响应优化
      • 合理设置 HTTP 缓存:Etag 与 Cache-control
      • 启用 HTTP/2(多路复用,并行加载)
      • 优化数据库查询
      • 部署负载均衡
    • 针对下载服务器响应内容优化
      • 用 CSS3 实现图片,对小图标进行 base64(降低请求数)
      • 延迟(defer)加载/异步(async)加载依赖
    • 针对解析 HTML、CSS、JS优化
      • 去掉无用的 HTML、CSS 和 JS
      • 优化首屏时间:脚本后位置、图片压缩、懒加载
    • 针对渲染 HTML、CSS、JS 和图片优化
      • 最小化重绘(repaint)和回流(reflow):批量修改元素样式、避免 table 布局等
    • 针对响应用户事件优化
      • 尽量不在前端做复杂的运算
6人推荐
随时随地看视频
慕课网APP