直到外部资本加载并解析或履行结束后才会继续向下解析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与肯定定位元素。