分析网页性能

在分析网页性能之前要清楚的知道,从我们输入url开始到看到网站,这整个过程到底发生了什么。那么在针对每个过程优化。现在就让我们从前端面试的经典问题走起:从输入url到页面加载完发生了什么?用最简单的话来描述如下:

  1. DNS解析:从url定位到ip的过程
  2. 发送网络请求:下载html文档。通常我们使用http协议(现在通常升级到HTTP2.0,SPDY),底层可能是TCP/UTP,这里会有经典的三次握手连接。
    3.下载完html文档之后,浏览器开始解析html文档。话说浏览器的解析也可以长到一篇文章来说明,这里简单讲下。就是构建dom树,然后下载css样式,然后渲染树出来,然后浏览器绘制。然后下载js(因为一般js都是放在底部),然后解析js。整个页面完全出来了。

如下是绘制的一个完整的网页请求:


QQ截图20160901215414.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,277评论 4 61
  • 在我们点击一个网址,到它能够呈现在浏览器中,展示在我们面前,这个过程中,电脑里,网络上,究竟发生了什么事情。 服务...
    studystudy阅读 353评论 0 0
  • 在App开发中,内嵌WebView始终占有着一席之地。它能以较低的成本实现Android、iOS和Web的复用,也...
    独酌丿红颜阅读 11,463评论 0 33
  • 这是一条让人尴尬的回答,我爱过的人并没有爱过我,在我第一次表白的时候,他就拒绝我了。但还是有一些甜蜜瞬间的,至少对...
    艾冬天阅读 531评论 0 0
  • 曾经对岩土鬼谷子有过一些想法,甚至打算写一篇小说来“鬼谷子”一把。我现在不写是因为真心怕写了就到谷底见鬼去了,好吧...
    贯军阅读 399评论 3 1