输入URL到页面呈现详细过程二(标签转换为DOM的过程)
当浏览器获取了资源后,首先是对资源进行解析。
一、解码
服务器将资源转为bit发送给浏览器,浏览器将bit转化成正确数据。
浏览器根据服务器响应头的Content-type转化为正确的数据格式。如果浏览器无法正确解析,浏览器会自行匹配一种解码格式,很多时候<mate>标签中也会告知解码格式。
通常我们在HTML文件中的解码格式是UTF-8,一般的浏览器默认的解码格式也是UTF-8。所以当解码出错的时候,屏幕上都是中文乱码。
二、预解析
完成了解码后,浏览器会进行一个预解析的操作,预先加载后面需要的资源,减少处理时间。比如浏览器会预先加载img标签的src属性值,将获取图片的请求加到请求队列中,尽早将图片获取到本地。我们也可以通过 preload 和 prefetch 两种属性将需要尽早加载的资源告知浏览器。
preload使用方式:<link ref="preload">
preload特点: 1、preload加载的资源是在浏览器渲染机制之前进行处理的,并且不会阻塞onload事件;
2、preload可以支持加载多种类型的资源,并且可以加载跨域资源;
3、preload加载的js脚本其加载和执行的过程是分离的。即preload会预加载相应的脚本代码,待到需要时自行调用;
prefetch使用方式:<link ref="prefetch">
prefetch特点: prefetch加载的资源可以获取非当前页面所需要的资源,并且将其放入缓存至少5分钟(无论资源是否可以缓存);并且,当页面跳转时,未完成的prefetch请求不会被中断;
三、符号化
我理解符号化就是识别html标签。
四、构建dom树
解析符号后,浏览器获得符号,以合适的方式创建了一个DOM对象,DOM对象的数据结构是树形的,所以称之为构造树。
当整个解析的过程完成以后,浏览器会通过DOMContentLoaded事件来通知DOM解析完成。还有load事件(表示所有资源已经加载完成,包括图片、视频、CSS等等)、unload事件表示界面即将关闭。
以上为本人根据其他资源学习,然后整理的笔记。
原文https://juejin.cn/post/6844903768362844173