BOM 浏览器对象模型_渲染引擎_JavaScript 引擎_网页加载流程
1. 浏览器核心的两个组成部分
渲染引擎
将网页代码渲染为用户视觉可以感知的平面文档
- 分类:
- Firefox Gecko 引擎
- Safari WebKit 引擎
- Chrome Blink 引擎
- IE Trident 引擎
- Edge EdgeHTML 引擎
- 渲染引擎处理网页,通常分成四个阶段
1. 解析代码:HTML 代码解析为 DOM,CSS 代码解析为 CSSOM(CSS Object Model)。
2. 对象合成:将 DOM 和 CSSOM 合成一棵渲染树(render tree)。
3. 布局:计算出渲染树的布局(layout)。
4. 绘制:将 渲染树 绘制到屏幕
往往第一步还没完成,第二步和第三步就已经开始了。
所以,会看到这种情况:网页的 HTML 代码还没下载完,但浏览器已经显示出内容了
- 渲染树转换为网页布局,称为“布局流”(flow)
- 布局显示到页面的这个过程,称为“绘制”(paint)
重流 和 重绘并不一定一起发生,
重流必然导致重绘,重绘不一定需要重流。
比如
- 改变元素颜色,只会导致重绘,而不会导致重流;
- 改变元素的布局,则会导致重绘和重流
- 作为开发者,应该尽量设法降低重绘的次数和成本
比如,重绘 table
布局 和 flex
布局,开销都会比较大
尽量不要变动高层的 DOM 元素
不要一项一项地改变样式,而是使用 CSS class 一次性改变样式
JavaScript 引擎
主要作用是,读取网页中的 JavaScript 代码,对其处理后运行
- 解释型语言,也就是说,它不需要编译,由解释器实时运行
缺点: 是每次运行都要调用解释器,系统开销较大,运行速度慢于编译型语言
早期解决:
进行一定程度的编译,生成类似字节码(bytecode)的中间代码,以提高运行速度
逐行解释将字节码转为机器码,还是很低效的
- 读取代码,进行词法分析(Lexical analysis),将代码分解成词元(token)。
- 对词元进行语法分析(parsing),将代码整理成“语法树”(syntax tree)。
- 使用“翻译器”(translator),将代码转为字节码(bytecode)。
- 使用“字节码解释器”(bytecode interpreter),将字节码转为机器码。
如今:
采用“即时编译”(Just In Time compiler,缩写 JIT)
即字节码只在运行时编译,用到哪一行就编译哪一行,并且把编译结果缓存(inline cache)。
通常,一个程序被经常用到的,只是其中一小部分代码,有了缓存的编译结果,整个程序的运行速度就会显著提升
- 字节码不能直接运行,而是运行在一个虚拟机(Virtual Machine)之上,一般也把虚拟机称为 JavaScript 引擎
- 并非所有的 JavaScript 虚拟机运行时都有字节码
有的 JavaScript 虚拟机基于源码,即只要有可能,就通过 JIT(just in time
编译器直接把源码编译成机器码运行,省略字节码步骤。
- 常见 JavaScript 虚拟机
- [Chakra](http://en.wikipedia.org/wiki/Chakra_(JScript_engine))(Microsoft Internet Explorer)
- Nitro/JavaScript Core (Safari)
- Carakan (Opera)
- SpiderMonkey (Firefox)
- [V8](http://en.wikipedia.org/wiki/V8_(JavaScript_engine)) (Chrome, Chromium)
2. 一般的网页加载流程
- 浏览器一边下载 HTML 网页,一边开始解析。也就是说,不等到下载完,就开始解析。
- 解析过程中,浏览器发现 <script> 元素,就暂停解析,把网页渲染的控制权转交给 JavaScript 引擎。
原因是 JavaScript 代码可以修改 DOM,所以必须把控制权让给它,否则会导致复杂的线程竞赛的问题。
如果外部脚本加载时间很长(一直无法完成下载),那么浏览器就会一直等待脚本下载完成,造成网页长时间失去响应,浏览器就会呈现“假死”状态,这被称为“阻塞效应”。
- 如果 <script> 元素引用了外部脚本,就下载该脚本再执行,否则就直接执行代码。
- JavaScript 引擎执行完毕,控制权交还渲染引擎,恢复往下解析 HTML 网页
此外,对于来自同一个域名的资源,比如脚本文件、样式表文件、图片文件等,浏览器一般有限制,同时最多下载6~20个资源,
即最多同时打开的 TCP 连接有限制,这是为了防止对服务器造成太大压力。
如果是来自不同域名的资源,就没有这个限制。所以,通常把 静态文件 放在 不同的域名之下,以加快下载速度
2. 解决“阻塞效应” ,而 defer、
async 关键字的 <script>,都不应该使用 document.write
<script src=
"a.js"
defer
>
</script>
<script src="b.js" defer></script>
defer 属性 的运行流程如下:
浏览器开始解析 HTML 网页。
解析过程中,发现带有 defer 属性的 <script> 元素。
浏览器继续往下解析 HTML 网页,同时并行下载 <script> 元素加载的外部脚本。
浏览器完成解析 HTML 网页,此时再回过头执行已经下载完成的脚本。
优点:
有了defer
属性,浏览器下载脚本文件的时候,不会阻塞页面渲染。
下载的脚本文件在 DOMContentLoaded
事件触发前执行(即刚刚读取完</html>
标签),
而且可以保证执行顺序就是它们在页面上出现的顺序。
<script src="a.js" async></script>
<script src="b.js" async></script>
使用另一个进程下载脚本,下载时不会阻塞渲染
浏览器开始解析 HTML 网页。
解析过程中,发现带有 async 属性的 script 标签。
浏览器继续往下解析 HTML 网页,同时并行下载 <script> 标签中的外部脚本。
脚本下载完成,浏览器暂停解析 HTML 网页,开始执行下载的脚本。
脚本执行完毕,浏览器恢复解析 HTML 网页。
一旦采用这个属性,就无法保证脚本的执行顺序。
哪个脚本先下载结束,就先执行那个脚本
BOM 浏览器对象模型_渲染引擎_JavaScript 引擎_网页加载流程的更多相关文章
- 第一百一十一节,JavaScript,BOM浏览器对象模型
JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...
- JavaScript——BOM(浏览器对象模型),时间间隔和暂停
BOM(浏览器对象模型):能够对浏览器的窗体进行訪问和操作 1.主要的BOM体系: window------------document-------------------------------- ...
- BOM 浏览器对象模型_window 对象的常见 window.属性_window.方法
1. 常用属性 window.devicePixelRatio 像素比 = css / 物理像素 window.scrollX,window.scrollY 滚动条 卷曲距离 if ...
- 通过chrome浏览器分析网页加载时间
今天趁着下班的时间看了下chrome浏览器的网页加载时间分析工具和相关文档,简单写点儿东西记录一下. 以百度首页加载为例,分析下一张图片1.jgp(就是背景图)的加载时间 看右侧的Timing标签,从 ...
- BOM 浏览器对象模型_同源限制
“同源政策”(same-origin policy) 浏览器安全的基石 协议相同 域名相同 端口相同 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这个政策 A 网页 ...
- BOM 浏览器对象模型_当前窗口的浏览历史 history 对象
当前窗口的浏览历史 window.history 对象 保存了当前窗口访问过的所有页面网址 由于安全原因,浏览器不允许脚本读取这些地址,但是允许在地址之间导航 history.back() 相当于 h ...
- BOM——浏览器对象模型(Browser Object Model)
什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...
- BOM浏览器对象模型
访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model). BOM整体对象图. 核心是window对象: 以下有特殊双重身份: window对象既是ECMAScr ...
- javascript之BOM浏览器对象模型引入
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 第十五节:HttpContext五大核心对象的使用(Request、Response、Application、Server、Session)
一. 基本认识 1. 简介:HttpContext用于保持单个用户.单个请求的数据,并且数据只在该请求期间保持: 也可以用于保持需要在不同的HttpModules和HttpHandlers之间传递的值 ...
- kde钱包 忘记密码
转自 https://forum.suse.org.cn/t/kwallet/4367/2 修改 ~/.config/kwalletrc文件的First Use=false 改成 true 应该可以重 ...
- C++ 在类里面使用多线程技术
参考链接: https://blog.csdn.net/jmh1996/article/details/72235232 说明: C++的每个成员函数都会有一定转化, 而static 则不会 ...
- JAVA进阶4
间歇性混吃等死,持续性踌躇满志系列-------------第4天 1.静态内部类求极值 class MaxMin{ public static class Result{ //表示最大值.最小值 p ...
- C++入门篇二
c++是c语言的增强版,但是和c语言之间有何区别呢? c和c++的区别: 1.全局变量检测增强int a;int a=10; 2.函数检测增强,参数类型增强,返回值检测增强,函数调用参数检测增强(参数 ...
- python学习之Numpy.genfromtxt
Python 并没有提供数组功能,虽然列表 (list) 可以完成基本的数组功能,但它并不是真正的数组,而且在数据量较大时,使用列表的速度就会慢的让人难受.Numpy 提供了真正的数组功能,以及对数据 ...
- Java面试题复习笔记(数据库)
1.数据库分类? 关系型数据库和非关系型. 常用关系型:Myspl.Oracle.SQLServer 非关系型:Redis.Hadoop.Memcache.Mogobd 2.关系数据库三范式? 范式就 ...
- pl/sql学习(4): 包package
本文简单介绍包, 目前来看我用的不多, 除了之前 为了实现 一个procedure 的输出参数是结果集的时候用到过 package. 概念: 包是一组相关过程.函数.变量.常量和游标等PL/SQL程序 ...
- lnoi2019游记
好诡异的省选...... day0: 莫名其妙的订了下午从sy到dl的火车,得五点多才能到,所以.......是不需要试机的吗...... 好吧... 看着停课的jflr们,感觉他们好强啊,像我这种酱 ...
- docker部署项目 <三>
使用docker运行一个控制台项目,新建一个控制台测试项目 一.安装mono,直接在网易镜像中心找下载路径 docker pull hub.c..com/library/mono:latest 二.安 ...