前端优化总结

第一部分：HTTP请求

• 最关键的地方就是为了减少请求，所以为了减少请求，所有就有三点

  • 我不希望请求，不管怎么样，我能不请求就不去请求

    • 所以这就涉及到了缓存，以前请求过的，我已经放到本地了，我也不会再去服务器请求了，所以你直接拿这个就行，添加 Expires 头，配置 ETag，使 Ajax 可缓存

      • 例子：当初做一个图片裁剪的，裁剪后因为命名是统一的，所以即使向服务求请求了，返回的图片的名字还是一样，结果DOM就是不渲染，后来只好在图片的后缀加上随机时间才行

      • 强缓存：在 web 服务器返回的响应中添加 Expires 和 Cache-Control Header。
        协商缓存：通过【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】这两对 Header 分别管理。

    • 避免HTTP重定向

      • HTTP重定向及其耗时，特别是把客户端定向到一个完全不同的域名的情况下，还会导致额外的DNS查询、TCP连接延迟，等等

  • 你要我请求，那我能不走就不走，一旦我要走，我就能在最近请求到就拿最近的

    • 所以就涉及到 CDN的问题了，CDN可以根据网络流量和负载状况，以及用户的距离，将用户的请求导向到离用户最近的服务节点上

      • 腾讯面试考过一个点，如果CDN挂掉了怎么办，方法是查询请求的JS或者CSS的变量是否存在，如果不存在，就请求服务器上的资源

  • 即使我就请求一次，那么这一次，我请求的东西都希望他的大小是很小的，所以

    • 开启 GZip，合并脚本和样式表，精简 JavaScript，移除重复脚本，图像优化

  • 但是，就是还有但是是不，我说我不想请求，但你非要请求，还一次性请求那么多，那我也要做好措施对不，

    • 所以防止首次加载过多，就实现懒加载，图片到达视线的时候，把属性里面的图片地址放到src 中就可以了

第二部分：非 HTTP请求

上面都是涉及到 HTTP 的，所以数据请求到了呢，我这边又需要怎么做呢

• CSS放在顶部，JS放在底部

  • 因为在浏览器在执行JavaScript代码时，不能同时做其它事情，即每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的还是外链的），JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。

• 减少 DOM 操作

  • DOM操作是比较耗性能的

第三部分：浏览器自身的优化

• 浏览器自身具备的优化

  • 资源预取和排定优先次序

  文档、CSS 和 JavaScript 解析器可以与网络协议层沟通，声明每种资源的优先
  级：初始渲染必需的阻塞资源具有最高优先级，而低优先级的请求可能会被临时
  保存在队列中。

  • DNS • 预解析

  对可能的域名进行提前解析，避免将来 HTTP 请求时的 DNS 延迟。预解析可以
  通过学习导航历史、用户的鼠标悬停，或其他页面信号来触发。

  • TCP • 预连接

  DNS 解析之后，浏览器可以根据预测的 HTTP 请求，推测性地打开 TCP 连接。
  如果猜对的话，则可以节省一次完整的往返（TCP 握手）时间。

  • 页面预渲染 •

  某些浏览器可以让我们提示下一个可能的目标，从而在隐藏的标签页中预先渲染
  整个页面。这样，当用户真的触发导航时，就能立即切换过来。

• 利用浏览器的优化而采取的优化措施

  • 页面结构

    • CSS和JavaScript等重要资源应该尽早在文档中出现

    • 应该尽早交付CSS，从而解除渲染阻塞并让JavaScript 执行

    • 非关键性JavaScript应该推迟，以避免阻塞DOM和CSSDOM构建

    • HTML文档由解析器递增解析，从而保证文档可以间隙性发送，以求得最佳性能

  • 非页面结构

    ➊
    ➋
    ➌
    ➍
    
    
    ➊ 预解析特定的域名
    ➋ 预取得页面后面要用到的关键性资源
    ➌ 预取得将来导航要用的资源
    ➍ 根据对用户下一个目标的预测，预渲染特定页面

参考

• 前端工程与性能优化 关于讨论戳这

• 移动H5前端性能优化指南

• Web 性能权威指南