南宁建站模板厂家,出库入库管理软件app,鞍山信息港官网,最好的设计师平台网站由于本人对http协议以及dns对url的解析问题并不了解#xff0c;所以这里之探讨url请求加载到浏览器端时#xff0c;浏览器对html的解析到呈现过程#xff0c;后来经过几位道友分享#xff0c;整理了一下url解析的过程#xff0c;如下#xff1a;
用户输入url地址#x…由于本人对http协议以及dns对url的解析问题并不了解所以这里之探讨url请求加载到浏览器端时浏览器对html的解析到呈现过程后来经过几位道友分享整理了一下url解析的过程如下
用户输入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外部样式会阻塞后续脚本执行直到外部样式加载并解析完毕。
!DOCTYPE html
html
headmeta charsetutf-8titleJS Bin/titlescriptvar start new Date;/scriptlink hrefhttp://udacity-crp.herokuapp.com/style.css?rtt2 relstylesheet/headbodyspan idresult/spanscriptvar end new Date;document.getElementById(result).innerHTML (end-start);/script
/body
/html2外部样式不会阻塞后续外部脚本的加载但会阻塞外部脚本的执行。
!DOCTYPE html
html
headmeta charsetutf-8titleJS Bin/titlescriptvar start new Date;/scriptlink hrefhttp://udacity-crp.herokuapp.com/style.css?rtt2 relstylesheet/headbodytestscript srchttp://udacity-crp.herokuapp.com/time.js?rtt1a/scriptdiv idresult/divscriptvar end new Date;document.getElementById(result).innerHTML end-start;/script/body
/html主页代码var loadTime document.createElement(div);
loadTime.innerText document.currentScript.src executed window.performance.now();
loadTime.style.color blue;
document.body.appendChild(loadTime);从瀑布图中我们可以看到外部脚本与外部样式是并行加载但直到外部样式加载完毕外部脚本才开始执行 3如果后续外部脚本含有async属性IE下为defer则外部样式不会阻塞该脚本的加载与执行
!DOCTYPE html
html
headmeta charsetutf-8titleJS Bin/titlescriptvar start new Date;/scriptlink hrefhttp://udacity-crp.herokuapp.com/style.css?rtt2 relstylesheet/headbodytestscript srchttp://udacity-crp.herokuapp.com/time.js?rtt1a async/scriptdiv idresult/divscriptvar end new Date;document.getElementById(result).innerHTML end-start;/script/body
/html从瀑布图中可以看到外部脚本的加载与执行并不受link的阻塞 4对于动态创建的link标签不会阻塞其后动态创建的script的加载与执行不管script标签是否具有async属性但对于其他非动态创建的script以上三条结论仍适用
!DOCTYPE html
html
headmeta charsetutf-8titleJS Bin/titlescriptvar start new Date;/script/headbodytestscript var link document.createElement(link);link.href http://udacity-crp.herokuapp.com/style.css?rtt2;link.rel stylesheet;document.head.appendChild(link);var script document.createElement(script);script.src http://udacity-crp.herokuapp.com/time.js?rtt1a;document.head.appendChild(script);/scriptdiv idresult/divscriptvar end new Date;document.getElementById(result).innerHTML end-start;/script/body
/html这是最终页面结构 通过瀑布图与页面结果可以看到动态创建的外部脚本并未受link的阻塞。 link或style标签都会被解析成DOM节点。浏览器对于样式表还会生成CSSStyleSheet对象(C代码)他集成子CSSStyle指标是样式表对象而不管该对象来自于Style还是link。该对象主要包含以下几个重要属性和方法
CSSRules 即css样式代码 type 表示样式表类型的字符串。对CSS样式表而言这个字符串是“type/css”。 href 通过link生成的为样式链接否则为undefined insertRule(rule,index)向cssRules集合中指定的位置插入rule字符串。IE不支持这个方法但支持一个类似的addRule()方法。 deleteRule(index)删除cssRules集合中指定的位置的规则。IE不支持这个方法但支持一个类似的removeRule()方法。 文档中对于所有的样式表集合可以通过document.styleSheets来访问。同时对于style或link DOM元素可以通过element.sheet来访问CSSStyleSheet对象IE中则通过element.styleSheet来访问。
html解析完毕DOM树创建完成后DOMContentLoaded事件即触发这时候可以用过script来操作DOM节点。 构建呈现树 HTML解析完毕后开始构建呈现树RenderTree这一步的主要工作在于将css样式应用到DOM节点上WebKit内核将这一过程称为附着其他浏览器有不同的概念。对前端工程师而言这个过程会涉及到CSS层叠问题。
首先将根据样式重要性排序由低到高依次为
浏览器声明用户普通声明作者普通声明作者重要声明用户重要声明
对于同一重要级别则是根据CSS选择符的特指度来判定优先级一条样式声明的特指度由以下四个部分决定S-I-C-E
声明来自内联的style属性则 S1声明中含有id属性则 I1声明中含有类、伪类、属性选择器则 C1生命中含有元素、伪元素选择器则 E1
特指度的比较类似于两个字符串之间比较大小。
呈现树的每一个节点即为与其相对应的DOM节点的CSS框框的类型与DOM节点的display属性有关block元素生成block框inline元素生成inline框。每一个呈现树节点都有与之相对应的DOM节点但DOM节点不一定有与之相对应的呈现树节点比如display属性为none的DOM节点而且呈现树节点在呈现树中的位置与他们在DOM树中的位置不一定相同比如float与绝对定位元素。
下图为呈现树与其相对应的DOM树节点 布局
呈现树构造完成后浏览器便进行布局处理及计算每个呈现树节点的大小和位置信息。有道友可能要问前面已将样式附着到DOM节点上不是已经有了样式信息为何还要计算大小。这里可以这样理解以上包含大小的样式信息只是存在内存里并没有实际使用浏览器要根据窗口的实际大小来处理呈现树节点的实际显示大小和位置比如对于margin为auto的处理。
布局是一个递归过程从跟呈现节点开始递归遍历子节点计算集合几何信息。具体过程还是比较复杂偶也不甚了解道友们还是查阅其他资料吧。
绘制
布局完成后便是将呈现树绘制出来显示在屏幕上。对于每一个呈现树节点来说主要绘制顺序如下
背景颜色背景图片边框子呈现树节点轮廓
