高性能JavaScript之加载和运行

JavaScript 在浏览器中的性能,可认为是开发者所要面对的最重要的可用性问题。此问题因JavaScript的阻塞特征而复杂,也就是说,当JavaScript 运行时其他的事情不能被浏览器处理。事实上,大多数浏览器使用单进程处理UI 更新和JavaScript 运行等多个任务,而同一时间只能有一个任务被执行。JavaScript运行了多长时间,那么在浏览器空闲下来响应用户输入之前的等待时间就有多长。

从基本层面说,这意味着<script>标签的出现使整个页面因脚本解析、运行而出现等待。不论实际的JavaScript 代码是内联的还是包含在一个不相干的外部文件中,页面下载和解析过程必须停下,等待脚本完成这些处理,然后才能继续。这是页面生命周期必不可少的部分,因为脚本可能在运行过程中修改页面内容。典型的例子是document.write()函数,例如:

<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>
    <script type="text/javascript">
        document.write("The date is " + (new Date()).toDateString());
    </script>
</p>
</body>
</html>

当浏览器遇到一个<script>标签时,正如上面HTML 页面中那样,无法预知JavaScript 是否在<p>标签中添加内容。因此,浏览器停下来,运行此JavaScript 代码,然后再继续解析、翻译页面。同样的事情发生在使用src 属性加载JavaScript 的过程中。浏览器必须首先下载外部文件的代码,这要占用一些时间,然后解析并运行此代码。此过程中,页面解析和用户交互是被完全阻塞的。

一个<script>标签可以放在HTML 文档的<head>或<body>标签中,可以在其中多次

出现。传统上,<script>标签用于加载外部JavaScript 文件。<head>部分除此类代码外,还包含<link>标签用于加载外部CSS 文件和其他页面中间件。也就是说,最好把风格和行为所依赖的部分放在一起,首先加载他们,使得页面可以得到正确的外观和行为

因为脚本阻塞其他页面资源的下载过程,所以推荐的办法是:将所有<script>标签放在尽可能接近<body>

标签底部的位置,尽量减少对整个页面下载的影响。例如:

<html>
<head>
<title>Script Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>Hello world!</p>
    <script type="text/javascript" src="file1.js"></script>
    <script type="text/javascript" src="file2.js"></script>
    <script type="text/javascript" src="file3.js"></script>
</body>
</html>

由于每个<script>标签下载时阻塞页面解析过程,所以限制页面的<script>总数也可以改善性能。这个规则对内联脚本和外部脚本同样适用。每当页面解析碰到一个<script>标签时,紧接着有一段时间用于代码执行。最小化这些延迟时间可以改善页面的整体性能。

这个问题与外部JavaScript 文件处理过程略有不同。每个HTTP 请求都会产生额外的性能负担,下载一个100KB 的文件比下载四个25KB 的文件要快。总之,减少引用外部脚本文件的数量。典型的,一个大型网站或网页应用需要多次请求JavaScript 文件。你可以将这些文件整合成一个文件,只需要一个<script>标签引用,就可以减少性能损失。

时间: 2024-08-10 00:06:26

高性能JavaScript之加载和运行的相关文章

(转)高性能JavaScript:加载和运行(动态加载JS代码)

浏览器是如何加载JS的 当浏览器遇到一个<script>标签时,浏览器首先根据标签src属性下载JavaScript代码,然后运行JavaScript代码,继而继续解析和翻译页面.如果需要加载的js文件很多很大,则会让人感觉页面加载很慢,影响页面的交互.浏览器在遇到<body>之前,不会渲染页面的任何部分,如果此时<head>中需要加载的js文件很大的话,可能用户开始看到的页面就是一个“白板”,这种情况会立马让用户崩溃. Internet Explorer 8, Fir

高性能javascript 文件加载阻塞

高性能javascript javascript脚本执行过程中会中断页面加载,直到脚本执行完毕,此操作阻塞了页面加载,造成性能问题. 脚本位置和加载顺序:如果将脚本放在head内,那么再脚本执行完毕之前,显示给用户的始终是一片空白,用户只能傻傻的看着屏幕等待脚本执行完毕.而且,如果页面引入多个脚本,那么后面的脚本文件必须等待前面的脚本文件下载完毕并且执行完毕之后才能开始下载并运行.不过IE8,FF,SAFARI,CHROME已经允许脚本文件可以同时下载,不过尽管如此,javascript脚本仍然

高性能JavaScript(加载和执行)

当浏览器遇到 <script> 标签时,它是没办法知道 JavaScript 是否会向DOM中添加内容或引入其他元素,甚至关闭某一个标签.因此这个时候浏览器就会停止处理页面,先执行JavaScript代码,然后再继续解析和渲染页面. 改善 将<script>标签放到 <body>的底部,尽量减少对整个页面下载的影响. 减少<script>标签的数量,不仅仅是外链脚本,内嵌的脚本数量同样也要限制.(合并) 无阻塞脚本 无阻塞脚本的秘诀在于,在页面加载完成后才加

【Hight Performance Javascript】——脚本加载和运行

脚本加载和运行 当浏览器遇到一个<script>标签时,无法预知javascript是否在<p>标签中添加内容.因此,浏览器停下来,运行javascript代码,然后继续解析.翻译页面. 浏览器必须首先下载外部文件的代码,这要占用一些时间,然后解析并运行代码,这又要占用一些时间.此过程中,页面解析和用户交互是被完全阻塞的. 将脚本放在底部 合并脚本减少个数 延迟脚本(defer) <script src="file1.js" defer></s

javascript脚本加载

1.延迟脚本 脚本会被延迟到整个页面都解析完毕后再运行. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script type="text/javascript" defer="defer" src="test1.js"></script> 5 <script type="text/javascript" defer="

Javascript文件加载:LABjs和RequireJS

传统上,加载Javascript文件都是使用<script>标签. 就像下面这样: <script type="text/javascript" src="example.js"></script> <script>标签很方便,只要加入网页,浏览器就会读取并运行.但是,它存在一些严重的缺陷. (1)严格的读取顺序.由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,

C#如何加载程序运行目录外的程序集 (转)

---恢复内容开始--- 尼玛,为了这个问题,纠结到差点吐出干血,赶紧记下来! 源地址:http://blog.csdn.net/dyllove98/article/details/9391325 我们的应用程序部署的时候,目录结构一般不会只有运行程序的目录这一个,我们可能在运行目录下建子目录,也可能使用System32目录,也可能使用其它第三方的程序集..Net程序集 首先会在GAC中搜索相应的版本,如果未找到则会应用程序配置文件中找(如果配置),最后到应用程序所在的路径搜索. 如何可以将程序

JavaScript模块加载框架sea.js 学习一

简单总结sea.js 学习 文件目录结构 /sea/sea.js      下载地址  http://seajs.org/docs/#downloads /sea/jquery-sea.js   下载地址 http://jquery.com/download/ /sea/sea_config.js /sea/home.jsdata.js /sea/data.js 1.html页面代码文件 <style> .ch{height:200px;width:200px;background:#ccc;

C++手动加载CLR运行托管程序(CLR Hosting)

转载自:http://www.linuxidc.com/Linux/2012-10/72293.htm 机制介绍 有些时候主程序是通过C/C++实现的,但是我们希望通过托管代码来扩展非托管程序,从而也获得托管代码带来的一系列优点.比如开发效率高,自动垃圾回收等. 运行托管与非托管代码根本区别在于托管代码是进程首先加载CLR然后通过CLR运行托管程序,而非托管代码则是操作系统直接根据其PE Header加载程序分配内存从而运行.因此如果需要通过托管代码来扩展非托管程序,首先要加载CLR来使非托管程