阅读 175

是谁拖了网站访问速度的「后腿」 ?

对做前端开发的同学来说,请求排队、网络、Web 应用程序、页面加载、资源下载这些针对网站的性能指标是很熟悉的。对白屏时间、首屏时间、页面加载完成时间、资源下载完成时间以及整页时间这些性能指标也不算陌生。

但是这10个指标分别都是什么意思?跟网站又有什么关系?为什么 TOPN 页面会惊现平均时间为1分钟?是谁在拖网站访问速度的「后腿」?本文希望能够帮助大家解决心中的困惑。

是谁拖了网站访问速度的「后腿」 ? 技术分享 第1张

其实,性能指标不在多,找到适合自己业务的,作为判断标准才是最好的。

用户打开一个页面的过程

从用户在浏览器地址栏里面输入一个网址,到用户最终看到页面,在页面上可以进行各种操作,简单分为一下几个过程:

1、用户输入网址,浏览器发出请求。(主要是网络耗时)
2、Web 服务器接到请求,处理请求,(主要是 Web 服务器耗时)
3、Web 服务器返回数据,浏览器开始接受数据(主要是网络耗时)
4、浏览器边接受数据边加载页面中的脚本(下载 js 脚本等耗时)
5、浏览器下载页面中的样式、图片、视频等资源(下载图片等耗时)

页面加载过程中 5 个关键的时间点

白屏时间:打开一个页面感觉屏幕从白色开始变化时刻 首屏时间:页面刚开始加载是杂乱无章,无样式的(在网速缓慢时候特别明显),当页面样式加载完毕的时候,页面就好看多了

页面加载完成时间:

  • 页面加载完成时间是和业务关系最为密切的时间点,大量 js 业务逻辑都在这个时间点触发;
  • 如果你发现页面上一个按钮开始无法点击,过一会可以点击了,那么可以点击的时间点就是页面加载完成时间;
  • 对于移动端或者 PC 端,有很多应用是 js 控制出现一个 loading 动画,当有数据了在去掉 loading,js 控制出现 loading 的时刻就是页面加载完成时间;
  • 如果页面很长,开始没有滚动条,当滚动条出现的时候,就是页面加载完成时间;
  • 资源下载完成时间:可以看到页面上的图片、看到 iframe 嵌套页面里面的内容,浏览器标签不在出现loding不断旋转的时刻,就是资源加载完成的时间点;

是谁拖了网站访问速度的「后腿」 ? 技术分享 第3张

  • 整页时间:页面彻底加载完成的时间,一般情况下资源下载完成时间和整页面时间很接近。

影响页面加载时段的主要因素

1: 基础的网络质量
2: 网页 Html 文件的大小 例如 你是10k,1M 10M
3:是页面中通过 script 标签引入的脚本下载和执行,包括 head 中的也包括 body 中

因为一个浏览器同时可以可以下载的文件是有限的,同一个域名下可以同时下载的文件也是有限的 总的来说一般的浏览器为

2~4 性能好点的浏览器是8个左右 所以这个阶段网页中下载 CSS,图片等资源,都会影响页面加载时段的面积 因为css影响页面样式,所以一般放在 head 里面,公共的 js 文件放在 head 里面,业务的 js 建议通过动态加载

影响资源下载时段的主要因素

1:基础的网络质量
2:页面中图片、视频、iframe 嵌套页,广告等,都在这个阶段下载
3:下载资源个数和域名数,因为浏览器从同一个域名下同时下载资源是有限的,所以域名个数个和下载文件的个数都会影响整体性能
所以一般都会把一个域名下载资源分散到3个左右域名下,同时下载,提高页面性能 4:第三方资源 例如百度统计、谷歌统计、 百度地图 一般都会在这个阶段加载,如果第三方资源处现在问题,资源下载时段面积也会增大

查看那些资源的下载拖慢了整个页面的速度

是谁拖了网站访问速度的「后腿」 ? 技术分享 第4张

如何优化

1. 尽可能的减少 HTTP 的请求数 [content]
2. 使用 CDN(Content Delivery Network) [server]
3. 添加 Expires 头(或者 Cache-control ) [server]
4. Gzip 组件 [server]
5. 将 CSS 样式放在页面的上方 [css]
6. 将脚本移动到底部(包括内联的) [javascript]
7. 避免使用 CSS 中的 Expressions [css]
8. 将 JavaScript 和 CSS 独立成外部文件 [javascript] [css]
9. 减少 DNS 查询 [content]
10. 压缩 JavaScript 和 CSS (包括内联的) [javascript] [css]
11. 避免重定向 [server]
12. 移除重复的脚本 [javascript]
13. 配置实体标签(ETags) [css]

14. 使 AJAX 缓存