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

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

在最底层的三个组件分别是网络，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>

第一次打开页面时：

第二次打开页面时：

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

其次，第二个问题，当一个javascript文件被加载时是否会阻塞其他javascript文件或者其他文件的加载。《高性能Javascript》一书中对这个问题做了较好的解答：各种游览器的低版本的处理是当一个javascript文件在加载时，会同时阻塞页面其他文件的加载（包括其他javascript文件），但IE8，Firfox3.5，Safari 4和Chrome 2都允许并行下载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异步加载详解

赞 (0)

相关推荐

  • High Performance JavaScript(高性能JavaScript)读书笔记分析

    第一章:加载和执行 浏览器的JavaScript的引擎是编译器层的优化: 当浏览器执行JavaScript代码时,不能同时做其他任何事情(单一进程),意味着<script>标签每次出现都霸道地让页面等带脚本的解析和执行(每个文件必须等到前一个文件下载并执行完成才会开始下载),所以头部的JS和CSS用来渲染页面,交互行为(几乎所有)的JS放在<body>底部: 主流浏览器都允许并行下载JS. 减少外链脚本数量将会改善性能(合并JS) 任何网站都可以使用一个把制定文件合并处理后的URL

  • 高性能JavaScript DOM编程（1）

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 1.DOM访问与修改 访问DOM元素是

  • 高性能JavaScript 重排与重绘(2)

    高性能JavaScript 重排与重绘(2)

    先回顾下前一篇文章高性能JavaScript DOM编程,主要提了两点优化,一是尽量减少DOM的访问,而把运算放在ECMAScript这一端,二是尽量缓存局部变量,比如length等等,最后介绍了两个新的API querySelector()以及querySelectorAll(),在做组合选择的时候可以大胆使用.而本文主要讲的是DOM编程可能最耗时的地方,重排和重绘. 1.什么是重排和重绘 浏览器下载完页面中的所有组件--HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数

  • 高性能Javascript笔记 数据的存储与访问性能优化

    高性能Javascript笔记 数据的存储与访问性能优化

    局部变量也就可以理解为在函数内部定义的变量,很明显访问局部变量要比域外的变量要快,因为它位于作用域链的第一个变量对象中(关于作用域链的介绍可以阅读这篇文章).变量在作用域链的位置越深,访问所需要的时间就越长,全局变量总是最慢的,因为它们位于作用域链的最后一个变量对象. 每种数据类型的访问都需要付出点性能代价,对于直接量和局部变量基本都能消费得起,而访问数组项和对象成员则要代价高点.下图显示了不同浏览器,分别对这四种数据类型进行了200'000次操作所用的时间. 由上图可以看出,要想优化代码的性能

  • 高性能WEB开发 页面呈现、重绘、回流。

    高性能WEB开发 页面呈现、重绘、回流。

    页面呈现流程 在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类似的. 1. 浏览器把获取到的html代码解析成1个Dom树,html中的每个tag都是Dom树中的1个节点,根节点就是我们常用的document对象(<html> tag).dom树就是我们用firebug或者IE Developer Toolbar等工具看到的html结构,里面包

  • 高性能JavaScript模板引擎实现原理详解

    高性能JavaScript模板引擎实现原理详解

    随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来.javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,近一年来在开源社区中更是百花齐放,在 Twitter.淘宝网.新浪微博.腾讯QQ空间.腾讯微博等大型网站中均能看到它们的身影. 本文将用最简单的示例代码描述现有的 javascript 模板引擎

  • 编写高性能JavaScript(译)

    编写高性能JavaScript(译)

    译者按:本人第一次翻译外文,言语难免有些晦涩,但尽量表达了作者的原意,未经过多的润色,欢迎批评指正.另本文篇幅较长.信息量大,可能难以消化,欢迎留言探讨细节问题.本文主要关注V8的性能优化,部分内容并不适用于所有JS引擎.最后,转载请注明出处: ) ========================译文分割线=========================== 很多JavaScript引擎,如Google的V8引擎(被Chrome和Node所用),是专门为需要快速执行的大型JavaScript应

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

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

    1. 大多数游览器的组件构成如图      在最底层的三个组件分别是网络,UI后端和js解释器.作用如下: (1)网络- 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作 (2)UI 后端- 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口 (3)JS解释器- 用来解释执行JS代码 ps:上图和知识点主要来自<HOW BROWSERS WORK: BEHIND THE SCENES OF MODERN WEB BR

  • MySql中sql语句执行过程详细讲解

    目录 前言: sql语句的执行过程: 查询缓存: 分析器: 优化器: 执行器: 总结 前言: 很多人都在使用mysql数据库,但是很少有人能够说出来整个sql语句的执行过程是怎样的,如果不了解执行过程的话,就很难进行sql语句的优化处理,也很难设计出来优良的数据库表结构.这篇文章主要是讲解一下sql语句的执行过程. sql语句的执行过程: 客户端.连接器.分析器.优化器.执行器.存储引擎几个阶段. 连接器的作用:管理链接.权限验证的处理. 分析器的作用:词法分析.语法分析. 优化器的作用:执行计

  • Photoshop中临女子人像过程图文教程

    Photoshop中临女子人像过程图文教程

    先用单色来处理脸部效果...结合结构把明暗涂好...使用工具普通笔刷~把硬度调底一点... 勾画眼睛...我是比较喜欢她眼睛的~然后在新建图层先把眼睛画出来...这是一个不好的习惯... 接着把脸部结构更明确的涂一下...笔刷硬度稍微提高点...结合眼睛结构过度好... 把该暗的暗下去...调整笔刷大小与硬度...经常把图放小来观察脸部结构有没错... 慢慢涂上MM的"血色"...粉红粉红的脸旦..稍微带点绿的背影...有点黄的额头....注意收光背光面... 开始勾画嘴巴上唇...注

  • 深入理解javascript中的立即执行函数(function(){…})()

    javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( function(){-} )()和( function (){-} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此.要理解立即执行函数,需要先理解一些函数的基本概念.

  • 探讨JavaScript语句的执行过程

    废话不多说,直奔主题了.javascript的运行原理总结如下: 1.按照html文档流顺序执行javascript代码 浏览器是按照文档流从上到下逐步解析页面结构和信息的,javascript代码作为嵌入的脚本作为html文档的组成部分,所以javascript代码在加载时的执行顺序也是根据脚本标签<script>的出现顺序来确定的. 如果通过脚本标签<script>的src属性来引入外部.js文件,那么它也将按照其语句出现的顺序来执行,而且执行过程是文档加载的一部分.不会因为是

  • JavaScript 函数的执行过程

    1. 每一个JavaScript函数都是Function对象的一个实例, 它有一个仅供JavaScript引擎存取的内部属性[[Scope]]. 这个[[Scope]]存储着一个作用域的集合, 这个集合就叫"作用域链", 集合中存储着"可变对象"VO或"活动对象"AO(AO比VO多this和arguments属性). 2. 当函数被创建后, 其父级作用域的作用域链中的所有可变对象会被加入到它的[[scope]]中(如果父作用域是全局, 那么当前函

  • JavaScript预编译和执行过程详解

    JavaScript预编译和执行过程详解

    javascript相对于其它语言来说是一种弱类型的语言,在其它如java语言中,程序的执行需要有编译的阶段,而在javascript中也有类似的“预编译阶段”(javascript的预编译是以代码块为范围<script></script>,即每遇到一个代码块都会进行预编译>执行),了解javascript引擎的执行机理,将有助于在写js代码过程中的思路总结. 首先javascript是解释型语言,自然就是编译一行,执行一行. js运行过程分为三步:1.语法分析 2.预编译

  • 简单解析java方法在调用在内存中的执行过程

    简单解析java方法在调用在内存中的执行过程

    目录 一.前提 1.栈的内存原理图 2.JVM是怎么运行方法的??? 二.调用(执行)过程 1.方法调用时的规则 2.示例代码 3.整个程序的方法调用的过程图 4.示例代码运行截图 一.前提 1.栈的内存原理图 2.JVM是怎么运行方法的??? 1.在运行阶段的时候,classLoader类加载器会把class文件中方法对应的代码片段放入内存区中的方法区中,以便于下次调用方法时,还能使用该方法. 2.JVM在运行过程中,会把方法里面的代码块按照方法调用的先后顺序压栈入内存中的栈空间,按照方法里语

  • JavaScript 全面解析各种浏览器网页中的JS 执行顺序

    我们知道javaScript是一种解释型语言,他的执行是自上而下,但是各个浏览器对于至上而下的理解是有细微差别的,而代码的上下游也就是程序流又对于程序正确至关重要,所以我觉得有必要深入理解多个js块儿的执行顺序. 首先得知道有多少方法能把javaScript加入到页面中呢?常见下述的前2种,其实还有更多. 1.页面中直接引入外部js文件:<script src="my.js"></script> 2.页面中直接写如js片段<script>alert(

  • 深入理解Javascript中的自执行匿名函数

    格式: (function(){ //代码 })(); 解释:这是相当优雅的代码(如果你首次看见可能会一头雾水:)),包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数. 来个带参数的例子: (function(arg){ alert(arg+100); })(20); // 这个例子返回120. 回来看看jquery的插件编写 (function($) { // Code goes here })(jQuery

随机推荐