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

时间 2019-11-08

原文原文链接

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

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

前言

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

前端性能指标

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

白屏时间:用户从打开页面开始到有页面开始呈现为止。
首屏时间:用户从打开页面开始到首屏页面所有加载且渲染完成。
用户可操做时间: 用户能够进行正常的事件输入交互操做。

从输入Url到页面渲染过程

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

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

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

发送HTTP请求:服务器

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

优化方案 : 核心在于减小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操做以及避免阻塞的角度进行优化

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

参考连接:

雅虎前端优化的35条军规