你的页面健康吗？



前端的基本工作就是写页面，那么你写那么多页面，知道自己的页面健康吗，性能好吗？如果你不单单是完成业务需求，还会关注自己的页面是否健康，那么你是一个有追求的前端开发者。本篇文章将会讲述如何去知道你的页面是否健康。



指标



一个页面是否健康，性能是否达标，并不是在我的自己公司电脑自己的网络里打开得很快就代表你的页面性能很好。是否有关注过淘宝、京东等大厂的页面加载性能，和自己的对比？在2018年，我在公司里面遇到一些领导很关注我们前端团队做出来的页面性能如何，感觉很慢，那么既然大佬有需求提出来，我们就满足嘛。那我们应该怎么做呢？第一，发现问题；第二，解决问题；第三，数据说话。接下来我们分为初、中、高级的方式去说明我是如何发现自己页面是否健康的。



在开始之前，首先我们一定要知道，有什么指标去说明一个页面的健康度。既然说到这里，也总结一下一下浏览器从输入url开始到页面渲染出来，到底经历了什么阶段。



1. 输入url（一般我们都是输入域名）

2. DNS解析域名，变成目标服务器的实际ip地址

3. TCP/IP三次握手

4. 浏览器建立HTTP请求

5. 服务器处理请求

6. 浏览器接收服务器返回数据（一般为html）

7. 浏览器渲染HTML

8. 解析HTML时遇到CSS，JS，IMAGE等资源时进行加载（同步或者异步，后者不阻塞页面加载）

9. HTML解析完毕

10. 页面中所有资源都加载完毕



从输入url到页面呈现的过程大致上是这样，那么对于前端来说，有两个指标一定不陌生，domReady和onLoad，我们在写JS的时候，很多时候都需要在domReady之后执行查找元素，或者onLoad的时候对一些图片进行懒加载或者统计一些数据上报等。在这里就不解析domReady和onLoad的基本知识了，那么我们就基于这两个基本指标，如果初级的判断页面的健康情况。



初级页面健康判断



作为一个前端开发者，必须要怀着感恩的心去面对chorme，它为我们实在付出太多了，那么初级判断页面的健康的方式就是使用chorme的开发者工具去看整个页面的加载数据了。那么应该看哪里呢？



我们用租租车的首页去看整个首页的加载性能：





最最最简单的方式就是看右下角，chorme已经给出了整个页面的domReady和onLoad的时间了。





好像看起来还可以，不到1秒就domReady了，差不到4秒就onload了，其实已经说不错了，那么最初步的判断就可以从这里看到整体的性能了，那么我们进一步的去看细节的部分。



中级页面健康判断





我们先看第一步部分，domReady从开始到完成发生了什么，可以看都我们使用的http是2.0的版本，这样前端就可以尽情的切割代码了，可以看到有10个文件是同步下载的，也只有其中2个文件是需要进行tcp连接的，其余都是没有tcp连接的，如果不太清楚http2.0的可以谷歌相关资料或者看我上一篇文章小前端探索http。从这个数据上可以看到加载的顺序，加载的文件大小等相关信息。



鼠标移上某一条数据还能看到更加详细的情况





里面也有说明整个请求中的每一个细节的耗时，DNS解析时间，链接服务器时间，SSL时间呀（因为是https），还包括TTFB的时间（从请求到接收到首字节的时间），整个下载的时间，总共耗时时长等。在这里我们就可以很好的定位某一些文件比较慢的原因，到底是在哪一个环节慢了，是体积太大呢，还是DNS解析时间太长，或者TTFB时间太长。有时候页面太慢很多无知的人矛头都是指向前端的资源问题的，这个时候我们就能从加载慢的页面中去分析每一个文件的加载信息，定位问题是什么了。（也就很好把锅甩出去了）



现在我们一切的查看都是基于wifi，没有限制网络的速度，有时候用户的网络并非那么好，很多时候移动设备的网络并不稳定，所以我们还可以利用chorme的网络设置去模拟3g或者更差的网络状态，从而去更加接近用户的网络状态。





高级页面健康判断



其实有一个很好网站去帮我们检测网络情况，webpagetest。





我们可以选择很多国家地区，不同的设备，不同的网络，不同的地区去进行测试你的页面。webpagetest会有很详细的每一个页面的不同维度的指标。





还能看更加细致信息，例如页面的加载图像，加载资源瀑布流等信息。





还有一些其余的指标信息：











因为用该网站去帮我们检测会更加的全面，可以看到不同地区的一些性能问题。当然如果你想要很多中国地区，很可惜它并没有提供很多国内的地区可以选择。但是可以是一个很不错的参考网站。但是有一点我们需要知道的，就是如果我们较真webpagetest的网络链路情况呀，运营商情况的话，那么可能它并不能满足你的要求。但是我相信已经能满足大量对于性能的检测需求了。



另外一个就是使用谷歌自带的Audits去进行页面的测试，但是也是根据自己所在网络中测试，无法去模拟其他地区的网络，而且里面的很多参数并不能完全说明一个页面的健康情况，更多的是去表达页面的一些规范。所以个人建议不去使用谷歌的Audits去测试你自己的页面。以防有人用自己的页面拿去用Audits测试，然后看到结果崩溃，先附上手淘的页面测试结果。





绝无不敬的意思，只是作为一个参考而已。



总结



作为一名前端开发者，我们要对自己的作品有要求，不能只为了满足需求而完成页面。以上的这一些测试页面性能方法，是本人经过2018年的慢项目优化中，积累下来的定位问题的方式，以及用数据去说明你的页面已经足够的快的方法。虽然分为了初中高3个级别去说，但是其实，更应该是用第一步，第二步和第三步去做比较合适。先从大体再到细节去定位问题。希望本篇文章能给大家带来一些收获，欢迎继续补充大家的方法！