1、HTML的加载

　　HTML是一个网页的基础，下载完成后解析

2、其他静态资源加载

　　解析HTML时，发现其中有其他外部资源链接比如CSS、JS、图片等，会立即启用别的线程下载。

　　但当外部资源是JS时，HTML的解析会停下来，等JS下载完执行结束后才继续解析HTML，防止JS修改已经完成的解析结果

3、DOM树构建

　　在HTML解析的同时，解析器会把解析完成的结果转换成DOM对象，再进一步构建DOM树

4、CSSOM树构建

　　CSS下载完之后对CSS进行解析，解析成CSS对象，然后把CSS对象组装起来，构建CSSOM树

5、渲染树构建

　　当DOM树和CSSOM树都构建完之后，浏览器根据这两个树构建一棵渲染树

6、布局计算

　　渲染树构建完成以后，浏览器计算所有元素大小和绝对位置

7、渲染

　　布局计算完成后，浏览器在页面渲染元素。经过渲染引擎处理后，整个页面就显示出来

页面渲染机制（一、DOM和CSSOM树的构建）的更多相关文章

  1. JS学习笔记：（一）浏览器页面渲染机制

    浏览器的内核主要分为渲染引擎和JS引擎.目前市面上常见的浏览器内核可以分为这四种:Trident(IE).Gecko(火狐).Blink(Chrome.Opera).Webkit(Safari).这里 ...

  2. 前端性能----页面渲染（DOM）

    CSS会阻塞渲染树的构建,不阻塞DOM构建,但是在CSSOM构建完成之前,页面不会开始渲染(一片空白),CSSOM构建完成后,页面将会显示出内容. DOM(Document Object Model) ...

  3. 160826、浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘

    一.浏览器渲染页过程描述   1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...

  4. 浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘。

    一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DOM树 ...

  5. Javascript：再论Javascript的单线程机制 之 DOM渲染时机

    Javascript:再论Javascript的单线程机制 之 DOM渲染时机 背景 Javascript是单线程事件驱动的,所有能看到的Javascript代码都是在一个线程执行,定时器回调和AJA ...

  6. [转]浏览器渲染机制——一定要放在body底部的js引用

    转自:http://blog.csdn.net/u012251421/article/details/50536265 说明: 本文提到的浏览器均是指Chrome. “script标签“指的都是普通的 ...

  7. 转---JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制

    作者:德来 segmentfault.com/a/1190000004292479 如有好文章投稿,请点击 → 这里了解详情 一.从一个面试题说起 面试前端的时候我喜欢问一些看上去是常识的问题.比如: ...

  8. webkit 渲染机制

    最近看了< webkit技术内幕 >,虽然并不能完全看懂,但是对浏览器的渲染机制也算是有了一个比较完整的认识. 我们从浏览器地址栏输入网址开始到web页面被完整的呈现在眼前,大概的经过了这 ...

  9. 多进程浏览器、多线程页面渲染与js的单线程

    线程与进程 说到单线程,就得从操作系统进程开始说起.在早期的操作系统中并没有线程的概念,进程是能拥有资源和独立运行的最小单位,也是程序执行的最小单位.任务调度采用的是时间片轮转的抢占式调度方式,而进程 ...

随机推荐

  1. 【FICO系列】SAP 参数（条件表）灵活配置GS01/GS02/GS03

      公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FICO系列]SAP 参数(条件表)灵活配 ...

  2. LeetCode.961-2N数组中N次重复的元素(N-Repeated Element in Size 2N Array)

    这是悦乐书的第365次更新,第393篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第227题(顺位题号是961).在大小为2N的数组A中,存在N+1个唯一元素,并且这些元 ...

  3. java中string , StringBuffer , StringBuilder 区别

    1.String String变量的值不能改变,如果要改变String变量的值,虚拟机首先会遍历方法区中的字符串常量,如果存在需要的值,则虚拟机直接把此常量值的地址分配给String变量,如果不存在这 ...

  4. es5实现数组去重

    var a = [1, 2, 4, 4, 3, 3, 1, 5, 3] console.log(a.filter((item, index, arr) => { return arr.index ...

  5. ansible-playbook 案例

    nginx的安装 编写nginx的自动部署文件nginx.yml      hosts主机更改为自己定义的 访问目标主机组的IP地址,查看测试页面 测试页面:显示的是本机ip 1 <h1> ...

  6. Linux单元测试题一

    一. 试验操作题目: 开启Linux操作系统,要求以root用户登录,然后完成下面的操作: 1.查看目前哪些用户登陆到系统上 [root@baidu home]# w 12:41:44 up 45 m ...

  7. 创建B树，动态添加节点，并使用三种遍历算法对树进行遍历

    ks17:algorithm apple$ cat btree_test.c ///********************************************************** ...

  8. 洛谷 P2384 最短路 题解

    题面 这道题需要用到一个神奇的知识点:log(n*m)=log(n)+log(m): 所以对所有边权取个log,然后算log的最短路的同时维护乘积即可 #include <bits/stdc++ ...

  9. reload() 方法用于重新加载当前文档。配合Ajax异步请求。

    1. reload() 方法, reload() 方法用于重新加载当前文档.配合Ajax异步请求. http://www.w3school.com.cn/jsref/met_loc_reload.as ...

  10. 项目常用的几个mysql函数

    1.find_in_set函数 find_in_set(str,strlist); str是一个字符串 strlist是字符串列表--一个有多个子链被“,”分开的字符串 有多种情况: a.str为nu ...