第一部分: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文档由解析器递增解析,从而保证文档可以间隙性发送,以求得最佳性能

    • 非页面结构

      <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"> ➍


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

参考

你可能感兴趣的文章

载入中...
catchme catchme

47 声望

发布于专栏

coder

日常的总结文章

0 人关注