从输入url到页面显示发生了什么
1. DNS,其实也是网络协议
2. TCP 不容易丢包
3. Http/SSL 缓存etag在这个协议、 header变大
4. 响应解析 (SPA,SSR(同构渲染), 宏观框架 )
5. 浏览器渲染 howbrowserwork 前端优化
url->dns获取ip->建立tcp->解析响应-》l浏览器渲染
tcp(可靠) udp(dns,不可靠, 发出去不管了)
websocket就是tcp中间件抽象层
udp有telnet 发图片SMTPHTTPRPC室内门票TFTP
浏览器进行问询, 无需dns解析。 <link rel="dns-prefetch" href="//g.tcdn.cn"/>
1、输入URL
2、查找DNS缓存获取ip地址,存在直接读取,反之发起DNS解析请求
3、读取http缓存,如果存在强缓存,直接读取,状态码为200,如果缓存过期或者缓存类型为协商缓存,则需要发起http请求
4、建立TCP连接
5、发送http请求,如果资源无更新,返回状态码304,告知浏览器继续从缓存读取,反之,服务端返回最新资源,状态码为200
6、解析html 生成DOM Tree
7、解析过程中如果遇到js、css、img等资源,则继续发起请求,过程同步骤3 4 5
8、html解析过程中如果遇到js,则执行js会阻塞解析,如果是script获取资源,会根据script 是否有defer async属性具体分析:
8.1 如果没有属性,则请求js并执行,会阻塞html解析
8.2 如果有async,则请求js和html解析并行执行,js请求回来,阻塞html解析,执行js
8.3 如果有defer,则请求和解析并行,请求完成继续解析html,等dom加载完成,再执行js
9. 解析css 生成styleSheets(以前叫CSSOM Tree)
10. DOM Tree 和 styleSheets合并成layout Tree
11、layout tree 生成图层树
12、绘制图层,生成绘制列表
13、合成图层(栅格化)
14、合成图片,提交给浏览器进程、显示
5.浏览器渲染:
1.浏览器解析html源码,然后创建一个 DOM树。并行请求 css/image/js在DOM树中,每一个HTML标签都有一个对应的节点,并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement,对应的是html标签。
2.浏览器解析CSS代码,计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级:浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。
3.DOM Tree + CSSOM --> 渲染树(rendering tree)。渲染树和DOM树有点像,但是是有区别的。
DOM树完全和html标签一一对应,但是渲染树会忽略掉不需要渲染的元素,比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。
4.一旦渲染树创建好了,浏览器就可以根据渲染树直接把页面绘制到屏幕上。
以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改,以上过程会被重复执行。实际上,CSS和JavaScript往往会多次修改DOM或者CSSOM。
6.回流和重绘
回流:当render tree 的一部分或全部的元素因改变了自身的宽高,布局,显示或隐藏,或者元素内部的文字结构发生变化 导致需要重新构建页面的时候,回流就产生了.重绘:当一个元素自身的宽高,布局,及显示或隐藏没有改变,而只是改变了元素的外观风格的时候,就会产生重绘。例如你改变了元素的background-color....
7. script defer async