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

  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. Asp.Net Core Linux环境下 找不到配置文件、静态文件的问题

    直接发布会找不到配置文件,和静态文件.需要先cd到项目文件夹,然后在发布.

  2. putty和psftp命令行参数

    putty和psftp命令行参数 https://the.earth.li/~sgtatham/putty/latest/w32/putty.zip https://the.earth.li/~sgt ...

  3. 美化linux客户端zsh和oh-my-zsh

    linuxbashzshoh-my-zsh 一.安装zsh 二.安装oh-my-zsh 一.安装zsh 安装 zsh yum -y install zsh 替换默认shell chsh -s /bin ...

  4. DRF 01

    目录 DRF 接口 概念 YApi接口文档 Postman接口测试 RESTful接口规范 URL设计 响应结果 响应状态码 数据状态码 数据状态信息 数据本身 五大请求方式 简单实现 DRF drf ...

  5. 使用ctypes调用系统C API函数需要注意的问题，函数参数中有指针或结构体的情况下最好不要修改argtypes

    有人向我反应,在代码里同时用我的python模块uiautomation和其它另一个模块后,脚本运行时会报错,但单独使用任意一个模块时都是正常的,没有错误.issue链接 我用一个例子来演示下这个问题 ...

  6. Linux学习笔记：cut命令

    基础 功能:文件内容查看,显示行中指定部分,删除文件中指定字段.cut 命令用于显示每行从开头算起 a - b 的文字. 语法: cut [-bn] [file.txt] cut [-c] [file ...

  7. iOS常用宏定义大全

    宏定义与常量的区别 宏:只是在预处理器里进行文本替换,不做任何类型检查,宏能定义代码,const不能,多个宏编译时间相对较长,影响开发效率,调试过慢,const只会编译一次,缩短编译时间. 所以在使用 ...

  8. 利用jenkens+github实现简单的CI/CD

    一  获取github accessToken 依次点击 settings----> Developer settings --->Personal access tokens  到这里如 ...

  9. 好用的redis客户端和Mongo客户端推荐

    Another Redis resktop manager electron页面 github地址 MongoCompass 社区版 下载地址

  10. VM虚拟机？

    虚拟机(Virtual Machine)指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算机系统. 虚拟系统通过生成现有操作系统的全新虚拟镜像,它具有真实windows系统完全 ...