JS学习笔记：（一）浏览器页面渲染机制
浏览器的内核主要分为渲染引擎和JS引擎。目前市面上常见的浏览器内核可以分为这四种：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。这里面大家最耳熟能详的可能就是 Webkit 内核了，Webkit 内核是当下浏览器世界真正的霸主。
页面加载过程
- 浏览器根据DNS域名服务器解析域名得到IP地址；
- 向这个IP地址发起HTTP请求；
- 服务器收到，处理，返回HTTP请求;
- 浏览器得到返回的内容。
浏览器渲染过程
主要分为三步：
1. 解析
- 一是解析HTML，生成DOM树；
- 二是解析CSS，生成CSS规则树；
- 三是运行JS脚本，等到JS文件下载完成后，通过DOM API 和CSS API 操作DOM Tree和CSS Rule Tree。
注意：
渲染过程中，如果遇到 <script>就停止渲染，执行 JS 代码。因为浏览器渲染和 JS 执行共用一个线程，而且这里必须是单线程操作，多线程会产生渲染 DOM 冲突。JavaScript的加载、解析与执行会阻塞DOM的构建，也就是说，在构建DOM时，HTML解析器若遇到了JavaScript，那么它会暂停构建DOM，将控制权移交给JavaScript引擎，JavaScript引擎运行完毕，浏览器再从中断的地方恢复DOM构建。
JS文件不只是阻塞DOM的构建，它会导致CSSOM也阻塞DOM的构建。因为不完整的CSSOM是无法使用的，如果JavaScript想访问CSSOM并更改它，那么在执行JavaScript时，必须要能拿到完整的CSSOM。
解决方案：这是为什么建议把<script>标签放到<body>的最后面的原因。如果不放在最后，也可使用defer或者async属性，异步加载js文件。二者的区别是：async会在下载完之后立即执行；而defer会等到DOM Tree解析完成之后再去执行。
2. 构造Rendering Tree(回流)
- Rendering Tree 渲染树并不等同于DOM树，渲染树只会包括需要显示的节点和这些节点的样式信息。
- CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element（也就是每个Frame）。
- 计算每个Frame 的位置，这又叫layout和reflow过程（回流）。
3. paint（绘制）
JS学习笔记：（一）浏览器页面渲染机制的更多相关文章
- Node.js学习笔记（三）: 事件机制
大部分的nodejs核心api都建立在异步的事件驱动架构之上,所以events是Node.js 最重要的模块,它提供了唯一的接口.events 模块不仅用于用户代码与 Node.js 下层事件循环的交 ...
- JS学习笔记：（二）回流和重绘
在搞清楚回流和重绘的概念之前,我们要清除浏览器的渲染过程. 解析生成DOM Tree(此时包含所有节点,包括display:none); 根据CSS Object Module(CCSSOM)计算节点 ...
- 转---JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制
作者:德来 segmentfault.com/a/1190000004292479 如有好文章投稿,请点击 → 这里了解详情 一.从一个面试题说起 面试前端的时候我喜欢问一些看上去是常识的问题.比如: ...
- 【转】Backbone.js学习笔记（二）细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
- JS学习笔记5_DOM
1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡
当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...
随机推荐
- [区块链] 加密算法——Hash算法（进阶）
为了为保证存储于区块链中的信息的安全与完整,区块链中使用了包含密码哈希函数和椭圆曲线公钥密码技术在内的大量的现代密码学技术,同时,这些密码学技术也被用于设计基于工作量证明的共识算法并识别用户. 在前边 ...
- Spring：（一）入门基础学习
前述 因为前几日刚刚学完Spring的基础,因此写一篇博客整理一下相关的基础知识. 什么是Spring? Spring 是一个轻量级的 DI / IoC 和 AOP 容器的开源框架,帮助分离项目组件之 ...
- 90后的青春，定格在被淡忘的QQ空间里
QQ空间,这个曾经陪我们从童年到少年再到成年,从2G时代再到如今的4G末,占据了我们太多的青春回忆,如今好友空间动态更新的不在像从前那样频繁.依稀记得当年的好友买卖,抢车位再或者情侣空间,现在想想那时 ...
- MyBatis-plus二级缓存使用
MyBatis二级缓存使用 注意点: 在最新的3.x版本,实现二级缓存的配置也有了一些改变. 官方建议在service使用缓存,但是你也可以直接在mapper层缓存,这里的二级缓存就是直接在Mappe ...
- 一个简单的HTML5 Web Worker 多线程与线程池应用
笔者最近对项目进行优化,顺带就改了些东西,先把请求方式优化了,使用到了web worker.发现目前还没有太多对web worker实际使用进行介绍使用的文章,大多是一些API类的讲解,除了涉及到一些 ...
- 【我们一起写框架】MVVM的WPF框架（三）—数据控件
这世上,没人能一次性写出完美无缺的框架:因为,任何一个框架都需要项目的淬炼,然后才能升华,趋近完美. 所以,框架是个反复修改的东西,最终形成的东西. 如果你学了一点技术,觉得自己可以写出框架了,觉得自 ...
- Vue + WebApi 小项目：构造自己的在线 Markdown 笔记本应用
Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用 目录 概要 知识点 完整示例图 代码与资源文件 流程步骤 概要 基于 MVP 最小可行性产品设计理念,我们先完成一个可以 ...
- Django学习之十一：真正理解Django的路由分发和反解url原理
目录 URL Dispatcher 简介 模式概念 对比URLPattern 与 URLResolver (多态的体现) 构建子路由几种方式 反解url算法逻辑 URL Dispatcher 简介 d ...
- （三） Keras Mnist分类程序以及改用交叉熵对比
视频学习来源 https://www.bilibili.com/video/av40787141?from=search&seid=17003307842787199553 笔记 Mnist分 ...
- Nginx-Linux下安装
Nginx一般用来做反向代理,实现负载均衡.由于Nginx是用c开发的,所以安装前我们需要安装相应的环境,比如gcc等.下面是本人安装操作的步骤: step1.安装gcc:yum install gc ...