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. Altera DDR2 IP核学习总结3-----------DDR2 IP核的使用

    根据上一篇生成的IP核,例化之后如上图,Local开头的数据是用户侧数据,其他数据暂时不用纠结,不用管. 这些是需要关注的信号,但是初学阶段很难对这些信号形成具体的概念,这里参考明德扬的代码进行二次封 ...

  2. Node.js使用redis进行订阅发布管理

    redis NPM 官方介绍地址:https://www.npmjs.com/package/redis let redis = require('redis'); let subscriber; l ...

  3. 几张图让你看懂WebAssembly

    几张图让你看懂WebAssembly:https://www.jianshu.com/p/bff8aa23fe4d

  4. 在 IntelliJ IDEA 中使用 Git，太方便了！

    git是目前流行的分布式版本管理系统.它拥有两套版本库,本地库和远程库,在不进行合并和删除之类的操作时这两套版本库互不影响.也 因此其近乎所有的操作都是本地执行,所以在断网的情况下任然可以提交代码,切 ...

  5. Java第三周总结报告

    本周做了什么? 本周利用Java语言重新回顾了条件结构与循环结构和字符串的处理等问题,认识到了Java与C/C++的在这两个方面的不同. 下周准备做什么? 学习Java面向对象的有关知识,包括对象与类 ...

  6. PhpStorm配置Xdebug调试

    安装xdebug 去官网下载对应版本的xdebug扩展 XDEBUG EXTENSION FOR PHP | DOWNLOADS 如何选择正确版本 输出phpinfo()函数的内容 查看输出页面的网页 ...

  7. 剑指offer-把数组排成最小的数-数组-python

    题目描述 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 思路1:使用 ...

  8. luogu P4382 [九省联考2018]劈配

    luogu 我记得我第一次做这道题的时候屁都不会qwq 先考虑第一问,暴力是依次枚举每个人,然后从高到低枚举志愿,枚举导师,能选就选.但是可以发现前面的人选的导师可能会导致后面的人本来可以选到这个志愿 ...

  9. java中常见的异常种类

    Java常见的异常种类 ------------------------------------------------------------------------------- java Exc ...

  10. python3小demo

    总结常用的功能小实例,快速学习并掌握python技能 1.墨迹天气 import requests from lxml.html import etree import json import tim ...