`
- 浏览:
2305614 次
- 性别:
- 来自:
北京
-
阻塞特性:
JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的。
脚本位置:
浏览器在碰到一个引入外部JS 文件的<script>标签时会停下所有工作来下载并解析执行它,在这个过程中,页面渲染和用户交互完全被阻塞了,为了避免页面加载时的停顿甚至空白页的出现,JS 脚本应尽量放置在页面底部,这点很重要:
<html>
<head>
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<p>页面的内容。。。</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>标签的出现次数,这同时也是考虑到HTTP 请求会带来额外的性能开销,也就是说应减少页面中外链脚本的数量。
你可以手动合并你的多个JS 文件,也可采用类似Yahoo! combo handler 这样的实时在线服务来实现,例如下面的这个<script>标签实际上便载入了3个JS 文件:
<html>
<head>
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<p>页面的内容。。。</p>
<!-- 推荐的位置,页面底部: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?file1.js&file2.js&file3.js"></script>
</body>
</html>
无阻塞的脚本:
为了阻塞状况,这里提供了几个实现并行下载JS 脚本的方案。
1. 延迟的脚本
HTML4 为<script>标签定义了一个defer 属性,它能使这段代码延迟执行,然而该属性只有IE4+ 和Firefox 3.5+ 支持。声明了defer 属性的<script>会在DOM加载完成,window.onload 事件触发前被解析执行:
<script type="text/javascript" src="file1.js" defer></script>
2. 动态脚本元素
这是最通用的解决方案,通过DOM 动态地创建<script>元素并插入到文档中,文件在该元素被添加到页面时开始下载,这样 无论在何时启动下载,文件的下载和执行过程不会阻塞页面其他进程。
不过要注意使用这种方式加载的代码会立刻执行,这样需清楚的了解各文件的作用以及合理的执行顺序,此时跟踪并确保脚本下载完成并准备就绪是很有必要的,非IE浏览器会在<script>元素接收完成时触发一个load 事件,而IE 下则会触发一个readystatechange 事件并通过readyState 属性加以判断便可。以下是兼容地动态加载一个JS 脚本的函数:了:
function load_script(url, callback)
{ var script = document.createElement("script");
script.type = "text/javascript";
if (script.readyState)
{ //IE
script.onreadystatechange = functio()
{
if (script.readyState == "loaded" script.readyState == "complete")
{
script.onreadystatechange = null;
callback();
}
}
}
else
{ //others
script.onload = function(){
callback(); }
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
你可以将这个函数保存至一个load_script.js 文件,然后用该函数来加载其他的脚本,当要加载多个脚本时,为了确保正确的加载顺序,可以将load_script() 的执行串联起来,最后如前面说到的放至页面的底部,这便是一个完美的解决方案了。
<script type="text/javascript"src="load_script.js"></script>
<script type="text/javascript">
load_script("file1.js", function()
{
load_script("file2.js", function()
{
load_script("file3.js", functio() {
//全部载入后的操作...
} );
} );
} );
</script>
3.XMLHttpRequest 脚本注入
即通过AJAX 方式加载,不过这种方式无法实现跨域加载,不适用于大型网站。
推荐的无阻塞模式
我们上面做的这些工作当然也已经被那些牛人们完成了,并写成了一些优秀的JS 类库以便我们使用,它们均能很好地解决JS 脚本的阻塞问题,实现并行下载,例如: YUI3、LazyLoad、LABjs 等。
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
本文将深入探讨标题和描述中提及的两本书籍《JavaScript语言精粹》和《高性能JavaScript》所涵盖的知识点。 首先,我们来关注《JavaScript语言精粹》。这本书主要侧重于JavaScript的核心概念和最佳实践,旨在帮助...
《高性能JavaScript》是一本专为前端开发人员设计的深度学习指南,它涵盖了JavaScript语言的核心特性以及如何优化这些特性以实现高性能的Web应用。这本书详细解析了JavaScript在实际开发中的各种性能问题,并提供了...
《高性能JavaScript》是一本深入探讨JavaScript编程技巧与优化策略的专业书籍。它主要针对那些希望提升JavaScript应用程序性能的开发者,无论是前端网页开发还是后端Node.js应用,都能从中受益。本书全面覆盖了...
《高性能JavaScript编程》是著名前端开发者Nicholas C. Zakas所著的一本经典书籍,英文原版名为"High Performance JavaScript"。这本书深入探讨了如何优化JavaScript代码,提升Web应用程序的性能,是JavaScript...
### 《高性能 JavaScript》知识点概览 #### 一、加载与执行(Loading and Execution) **核心概念:** 在浏览器中的JavaScript性能无疑是开发者面临的关键可用性问题。由于JavaScript的阻塞性质,在执行...
《Javascript 高性能程序开发》是由Nicholas C. Zakas所著的一本关于如何提高JavaScript性能的书籍。本书通过对JavaScript的深入分析,以及对脚本加载、执行、作用域管理等方面的研究,提出了许多提高JavaScript代码...
作者还推荐了推荐的非阻塞模式,这有助于读者构建高效的脚本加载和执行流程。 除此之外,书中还包含了许多关于提高JavaScript性能的技巧和最佳实践。例如,在编写代码时,应当尽量减少全局变量的使用,因为全局变量...
本章探讨JavaScript在浏览器中的加载和执行过程,强调了JavaScript执行的阻塞特性。由于大多数浏览器使用单进程处理用户界面更新和JavaScript代码,因此这两者不能同时进行,这就意味着JavaScript执行时间越长,用户...
《高性能JavaScript和构建高性能WEB站点》是一本深入探讨如何优化JavaScript和Web站点性能的专业书籍。在当前互联网技术日新月异的时代,JavaScript作为Web开发的核心语言,其性能优化对于提升用户体验和降低服务器...
在JavaScript的世界里,高性能的设计是确保网页应用流畅运行的关键。要理解如何实现高性能JavaScript,我们需要深入探讨以下几个核心知识点: 1. **数据结构与算法选择**:JavaScript中的对象、数组、字符串等都有...
### 高性能JavaScript知识点概述 #### 一、加载与执行(Loading and Execution) **核心概念:** - **JavaScript执行机制**:浏览器中的JavaScript执行过程及其对网页渲染的影响。 - **单进程模型**:大多数现代...
《高性能JavaScript_编程》这本书是JavaScript开发者...通过阅读《高性能JavaScript_编程》这本书,开发者可以系统地学习到如何在实际项目中运用这些知识点,提升代码质量和运行效率,从而打造高性能的JavaScript应用。
- 第一章 Loading and Execution 加载和运行:此章节探讨了JavaScript在浏览器中的加载和执行性能问题,以及如何优化这部分性能。 - 第二章 Data Access 数据访问:这部分内容可能会介绍如何减少在JavaScript中...
JavaScript在浏览器中的性能优化是网页开发中的重要环节,因为JavaScript的加载和执行直接影响到页面的渲染速度和用户体验。本文主要探讨了JavaScript加载顺序与执行原理,以及如何通过优化策略提升性能。 首先,当...
### 高性能JavaScript知识点概述 #### 一、书籍简介与背景 《高性能JavaScript》是一本由雅虎前端工程师Nicholas C. Zakas及其团队撰写的关于优化JavaScript性能的专业书籍。该书聚焦于解决Web应用程序中JavaScript...
"JavaScript高性能编程"和"JavaScript异步编程"是两个关键的JavaScript专题,对于提升应用程序的性能和用户体验至关重要。 一、JavaScript高性能编程 1. **优化代码执行效率**:了解JavaScript引擎的工作原理,如...