javascript的执行

àì夳堔傛蜴生んèń 2022-08-27 04:58 168阅读 0赞

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

![201205201910082.png][]

在最底层的三个组件分别是网络，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文件之后往往还对其缓存。   
首先，我们用以下这个例子来说明下缓存问题

复制代码代码如下:

第一次打开页面时：

![在新窗口打开图片][201205201910083.jpg]

第二次打开页面时：

![在新窗口打开图片][201205201910084.jpg]

从上例中可以明显看出，像chrome之类的高版本游览器会对js文件进行缓存，作用是不言而喻，减少网络请求。  
  
其次，第二个问题，当一个javascript文件被加载时是否会阻塞其他javascript文件或者其他文件的加载。《高性能Javascript》一书中对这个问题做了较好的解答：各种游览器的低版本的处理是当一个javascript文件在加载时，会同时阻塞页面其他文件的加载（包括其他javascript文件），但IE8，Firfox3.5，Safari 4和Chrome 2都允许并行下载javascript文件，但遗憾的是，javascript下载过程仍然会组舍其他资源的下载，比如图片。尽管javascript脚本的下载过程不会相互影响，但页面仍然必须等待所有的javascript代码下载并执行完成才能继续。   
  
这里说句题外话：游览器对同一域名下的并发链接数也是有限制的，其他一些参数如下：  
![201205201910085.jpg][]  
**二、技巧 **  
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》][Javascript]  
[HOW BROWSERS WORK: BEHIND THE SCENES OF MODERN WEB BROWSERS][HOW BROWSERS WORK_ BEHIND THE SCENES OF MODERN WEB BROWSERS]  
[Google Chrome源码剖析【一】：多线程模型][Google Chrome]  
[javascript异步加载详解][javascript]

[201205201910082.png]: /images/20220824/c06b4c962687477d9b7b3e083b331abe.png
[201205201910083.jpg]: /images/20220824/f654408099bf4179a0b7dba6a86ad2c6.png
[201205201910084.jpg]: /images/20220824/ad7a4d0fa1cb49fcad408db7c568ad56.png
[201205201910085.jpg]: /images/20220824/27dad65046014aceaa7644c27eaf4f58.png
[Javascript]: http://www.jb51.net/books/36680.html
[HOW BROWSERS WORK_ BEHIND THE SCENES OF MODERN WEB BROWSERS]: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
[Google Chrome]: http://www.ha97.com/2908.html
[javascript]: http://www.jb51.net/article/30324.htm