码迷,mamicode.com
首页 > Web开发 > 详细

html渲染过程

时间:2017-04-25 13:28:06      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:过程   isp   界面   ini   webkit   发送   defer   mini   主页   

用户输入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渲染过程

标签:过程   isp   界面   ini   webkit   发送   defer   mini   主页   

原文地址:http://www.cnblogs.com/xiaozhim/p/6761164.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!