浏览器的内核主要分为渲染引擎和JS引擎。目前市面上常见的浏览器内核可以分为这四种:Trident(IE)、Gecko(火狐)、Blink(Chrome、Opera)、Webkit(Safari)。这里面大家最耳熟能详的可能就是 Webkit 内核了,Webkit 内核是当下浏览器世界真正的霸主。

页面加载过程

  1. 浏览器根据DNS域名服务器解析域名得到IP地址;
  2. 向这个IP地址发起HTTP请求;
  3. 服务器收到,处理,返回HTTP请求;
  4. 浏览器得到返回的内容。

    浏览器渲染过程

    主要分为三步:

    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学习笔记:(一)浏览器页面渲染机制的更多相关文章

  1. Node.js学习笔记(三): 事件机制

    大部分的nodejs核心api都建立在异步的事件驱动架构之上,所以events是Node.js 最重要的模块,它提供了唯一的接口.events 模块不仅用于用户代码与 Node.js 下层事件循环的交 ...

  2. JS学习笔记:(二)回流和重绘

    在搞清楚回流和重绘的概念之前,我们要清除浏览器的渲染过程. 解析生成DOM Tree(此时包含所有节点,包括display:none); 根据CSS Object Module(CCSSOM)计算节点 ...

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

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

  4. 【转】Backbone.js学习笔记(二)细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

  5. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

  6. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  7. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  8. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  9. [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

    当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...

随机推荐

  1. ABP框架连接Mysql数据库

    开始想用Abp框架来搭建公司的新项目,虽然一切还没有定数,但是兵马未动,粮草先行,我先尝试一下整个过程,才能够更好的去争取机会. 此次技术选型:Abp(Asp.Net core mvc)+mysql( ...

  2. [翻译] EF Core 概述

    Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...

  3. Eureka服务下线后快速感知配置

    现在由于eureka服务越来越多,发现服务提供者在停掉很久之后,服务调用者很长时间并没有感知到变化,依旧还在持续调用下线的服务,导致长时间后才能返回错误,因此需要调整eureka服务和客户端的配置,以 ...

  4. 解读 kubernetes client-go 官方 examples - Part Ⅰ

    目录 1. 介绍 2. 运行测试 2.1 测试环境 2.2 运行结果 3. 原理解析 3.1 获取 kubeconfig 信息,并构造 rest#Config 实例 3.1.1 tools/clien ...

  5. 30分钟ES6从陌生到熟悉

    前言 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复杂的 ...

  6. [转]Blue Prism Architecture

    本文转自:https://mindmajix.com/blue-prism-architecture Introduction Automation technology is widely bloo ...

  7. Windows Server 2008 中iis反向代理设置

    1.安装 IIS(Windows专业版自带,如果是server版系统,需要通过功能管理器安装(无需下载)) urlrewrite插件,https://www.iis.net/downloads/mic ...

  8. JavaSE面试题收集【仅有题目,答案自备】

    一共有140个题目,可以参考下.一个“.java”源文件中是否可以包含多个类(不是内部类)?有什么限制?说说&和&&的区别在Java中如何跳出当前的多重嵌套循环?IO流的分类S ...

  9. Java基础差,需要怎么补

    本文首发于本博客 猫叔的博客,转载请申明出处 感谢sugar的提问:Java基础差,需要怎么补? 欢迎关注公众号:Java猫说 我整体的总结了一下,大致分为以下的几个点说一下: 1.善于使用搜索引擎 ...

  10. 007. 服务间通信 RPC & REST over HTTP(s) & 消息队列

    服务间通信 服务间通信的几种方式: RPC.REST over HTTP(s).消息队列.  https://www.jianshu.com/p/2a01d4383d0b RPC https://bl ...