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. 学习Go语言（二）快速入门

    作为一名学习过多种编程语言的“老码农”,学习一门新的语言不能像“新手”一样,要快速入门. 无论面向过程,还是面向对象的编程语言:静态语言,动态语言,一般都包括: 标识符.变量(常量).运算符.表达式. ...

  2. ubuntu16.04+Titan Xp安装显卡驱动+Cuda9.0+cudnn

    硬件环境 ubuntu 16.04LTS + windows10 双系统 NVIDIA TiTan XP 显卡(12G) 软件环境 搜狗输入法 显卡驱动:LINUX X64 (AMD64/EM64T) ...

  3. 【OpenCV开发】OpenCV：使用VideoCapture类进行视频读取和显示

    原文来自:http://blog.csdn.net/thefutureisour/article/details/7530344 -------------以下为原文---------------这次 ...

  4. 初步学习jquery学习笔记（三）

    jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...

  5. 洛谷 P2398 GCD SUM 题解

    题面 挺有意思的. 设f[i]表示gcd(i,j)=i的个数,g[i]表示k|gcd(i,j)的个数; g[i]=(n/i)*(n/i); g[i]=f[i]+f[2i]+f[3i]+...; 所以f ...

  6. 洛谷 P1073 最优贸易 题解

    题面 大家都是两遍SPFA吗?我这里就一遍dp啊: 首先判断对于一个点u,是否可以从一号点走到这里,并且可以从u走到n号点: 对于这样的点我们打上标记: 那么抛出水晶球的点一定是从打上标记的点中选出一 ...

  7. HDU-5155 Harry And Magic Box

    题目描述 在\(n*m\)的矩阵内每一行每一列都有钻石,问钻石分布的种类? 答案有可能很大,所以输出答案对\(1000000007\)取模. Input 对于每个测试用例,有两个整数\(n\)和\(m ...

  8. Python 入门之 内置模块 -- 序列化模块（json模块、pickle模块）

    Python 入门之 内置模块 -- 序列化模块(json模块.pickle模块) 1.序列化 Python中这种序列化模块有三种: ​ json模块 : ​ 不同语言都遵循的一种数据转化格式,即不同 ...

  9. bind函数作用、应用场景以及模拟实现

    bind函数 bind 函数挂在 Function 的原型上 Function.prototype.bind 创建的函数都可以直接调用 bind,使用: function func(){ consol ...

  10. github项目多人进行合作开发,填坑记录

    1.Fork别人的github项目. Fork项目成功后,再进行把项目克隆到你本地.(我的项目已经克隆到本地了,右边是克隆下来的所有文件,除了 node_modules) git命令: git clo ...