首页 > 代码库 > html渲染过程
html渲染过程
用户输入url地址,浏览器依据域名寻觅IP地址
浏览器向服务器发送http恳求,假如服务器段回来以301之类的重定向,浏览器依据相应头中的location再次发送恳求
服务器端承受恳求,处理恳求生成html代码,回来给浏览器,这时的html页面代码可能是通过紧缩的
浏览器接收服务器呼应成果,假如有紧缩则首先进行解压处理,紧接着即是页面解析烘托
解析烘托该进程首要分为以下进程:
解析HTML
构建DOM树
DOM树与CSS款式进行附着结构出现树
规划
制作
解析与构建DOM树
前两步咱们放在一同评论,浏览器的实际作业也是将他们放在一同进行的。关于HTML浏览器有专门的html解析器来解析HTML,并在解析的进程中构建DOM树。在这里咱们评论两种DOM元素的解析,即款式(link、style)与脚本文件(script)。因为浏览器选用自上而下的方法解析,在遇到这两种元素时都会堵塞浏览器的解析,
直到外部资本加载并解析或履行结束后才会继续向下解析html。关于款式与脚本的先后顺序相同也会影响到浏览器的解析进程,究其原因首要在于:script脚本履行进程中可能会修改html界面(如document.write函数);DOM节点的CSS款式会影响js的履行成果。在我的测验中得到以下四条结论:
1)外部款式会堵塞后续脚本履行,直到外部款式加载并解析结束。
View Code
2)外部款式不会堵塞后续外部脚本的加载,但会堵塞外部脚本的履行。
主页代码
外部脚本
从瀑布图中咱们能够看到,外部脚本与外部款式是并行加载,但直到外部款式加载结束,外部脚本才开端履行
3)假如后续外部脚本含有async特点(IE下为defer),则外部款式不会堵塞该脚本的加载与履行
View Code
从瀑布图中能够看到外部脚本的加载与履行并不受link的堵塞
4)关于动态创立的link标签不会堵塞这以后动态创立的script的加载与履行,
不论script标签是否具有async特点,但关于别的非动态创立的script,以上三条结论仍适用
HTML解析结束后,开端构建出现树RenderTree,这一步的首要作业在于将css款式应用到DOM节点上,WebKit内核将这一进程称为附着,别的浏览器有纷歧样的概念。对前端工程师而言这个进程会涉及到CSS层叠疑问。
首先将依据款式主要性排序,由低到高依次为:
浏览器声明
用户一般声明
作者一般声明
作者主要声明
用户主要声明
关于同一主要等级,则是依据CSS选择符的特指度来断定优先级;一条款式声明的特指度由以下四个有些决议:S-I-C-E
声明来自内联的style特点则 S+1;
声明中含有id特点则 I+1;
声明中含有类、伪类、特点选择器则 C+1;
生命中含有元素、伪元素选择器则 E+1;
特指度的对比类似于两个字符串之间对比巨细。
出现树的每一个节点即为与其相对应的DOM节点的CSS框,框的类型与DOM节点的display特点有关,block元素生成block框,inline元素生成inline框。每一个出现树节点都有与之相对应的DOM节点,但DOM节点纷歧定有与之相对应的出现树节点,比方display特点为none的DOM节点,并且出现树节点在出现树中的方位与他们在DOM树中的方位纷歧定相同,比方float与肯定定位元素。
html渲染过程
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。