前端优化总结

时间 2019-12-08

标签前端优化总结繁體版

原文原文链接

第一部分：HTTP请求

最关键的地方就是为了减小请求，因此为了减小请求，全部就有三点javascript
- 我不但愿请求，无论怎么样，我能不请求就不去请求html
  - 因此这就涉及到了缓存，之前请求过的，我已经放到本地了，我也不会再去服务器请求了，因此你直接拿这个就行，添加 Expires 头，配置 ETag，使 Ajax 可缓存前端
    - 例子：当初作一个图片裁剪的，裁剪后由于命名是统一的，因此即便向服务求请求了，返回的图片的名字仍是同样，结果DOM就是不渲染，后来只好在图片的后缀加上随机时间才行java
    - 强缓存：在 web 服务器返回的响应中添加 Expires 和 Cache-Control Header。
      协商缓存：经过【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】这两对 Header 分别管理。git
  - 避免HTTP重定向github
    - HTTP重定向及其耗时，特别是把客户端定向到一个彻底不一样的域名的状况下，还会致使额外的DNS查询、TCP链接延迟，等等web
- 你要我请求，那我能不走就不走，一旦我要走，我就能在最近请求到就拿最近的面试
  - 因此就涉及到 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文档由解析器递增解析，从而保证文档能够间隙性发送，以求得最佳性能
- 非页面结构
  
  <link rel="dns-prefetch" href="//hostname_to_resolve.com"> ➊
  <link rel="subresource" href="/javascript/myapp.js"> ➋
  <link rel="prefetch" href="/images/big.jpeg"> ➌
  <link rel="prerender" href="//example.org/next_page.html"> ➍
  
  ➊ 预解析特定的域名
  ➋ 预取得页面后面要用到的关键性资源
  ➌ 预取得未来导航要用的资源
  ➍ 根据对用户下一个目标的预测，预渲染特定页面

参考