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. 手机app打开的web，在打开chrome浏览器

    手机app打开的web在,打开chrome浏览器 <a href='intent://#Intent;action=android.intent.action.VIEW;scheme=googl ...

  2. 【miscellaneous】监狱智能视频监控系统设计解决方案

    监狱智能视频监控系统设计解决方案 一.系统概况 随着司法监狱管理系统内视频监控系统的日益发展,现有的被动式人工监控这一传统模式已无法满足新形势下的监管工作需求,尤其是现在靠轮询的视频监控方式,无法对突 ...

  3. 【VS开发】DLL和ocx的区别

    ActiveX,OLE是基于COM的一种应用,其文件后缀一般以dll和ocx结尾:ocx作为一种特殊的dll文件,具有一定的用户界面和事件响应,而dll文件只是方法和属性的集合. 一.关于DLL的介绍 ...

  4. [JS] 文本框判断输入的内容是否为数字

    可以通过触发文本框的onchange事件来对输入的内容进行判断是否为数字 文本框的属性设置: 把onchange的属性对应的js函数写好即可 参数传输的是当前控件的value值,即text值 < ...

  5. 移除list里面的值

    public class IteratorTest { public static void main(String[] args) { List<String> list = new A ...

  6. laravel5.5部署

    一.环境: centos7 + apache2.6+mysql5.5+PHP7.2 确保php版本大于7.1,看帮助文档说是7就可以,但是我部署的时候提示要大于7.1,并且要装上必须的php扩展 PH ...

  7. python 压缩文件(解决压缩路径问题)

    #压缩文件 def Zip_files(): datapath = filepath # 证据路径 file_newname = datapath + '.zip' # 压缩文件的名字 log.deb ...

  8. HNUSTOJ-1621 Picking Cabbage(状态压缩DP)

    1621: Picking Cabbage 时间限制: 2 Sec  内存限制: 32 MB提交: 26  解决: 14[提交][状态][讨论版] 题目描述 Once, Doraemon and  N ...

  9. $NOI$ $2019$ 网络同步赛

    D2T1考试前测了自己造的“假”极限数据,看了看内存发现是118MB,感觉没问题就交上去了. 赛后用Lemon测了一下:MLE 88->0 对于别的题我已经不想再说什么了. update: 由于 ...

  10. $APIO~2019$ 游记

    我是鸽子. Upd:我全国倒数第一稳了. Uupd:时间过去好久了,这段时间发生很多事,比如NOIP没了... APIO时候的事也记得不是很清楚了,随便写点颓废资料吧: 如果想吃离酒店最近的一家火锅店 ...