HIGH PERFORMANCE

Web Programming Guide


高效Web前端编程实践


@oscartong


  • QQ Group
  • WebQQ
  • Q+
  • Mobile QQ

High Performance ??


速度!速度!速度!

  • 更快加载
  • 更快渲染
  • 更快执行
  • 更快响应

Topics

  • 缓存 (Cache)
  • 往返时间 (RTT)
  • 请求 (Request & Payload)
  • 渲染 (Render)
  • 移动平台 (Mobile)

Cache

优化缓存

  • 缓存如何工作?
  • 浏览器缓存
  • 代理服务器缓存

缓存如何工作


  • Expires
  • Cache-Control: max-age
  • Last-Modified
  • ETag
  • HTML5 AppCache

GET /xxx HTTP/1.1
Host: xxx
If-Modified-Since: Tue, 18 Dec 2012 05:12:18 GMT
If-None-Match: "xxxx"

HTTP/1.x 304 Not Modified

浏览器缓存


  • 尽量缓存所有静态资源
    • Expires设置为1个月至1年
    • Expires比Cache-Control: max-age有更广泛支持
  • Vary header (IE)
    • 去掉除Accept-Encoding和User-Agent外的所有其他值
    • 或去掉整个Vary头

    代理服务器缓存


    • NO query string (url?xxx)
    • 不要缓存带cookie的资源 (Cache-control: private)
    • 注意代理服务器处理gzip JS/CSS的问题
      • Cache-control: private
      • Vary: Accept-Encoding 让代理保存压缩/已解压两份

    RRT

    最小化往返时间

    • 请求的“一生”
    • 优化请求时间
    • 优化请求数量
    • 并行化请求

    请求的“一生”


    优化请求时间


    • 优化DNS查询时间
      • 尽量使用相同域名(以URL区分资源)
        • dev.qq.com > www.qq.com/dev
        • 减少DNS查询次数
        • 相同域名允许浏览器重用TCP链接
      • 负责渲染页面的JS等资源应与页面使用相同域名
    • 优化重定向
      • 去除非必要的重定向
      • 服务器重写
      • 尽可能使用HTTP进行重定向(而不是JS)

    优化请求数量

    合并JavaScript文件



    合并前:4.46s,合并后:1.87s

    优化请求数量

    合并JavaScript文件

    • 考虑将JS合并成两个文件
      • 一个放到head,包含渲染页面所必须的代码
      • 另一个待页面加载完毕后再加载
    • 尽量减小head所包含的JS文件数量和体积

    优化请求数量

    合并CSS文件

    • 避免使用CSS @import
      • 合并成一个文件
      • 拆分成多个link(并行加载)

    优化请求数量

    合并图片


    并行化请求

    把script标签放到link标签后面



    并行化请求


    • 通过使用多个域名来加大并行加载数
    • 同一个资源总是使用同一个同一个域名


    Request & Payload

    最小化请求和负载

    • 优化请求头大小
    • 优化请求内容大小
    • 优化静态资源

    优化请求头大小


    • 去除无用或重复的cookie
    • 在服务端保存cookie
    • 使用无cookie服务端下发静态资源

    优化请求内容大小

    gzip & minify

    • gzip
      • CSS selector按a-z顺序
      • HTML节点属性按a-z顺序
      • 统一命名风格
      • 统一单/双引号
    • minify JavaScript, CSS, HTML
      • closure compiler
      • yui compressor
      • jsmin
      • ...
    • 避免gizp图片、视频、pdf等二进制文件

    优化请求内容大小

    延迟加载JavaScript以减小初始页面加载内容


    优化静态资源

    压缩图片;避免图片缩放


    Render

    优化浏览器渲染

    • 优化CSS
    • 优化图像渲染
    • 提前HTML解析和JS执行

    优化CSS


    • 避免CSS Selector匹配大量节点
      • 避免使用 *
      • 多使用class/id来收窄范围
      • 避免冗余规则(比如div#someid)
      • 避免复杂多层级的selector
    • 避免CSS Expression
      • 使用JS来替代,性能更佳
    • 把CSS引用翻到head内(避免页面重绘)

    优化图像渲染

    为图像指定宽高值

    • 避免多余的页面重绘
    • 浏览器可在图片加载完成前提前渲染(占坑)

    提前HTML解析和JS执行

    设置Content-Type


    • 响应头部
    • HTML meta标签

    Mobile

    移动平台优化

    • 硬件资源有限
    • 移动互联网高延时、高RTT

    移动平台优化


    • 延迟解析JavaScript
      • 延迟加载
      • <script defer>
      • 把JavaScript代码放到注释里(Gmail
      • 1KB JS = 1ms
    • 把JavaScript等静态文件存到LocalStorage

    硬件加速



    Thanks :)

    Q&A

    Made with Slides.com