在讲这个问题之前，先来补充几个知识点，如果对此已经比较了解可以直接跳过

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

在最底层的三个组件分别是网络，UI后端和js解释器。作用如下：

（1）网络－ 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作

（2）UI 后端－ 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口

（3）JS解释器－ 用来解释执行JS代码ps：上图和知识点主要来自《HOW BROWSERS WORK: BEHIND THE SCENES OF MODERN WEB BROWSERS》
想深入了解的同学可以重点看下。

  1. 大多数游览器（比如chrome）让一个单线程共用于执行javascrip和更新用户界面。这个线程通常被称为“游览器UI线程”， 每个时刻只能执行其中一种操作，这意味着当Javascript代码正在执行时用户界面无法响应输入，反之亦然。这样做是因为javascript代码的作用就是操作DOM更新用户界面，用同一个线程来做负责这两件事情可以更高效

  2. 游览器UI线程的工作基于一个简单的队列系统，任务会被保存到队列中直到进程空闲。一旦空闲，队列中的下一个任务就被重新提取出来并运行。这些任务要么是运行javascript代码，要么执行UI更新，包括重绘和重排。

  3. 重点再强调下，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>标签的底部，已尽量减少对整个页面下载的影响。

  1. 将能合并的js文件合并

  2. 无阻塞脚本

现在比较常用的方法就是动态加载执行脚本。你的原理是通过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);

}
  1. 神奇的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的执行过程的更多相关文章

  1. 浅谈javascript函数执行过程

    javascript函数执行过程: 1. 为函数创建一个执行环境 2. 复制函数的 [[scopes]] 属性中的对象构建起执行环境的作用链域 3. 创建函数活动对象并推入执行环境作用链域的前端 4. ...

  2. JavaScript的执行过程（深入执行上下文、GO、AO、VO和VE等概念）

    JavaScript的执行过程 前言 编写一段JavaScript代码,它是如何执行的呢?简单来说,JS引擎在执行JavaScript代码的过程中需要先解析再执行.那么在解析阶段JS引擎又会进行哪些操 ...

  3. 转：Oracle中SQL语句执行过程中

    Oracle中SQL语句执行过程中,Oracle内部解析原理如下: 1.当一用户第一次提交一个SQL表达式时,Oracle会将这SQL进行Hard parse,这过程有点像程序编译,检查语法.表名.字 ...

  4. Javascript的执行过程详细研究

    下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥是因为它属于底层行为,那么JavaScript代码执行顺序就比较形象了,因为我 ...

  5. struts2学习(5)拦截器简介以及例子执行过程

    一.拦截器简介: 二.Struts2预定义拦截器&拦截器栈 在执行action之前和之后,拦截器进行了操作: 比如struts-default.xml中就有很多预定义的拦截器:   拦截器栈: ...

  6. 详细解密FineReport中的报表执行过程

    在报表开发工具FineReport中,报表的执行过程大体可分为两步:1.报表计算:2.页面转换. 报表计算过程:先读取我们的sql语句,将完整的sql语句传至数据库服务器,由数据库返回数据给报表服务器 ...

  7. （转）logback 打印Mybitis中的sql执行过程

    场景:在程序开发过程中经常需要跟踪程序中sql语句的执行过程,在控制台打印出sql语句和对应的参数传递就能够更快的定位错误! 原文出处:http://www.cnblogs.com/beiyeren/ ...

  8. javascript的执行过程, 语法错误和运行时错误?

    js的执行错误分为 语法syntaxError,和 runtime error, 首先, js引擎会检查 整个脚本的语法, 如果在检查语法的过程中,发现了错误, 比如括哈不配对, 字符串少了 另一半的 ...

  9. 浅谈 JavaScript new 执行过程及function原理

    前言 最近在学习JavaScript语言精粹,感觉写得相当不错.所以这里也算是总结一下.一个方法使用new的方式创建到底是怎样的过程,一个function的声明内部又是怎样执行的呢 另外学的过程中,不 ...

随机推荐

  1. Java02_数据类型

    Java平台: Java API JVM 特点:可跨平台 Java运行机制: 编译(javac.exe) 运行(java.exe) JAVA文件 ---------->class文件(可跨平台的 ...

  2. 五、HashMap的使用 及其源码解析

    HashMap的底层实现原理?领接表(数组+链表)hash表数组+链表+红黑树 链表:查找慢 插入 删除快红黑树:查找快 插入 删除慢 HashMap是线程安全的吗?不是线程安全的 在什么情况下 ,是 ...

  3. stm32 输入捕获

    根据定时器的计数频率,我们就可以算出t1-t2的时间,从而得到高电平脉宽 计算公式 N * ARR + CCRx2 首先设置定时器通道为上升沿捕获,这样在t1时刻,就会捕获到当前的CNT值,然后立即清 ...

  4. Templates/Code Combinations

    Queries: Templates/Code Combinations   sql>select * from gl_dynamic_summ_combinations where CODE_ ...

  5. http上传txt文件

    http通过post方式上传txt文件 可以参考 https://www.cnblogs.com/s0611163/p/4071210.html /// <summary> /// Htt ...

  6. httpd源码编译安装

    什么是编译安装——编译:将源代码变为机器可执行的代码文件.安装:将可执行文件安装到操作系统里,才可以使用. 一.下载httpd源码包 在官网上下载httpd源码包http://httpd.apache ...

  7. Octave(1)

    size(A)返回矩阵A的大小: >> A=[ ; ; ]; >> size(A) %返回矩阵A 的大小 ans = >> size(A,) %返回A的第一维度大小 ...

  8. mongodb索引 过期索引

    过期索引,指的是一段时间后会过期的索引,在索引过期后,相应的数据会被删除,这适合存储一些在一段时间之后会失效的数据,比如用户的登录信息,想要用户登录信息2天后失效,需要用户重新登录,或者存储的日志,希 ...

  9. D. Lakes in Berland (DFS或者BFS +连通块

    https://blog.csdn.net/guhaiteng/article/details/52730373 参考题解 http://codeforces.com/contest/723/prob ...

  10. 2018-2019 XIX Open Cup, Grand Prix of Korea B - Dev, Please Add This!

    B - Dev, Please Add This! 思路: 对于每一个经过 '*' 的横线和竖线看成一个整体,设他们分别为分量x和分量y 用2-sat考虑这个问题, 如果要经过 '*' ,那么x和y至 ...