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

  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. class类 - extends

    继承是面向对象中一个比较核心的概念.ES6 class的继承与java的继承大同小异,如果学过java的小伙伴应该很容易理解,都是通过extends关键字继承.相较于ES5当中通过原型链继承要清晰和方 ...

  2. JS 断点调试心得

    1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了.操作起来似乎很简单,其实很多人纠结的是,是在哪里打断 ...

  3. string leetcode-6.ZigZag

    6. ZigZag Conversion 题面 The string "PAYPALISHIRING" is written in a zigzag pattern on a gi ...

  4. Java基础加强-泛型

    /*泛型*/ (泛型是给编译器看的) 泛型是提供给 /*javac编译器使用的*/,可以限定集合中的输入类型,让编译器挡住源程序中的非法输入,编译器编译带类型带类型说明的集合时,会去掉 "类 ...

  5. http上传txt文件

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

  6. Java之IO学习

    知其然也要知其所以然,最近对IO流莫名的感觉时候充充电了,所以上网拜读了大神的文章.在学习过程中我找到了一篇很系统很详细的文章贴出来. 声明一下这是转载的文章  原文:https://www.cnbl ...

  7. Flutter中的替换路由、返回到根路由

    替换路由 当我们有三个页面,页面1,页面2,页面3. 期望点击页面1按钮,跳转到页面2,页面2点击返回,跳转到页面1: 点击页面2按钮,跳转到页面3,页面3点击返回,跳转到页面1,而不是页面2. 这时 ...

  8. 学JAVA有哪些好的技巧方法？干货分享

    作为编程语言届的老大哥,学习JAVA的人数不胜数,在这里分享一些学习JAVA的技巧以及方法,当然,这些技巧及方法使用范围包含但不限于JAVA. ① 笔记软件 印象笔记:多端互通很方便(https:// ...

  9. python中常见的日期处理方法

    今天:today = datetime.date.today() 昨天:yesterday = today - datetime.timedelta(days=1) 上个月:last_month = ...

  10. PHP批量更新MYSQL中的数据

    原文链接:https://blog.csdn.net/wuming19900801/article/details/62893429 $sql = "update newhouse_clic ...