从输入url开始分析-前端性能优化

阿拉斯加大狗
1,736 阅读4分钟

前端性能的一个重要指标是页面加载时间，不仅事关用户体验，也是搜索引擎排名考虑的一个因素。

来自 Google 的数据表明，一个有 10 条数据 0.4 秒能加载完的页面，变成 30 条数据 0.9 秒加载完之后，流量和广告收入下降 90%。 Google Map 首页文件大小从 100KB 减小到 70-80KB 后，流量在第一周涨了 10%，接下来的三周涨了 25%。 亚马逊的数据表明：加载时间增加 100 毫秒，销量就下降 1%。

前言

关于前端性能优化的文章的看的不少，但是大部分文章都是浅尝辄止或者是零零散散的优化手段拼凑在一起。这篇文章将从<从输入Url到浏览器完成页面渲染>的角度分析每一个过程中可以进行哪些性能优化？

前端性能指标

首先先来了解一下三个重要的性能指标:

  1. 白屏时间:用户从打开页面开始到有页面开始呈现为止。
  2. 首屏时间:用户从打开页面开始到首屏页面全部加载且渲染完成。
  3. 用户可操作时间: 用户可以进行正常的事件输入交互操作。

从输入Url到页面渲染过程

相信能点进这篇文章的盆友对整个过程肯定有充分的了解。接下来我将逐一对每个阶段能进行哪些优化进行分析~

  • DNS解析： 用户输入URL后，浏览器要查询域名对应的ip地址，这个过程要花费20-120ms。DNS查询完成之前，浏览器无法从服务器下载任何数据。

    优化方案: 通过浏览器配置引入DNS缓存

  • 发送HTTP请求:

    Web 前端 80% 的响应时间花在图片、样式、脚本等资源下载上。浏览器对每个域名的连接数是有限制的，减少HTTP请求次数是缩短响应时间的关键。

    优化方案 : 核心在于减少HTTP请求，以及减少请求大小。

    1. 合并 JavaScript、CSS 等文件；
    2. CSS Sprite--将背景图片合并成一个文件，通过background-image和background-positon来减少HTTP请求(HTTP2.0可以并行发送HTTP请求后，这个方案不再适用)
    3. 引入HTTP缓存(配置cache-control或Etag)
    4. 避免图片 src 为空 。src 属性为空字符串，但浏览器仍然会向服务器发起一个 HTTP 请求
    5. Ajax 请求使用 GET 方法。浏览器执行 POST 请求时分成两步，先发送 Header，再发送数据。而 GET 只使用一个 TCP 数据包发送数据，所以首选 GET 方法。而且Get方法可以缓存ajax响应结果。
    6. 懒加载。
    7. 减少cookie大小

  • 服务器处理请求并返回资源

    网站 80-90% 响应时间消耗在资源下载上，减少资源下载时间是性能优化的黄金发则。

    优化方案 : 压缩响应文件大小，以及加快服务器的响应资源的速度

    • 使用CDN(内容分发网络)，将静态资源部署在CDN上
    • 启用 Gzip。 Gzip 压缩通常可以减少 70% 的响应大小，对某些文件更可能高达 90%

  • 页面渲染过程

    页面渲染过程: 构建DOM树 -> 构建CSS规则树 -> 构建渲染树 -> 构建layout树 -> 计算layOut -> Painting

优化方案: 从对减少DOM操作以及避免阻塞的角度进行优化

  1. 把css样式表放在<head>中, js脚本放在页面底部 。把样式表放在 中可以让页面渐进渲染。浏览器下载脚本时，会阻塞其他资源并行下载。因此，最好将脚本放在底部，以提高页面加载速度。
  2. 尽可能减少DOM操作。
  3. 减少repaint(重流)与reflow(重绘)。
  4. 使用事件委托，减少绑定事件监听的节点。
  5. 使用CSS3动画时用transform来代替margin或绝对定位的top，left值。
  6. 不要使用CSS表达式，用link代替`import
  7. 使用外部js、css。 外部JS与CSS可以被浏览器缓存，可以在不同页面间重用。
  8. 涉及到高频率的操作，可以考虑引进节流防抖进行优化。

参考链接:

雅虎前端优化的35条军规

avatar
文章
阅读
粉丝