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

  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. 减少打包组件vue.config.js——Webpack的externals的使用

    vue.config.js module.exports = { configureWebpack:{ externals: { vue: 'Vue', 'vue-router':'VueRouter ...

  2. 最快得到MYSQL两个表的差集

    Mysql里不外乎就是 子查询 和 连接 两种方式. 设第一个表为table1, 第二个为table2, table1包含table2. sql为: //子查询 select table1.id fr ...

  3. Java数据结构总述

    array list map set 链表..array 和list类似,增删慢,读取快,list长度可变,array长度固定, 链表增删快的list set 是一个没有重复数据的集合 map 是一个 ...

  4. JavaScript_day01

    1.变量声明 怎么声明变量? JavaScript中变量声明用的关键字是 var 变量名称. 变量名称命名有什么限制? 变量名称命名需规范,准则:不能以数字开头,不能含有特殊字符(css的属性),可以 ...

  5. 下拉框选择 <from:select>

  6. 2.Redis 入门介绍

    A)入门概述: 1.是什么: Redis:REmote  Dlctionary  Server(远程字典服务器) 是完全开源免费的,用C语言编写的,遵循BSD协议,是一个高性能的(key/value) ...

  7. Spring3.2.2中相关Jar包的作用

    今天在看Spring的源码的时候不知道从什么地方开启应该合适,因为不太清楚实现类所在的具体Jar包,就从网上找了些,可是网上有的说的是不清不楚,甚至是有些错误的,所以就把相关Jar包的大致作用给整理了 ...

  8. The openssl extension is missing, which means that secure HTTPS transfers are impossible

    执行命令:curl -sS https://getcomposer.org/installer | php报错如下Some settings on your machine make Composer ...

  9. 线段树lazy模板 luogu3372

    线段树写得很少,这么基本的算法还是要会的…… #include<bits/stdc++.h> using namespace std; inline long long read() { ...

  10. Rocketmq 集群部署

    10.1.0.178 配置文件 broker-a-m.properties brokerClusterName=PaymentClusterbrokerName=broker-anamesrvAddr ...