游览器中javascript的执行过程(图文)


Posted in Javascript onMay 20, 2012

1. 大多数游览器的组件构成如图     

游览器中javascript的执行过程(图文)

在最底层的三个组件分别是网络,UI后端和js解释器。作用如下:
(1)网络- 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作
(2)UI 后端- 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口
(3)JS解释器- 用来解释执行JS代码

ps:上图和知识点主要来自《HOW BROWSERS WORK: BEHIND THE SCENES OF MODERN WEB BROWSERS》 想深入了解的同学可以重点看下。
2. 大多数游览器(比如chrome)让一个单线程共用于执行javascrip和更新用户界面。这个线程通常被称为“游览器UI线程”, 每个时刻只能执行其中一种操作,这意味着当Javascript代码正在执行时用户界面无法响应输入,反之亦然。这样做是因为javascript代码的作用就是操作DOM更新用户界面,用同一个线程来做负责这两件事情可以更高效
3. 游览器UI线程的工作基于一个简单的队列系统,任务会被保存到队列中直到进程空闲。一旦空闲,队列中的下一个任务就被重新提取出来并运行。这些任务要么是运行javascript代码,要么执行UI更新,包括重绘和重排。
4. 重点再强调下,javascript是单线程运行,千万别被setTimeout()和setInterVal()这种函数迷惑而误以为它是多线程。
ok,基础点讲解完毕,让我们进入正题,来讲解在游览器中javascript的执行过程。
一、原理
一般而言,<script>标签每次出现都会霸道地让页面等待脚本的解析和执行,无论当前的Javascript是内嵌的还是包含了外链文件,页面的下载和渲染都必须停下来等待脚本执行完成。这在页面的生存周期中是必要的,因为脚本执行过程中可能修改页面内容,一个典型的例子就是在页面中使用document.write()。
当javascript代码是内嵌在html里面时,这点还是比较容易理解,但当javascript是外链文件时稍微有点负载,因为存在一个加载过程,而且游览器加载好这个js文件之后往往还对其缓存。
首先,我们用以下这个例子来说明下缓存问题

<html> 
<head> 
<script type='text/javascript' src='js/f2.js'></script> 
</head> 
<body> 
</body> 
</html>

第一次打开页面时:

游览器中javascript的执行过程(图文)

    第二次打开页面时:

游览器中javascript的执行过程(图文)

    从上例中可以明显看出,像chrome之类的高版本游览器会对js文件进行缓存,作用是不言而喻,减少网络请求。

其次,第二个问题,当一个javascript文件被加载时是否会阻塞其他javascript文件或者其他文件的加载。《高性能Javascript》一书中对这个问题做了较好的解答:各种游览器的低版本的处理是当一个javascript文件在加载时,会同时阻塞页面其他文件的加载(包括其他javascript文件),但IE8,Firfox3.5,Safari 4和Chrome 2都允许并行下载javascript文件,但遗憾的是,javascript下载过程仍然会组舍其他资源的下载,比如图片。尽管javascript脚本的下载过程不会相互影响,但页面仍然必须等待所有的javascript代码下载并执行完成才能继续。

这里说句题外话:游览器对同一域名下的并发链接数也是有限制的,其他一些参数如下:
游览器中javascript的执行过程(图文)
二、技巧
1. 脚本位置
由于脚本会阻塞页面其他资源的下载,因此推荐将所有的<script>标签放到<body>标签的底部,已尽量减少对整个页面下载的影响。
2. 将能合并的js文件合并
3. 无阻塞脚本
现在比较常用的方法就是动态加载执行脚本。你的原理是通过DOM,你几乎可以用Javascript动态创建HTML中的所有内容,其根本在于,<script>标签与页面中其他元素并无差异:都能通过DOM引用,都能在文档中移动,删除和创建。文件在改该<script>元素被添加到页面时开始现在,它不会阻止其他文件下载,只在执行阶段阻塞渲染。特别强调:《高性能javascript》一文中说“这种技术的重点在于:无论何时启动下载,文件的下载和执行都不会阻塞页面其他进程”,这并不是说它在执行不会阻塞其他javascript代码,而是要强调不会阻塞其他资源的下载等其他任务。
具体的代码如下:

function loadScript(url){ 
var ga = document.createElement('script'); 
ga.type = 'text/javascript'; 
ga.async = true; 
ga.src = url; 
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga); 
}

4. 神奇的setTimeout()
这里我不过多的将setTimeout()的原理,有兴趣的读者可以具体去看《高性能javascript》的第六章。我重点强调下,setTimeout的第二个参数并不是一个精确的时间,二是必须在javascript线程空闲时才能运行。利用这个特性,如下代码简单可以实现等待其他js代码执行完毕后再执行function里面的代码。
setTimeout(function(){ 
// do some before other javascripe codes had processed 
}, 25)

但在function里面不要使用document.write()方法,因为执行setTimeout里面函数时往往已经到了页面onload之后,此时再执行 document.write 将导致当前页面的内容被清空,因为它会自动触发 document.open 方法。
《高性能Javascript》
HOW BROWSERS WORK: BEHIND THE SCENES OF MODERN WEB BROWSERS
Google Chrome源码剖析【一】:多线程模型
javascript异步加载详解
Javascript 相关文章推荐
offsetParent 算法分析
Apr 05 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
分类解析jQuery选择器
Nov 23 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 #Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 #Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 #Javascript
JQuery选择器特辑 详细小结
May 14 #Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 #Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 #Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 #Javascript
You might like
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Python全栈之列表数据类型详解
2019/10/01 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
九年级科学教学反思
2014/01/29 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
机关工会工作总结2015
2015/05/26 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript