游览器中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 相关文章推荐
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
domReady的实现案例
Nov 23 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
JavaScript 中的六种循环方法
Jan 06 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
Vue计算属性的学习笔记
2017/03/22 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
python获取文件扩展名的方法
2015/07/06 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
django使用LDAP验证的方法示例
2018/12/10 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
Python3 集合set入门基础
2020/02/10 Python
python代码中怎么换行
2020/06/17 Python
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
如何实现一个自定义类的序列化
2012/05/22 面试题
洗煤厂厂长岗位职责
2014/01/03 职场文书
党务公开方案
2014/05/06 职场文书
励志演讲稿大全
2014/08/21 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
SQL语句多表联合查询的方法示例
2022/04/18 MySQL