在讲这个问题之前,先来补充几个知识点,如果对此已经比较了解可以直接跳过
1. 大多数浏览器的组件构成如图
在最底层的三个组件分别是网络,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文件之后往往还对其缓存。
首先,我们用以下这个例子来说明下缓存问题
<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>标签的底部,已尽量减少对整个页面下载的影响。
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》
HOW BROWSERS WORK: BEHIND THE SCENES OF MODERN WEB BROWSERS
Google Chrome源码剖析【一】:多线程模型
javascript异步加载详解
分享到:
相关推荐
二阶段:JavaScript程序设计二阶段:JavaScript程序设计二阶段:JavaScript程序设计二阶段:JavaScript程序设计二阶段:JavaScript程序设计二阶段:JavaScript程序设计二阶段:JavaScript程序设计二阶段:JavaScript...
javascript编译以及执行过程详细讲解,包括预编译和执行
目前为止可以说是公认的最好的javascript教材,从入门到深入,十分经典。这本书网上可以说很少有中文版下载的。分两部分
单页Web应用:JavaScript从前端到后端 单页Web应用:JavaScript从前端到后端
暂停MyJS JavaScript 执行暂停
资源名称:JavaScript实战内容简介:本书是一部讲述 Javascript实战项目开发的精彩著作,由...这些项目的范围从通用的小工具(可执行的计算器)到当代 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
单页Web应用:JavaScript前端到后端的源码下载,提供了全部的源代码供javascript及前端爱好者们研究!
《程序天下:JavaScript实例自学手册》附书光盘
使用javascript来执行exe文件
JavaScript执行日志。 Earhorn会对您JavaScript进行检测,并向您显示详细的,可逆的,逐行JavaScript执行日志,类似于console.log的疯狂叔叔。 演示版 演示在。 一探究竟! 快速开始 步骤1 将Earhorn添加到您的...
TypeScript: JavaScript Development Guide by Nicholas Brown English | 7 Aug 2016 | ASIN: B01JZPDM1Y | 86 Pages | AZW3/MOBI/EPUB/PDF (conv) | 1.91 MB This book is an exploration of TypeScript, which is...
资源名称:Javascript完全学习手册内容简介:本书分4篇14章,介绍Javascript的知识,全书内容包括:Javascript语法基础、流程控制、函数、内置对象编程、文档对象模型DOM与事件驱动、处理XML、...
小丑 一个惊人的 JavaScript 执行内存可视化工具。
《零基础学javascript》光盘里面的资料,JavaScript编程100例 ,pdf文档,适合初级学者,适合刚开始学javascript的人士
20.15 执行客户端的可执行程序 20.16 自动调用OutLook发送邮件 20.17 弹出窗口选择颜色 20.18 弹出框式邮件发送 20.19 把网站作为用户的Active桌面 20.20 判断是否安装了flash插件 第21章 流行技术:DOM和userData的...
原名: JavaScript: The Definitive Guide: Activate Your Web Pages, 6th edition 作者: David Flanagan 版本: 英文文字版-pdf/EPUB + 完整书中源代码 出版社: O'Reilly 书号: 978-0596805524 发行时间: 2011年05月...
经典的JavaScript教程 《O'Reilly精品图书系列:JavaScript权威指南(第6版)》讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScriptAPI。《O'Reilly精品图书系列:JavaScript权威指南(第6版)》涵盖了...
目录 一、执行上下文是什么二、执行上下文栈是什么三、执行上下文栈的过程细节(一)创建阶段(二)执行阶段 一、执行上下文是什么 二、执行上下文栈是什么 三、执行上下文栈的过程细节 (一)创建阶段(二)...
通常情况下编译后的QML应用程序的可执行文件中包含了QML和JavaScript源码的明文形式,这样可能会泄露软件的QML和JavaScript源码。 在使用补天云QML源码保护工具之后,使得编译后的QML应用程序的可执行文件中在不包含...
它还支持动态执行代码、异步编程和事件驱动编程模型。 客户端脚本语言:JavaScript主要用于前端开发,通过嵌入到HTML页面中,实现与用户的交互和动态内容的生成。它可以操作DOM(文档对象模型),改变页面结构、...