无意中看到寒冬关于前端的九个问题，细细想来我也只是对第一、二、九问有所了解，正好也趁着这个机会梳理一下自己的知识体系。由于本人对http协议以及dns对url的解析问题并不了解，所以这里之探讨url请求加载到浏览器端时，浏览器对html的解析到呈现过程，后来经过几位道友分享，整理了一下url解析的过程，如下：

  1. 用户输入url地址，浏览器根据域名寻找IP地址
  2. 浏览器向服务器发送http请求，如果服务器段返回以301之类的重定向，浏览器根据相应头中的location再次发送请求
  3. 服务器端接受请求，处理请求生成html代码，返回给浏览器，这时的html页面代码可能是经过压缩的
  4. 浏览器接收服务器响应结果，如果有压缩则首先进行解压处理，紧接着就是页面解析渲染

　　解析渲染该过程主要分为以下步骤：

  1. 解析HTML
  2. 构建DOM树
  3. DOM树与CSS样式进行附着构造呈现树
  4. 布局
  5. 绘制

解析与构建DOM树

　　前两步我们放在一起讨论，浏览器的实际工作也是将他们放在一起进行的。对于HTML浏览器有专门的html解析器来解析HTML，并在解析的过程中构建DOM树。在这里我们讨论两种DOM元素的解析，即样式（link、style）与脚本文件（script）。由于浏览器采用自上而下的方式解析，在遇到这两种元素时都会阻塞浏览器的解析，直到外部资源加载并解析或执行完毕后才会继续向下解析html。对于样式与脚本的先后顺序同样也会影响到浏览器的解析过程，究其原因主要在于：script脚本执行过程中可能会修改html界面（如document.write函数）；DOM节点的CSS样式会影响js的执行结果。在我的测试中得到以下四条结论：

　　1）外部样式会阻塞后续脚本执行，直到外部样式加载并解析完毕。

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS Bin</title>

  <script>var start = +new Date;</script>

  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">

</head>

<body>

  <span id="result"></span>

  <script>

    var end = +new Date;

    document.getElementById('result').innerHTML = (end-start);

  </script>

</body>

</html>

　　2）外部样式不会阻塞后续外部脚本的加载，但会阻塞外部脚本的执行。

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS Bin</title>

  <script>var start = +new Date;</script>

  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">

</head>

<body>

  test

  <script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a"></script>

  <div id="result"></div>

  <script>var 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>

<head>

  <meta charset="utf-8">

  <title>JS Bin</title>

  <script>var start = +new Date;</script>

  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">

</head>

<body>

  test

  <script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a" async></script>

  <div id="result"></div>

  <script>var end = +new Date;document.getElementById("result").innerHTML = end-start;</script>

</body>

</html>

　　从瀑布图中可以看到外部脚本的加载与执行并不受link的阻塞

　　4）对于动态创建的link标签不会阻塞其后动态创建的script的加载与执行，不管script标签是否具有async属性，但对于其他非动态创建的script，以上三条结论仍适用

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS Bin</title>

  <script>var start = +new Date;</script>

</head>

<body>

  test

  <script>

    var link = document.createElement('link');

    link.href = "http://udacity-crp.herokuapp.com/style.css?rtt=2";

    link.rel = "stylesheet";

    document.head.appendChild(link);

    var script = document.createElement('script');

    script.src = "http://udacity-crp.herokuapp.com/time.js?rtt=1&a";

    document.head.appendChild(script);

  </script>

  <div id="result"></div>

  <script>var 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层叠问题。

　　首先将根据样式重要性排序，由低到高依次为：

    1. 浏览器声明
    2. 用户普通声明
    3. 作者普通声明
    4. 作者重要声明
    5. 用户重要声明

　　对于同一重要级别，则是根据CSS选择符的特指度来判定优先级；一条样式声明的特指度由以下四个部分决定：S-I-C-E

    1. 声明来自内联的style属性则 S+1；
    2. 声明中含有id属性则 I+1；
    3. 声明中含有类、伪类、属性选择器则 C+1；
    4. 生命中含有元素、伪元素选择器则 E+1；

　　特指度的比较类似于两个字符串之间比较大小。

　　呈现树的每一个节点即为与其相对应的DOM节点的CSS框，框的类型与DOM节点的display属性有关，block元素生成block框，inline元素生成inline框。每一个呈现树节点都有与之相对应的DOM节点，但DOM节点不一定有与之相对应的呈现树节点，比如display属性为none的DOM节点，而且呈现树节点在呈现树中的位置与他们在DOM树中的位置不一定相同，比如float与绝对定位元素。

　　下图为呈现树与其相对应的DOM树节点

布局

　　呈现树构造完成后浏览器便进行布局处理，及计算每个呈现树节点的大小和位置信息。有道友可能要问，前面已将样式附着到DOM节点上，不是已经有了样式信息为何还要计算大小。这里可以这样理解，以上包含大小的样式信息只是存在内存里，并没有实际使用，浏览器要根据窗口的实际大小来处理呈现树节点的实际显示大小和位置，比如对于margin为auto的处理。

　　布局是一个递归过程，从跟呈现节点开始，递归遍历子节点，计算集合几何信息。具体过程还是比较复杂偶也不甚了解，道友们还是查阅其他资料吧。

绘制

　　布局完成后，便是将呈现树绘制出来显示在屏幕上。对于每一个呈现树节点来说，主要绘制顺序如下：

  1. 背景颜色
  2. 背景图片
  3. 边框
  4. 子呈现树节点
  5. 轮廓

参考资料：

文章有错误之处欢迎各位道友不吝指正

HTML渲染过程详解的更多相关文章

  1. vue.js选择if（条件渲染）详解

    vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...

  2. Android View 的绘制流程之 Layout 和 Draw 过程详解 (二)

    View 的绘制系列文章: Android View 的绘制流程之 Measure 过程详解 (一) Android View 绘制流程之 DecorView 与 ViewRootImpl 在上一篇  ...

  3. TortoiseGIT的安装过程详解

    TortoiseGIT简介 TortoiseGIT 是Git版本控制系统的一个免费开源客户端,它是git版本控制的 Windows 扩展.可以使你避免使用枯燥而且不方便的命令行.它完全嵌入 Windo ...

  4. Hadoop MapReduce执行过程详解（带hadoop例子）

    https://my.oschina.net/itblog/blog/275294 摘要: 本文通过一个例子,详细介绍Hadoop 的 MapReduce过程. 分析MapReduce执行过程 Map ...

  5. Linux启动过程详解（inittab、rc.sysinit、rcX.d、rc.local）

    启动第一步--加载BIOS 当你打开计算机电源,计算机会首先加载BIOS信息,BIOS信息是如此的重要,以至于计算机必须在最开始就找到它.这是因为BIOS中包含了CPU的相关信息.设备启动顺序信息.硬 ...

  6. Linux启动过程详解

    Linux启动过程详解 附上两张图,加深记忆 图1: 图2: 第一张图比较简洁明了,下面对第一张图的步骤进行详解: 加载BIOS 当你打开计算机电源,计算机会首先加载BIOS信息,BIOS信息是如此的 ...

  7. ping命令执行过程详解

    [TOC] ping命令执行过程详解 机器A ping 机器B 同一网段 ping通知系统建立一个固定格式的ICMP请求数据包 ICMP协议打包这个数据包和机器B的IP地址转交给IP协议层(一组后台运 ...

  8. Cordova 打包 Android release app 过程详解

    Cordova 打包 Android release app 过程详解 时间 -- :: SegmentFault 原文 https://segmentfault.com/a/119000000517 ...

  9. 理论经典：TCP协议的3次握手与4次挥手过程详解

    1.前言 尽管TCP和UDP都使用相同的网络层(IP),TCP却向应用层提供与UDP完全不同的服务.TCP提供一种面向连接的.可靠的字节流服务. 面向连接意味着两个使用TCP的应用(通常是一个客户和一 ...

随机推荐

  1. 网站定位之---根据IP获得区域

    记得以前做一个培训机构网站时候需要定位,那时候用的搜狐的api,不是很精准. demo:https://github.com/dunitian/LoTCodeBase/tree/master/NetC ...

  2. 【原】AFNetworking源码阅读（五）

    [原]AFNetworking源码阅读(五) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇中提及到了Multipart Request的构建方法- [AFHTTP ...

  3. scrapy 知乎用户信息爬虫

    zhihu_spider 此项目的功能是爬取知乎用户信息以及人际拓扑关系,爬虫框架使用scrapy,数据存储使用mongo,下载这些数据感觉也没什么用,就当为大家学习scrapy提供一个例子吧.代码地 ...

  4. 如何利用ansible callback插件对执行结果进行解析

    最近在写一个批量巡检工具,利用ansible将脚本推到各个机器上执行,然后将执行的结果以json格式返回来. 如下所示: # ansible node2 -m script -a /root/pyth ...

  5. hadoop2.7之Mapper/reducer源码分析

    一切从示例程序开始: 示例程序 Hadoop2.7 提供的示例程序WordCount.java package org.apache.hadoop.examples; import java.io.I ...

  6. 缓存、队列（Memcached、redis、RabbitMQ）

    本章内容: Memcached 简介.安装.使用 Python 操作 Memcached 天生支持集群 redis 简介.安装.使用.实例 Python 操作 Redis String.Hash.Li ...

  7. Python 正则表达式入门（中级篇）

    Python 正则表达式入门(中级篇) 初级篇链接:http://www.cnblogs.com/chuxiuhong/p/5885073.html 上一篇我们说在这一篇里,我们会介绍子表达式,向前向 ...

  8. 微信公众号开发（一）--验证服务器地址的Java实现

    现在主流上都用php写微信公众号后台,其实作为后端语言之一的java也可以实现. 这篇文章将对验证服务器地址这一步做出实现. 参考资料:1.慕课网-<初识java微信公众号开发>,2.微信 ...

  9. Postman - 功能强大的 API 接口请求调试和管理工具

    Postman 是一款功能强大的的 Chrome 应用,可以便捷的调试接口.前端开发人员在开发或者调试 Web 程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的 Fi ...

  10. cesium核心类Viewer简介

    1.简单描述Viewer Viewer类是cesium的核心类,是地图可视化展示的主窗口,cesium程序应用的切入口,扮演必不可少的核心角色. 官网的英文解析如下: A base widget fo ...