加载和执行 --《高性能JavaScript》
1.起因:
每次遇到<script> 标签时,页面必须停下来等待代码下载并执行完,然后再继续处理其他部分。
2.减少JavaScript对性能的影响
1.将所有的JavaScript文件放在</body>前,这能确保脚本执行前页面已经完成了渲染。
2.合并脚本。页面中的<script>标签越少,加载也就越快,响应也就更迅速。无论外链脚本还是内嵌脚本。
3.有多种无阻塞下载JavaScript方法:
1.使用<script>的defer属性,async属性(IE)
2.使用动态创建的<script>元素来下载并执行代码
function loadScript(url, callback){
var script = document.createElement('script');
script.type = "text/javascript";
if(script.readyState){ //IE9以下
script.onreadystatechange = function(){
if(script.readyState=='complete'||script.readyState=='loaded'){
callback();
}
}
}else{
script.onload = function () {
//firefox chrome safair opera
callback();
}
}
script.src = url;
document.head.appendChild(script);
}
3.使用XHR对象下载JavaScript代码并注入页面中
加载和执行 --《高性能JavaScript》的更多相关文章
- [转]JavaScript 的性能优化:加载和执行
原文链接:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html?ca=drs- JavaScript 的性能优化: ...
- 【转】js JavaScript 的性能优化:加载和执行
JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的 ...
- JavaScript 的性能优化:加载和执行
随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 ...
- 浏览器中Javascript的加载和执行
在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏 ...
- 高性能JavaScript-JS脚本加载与执行对性能的影响
在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 脚本位置对性能的影响 优化页面加载性能的原则之一是将scri ...
- 怎么样加快JavaScript加载和执行效率
概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...
- 浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded
在”浏览器环境下Javascript脚本加载与执行探析“系列文章的前几篇,分别针对浏览器环境下JavaScript加载与执行相关的知识点或者属性进行了探究,感兴趣的同学可以先行阅读前几篇文章,了解相关 ...
- 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...
- 如何正确的加载和执行 JavaScript 代码
无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行 ...
随机推荐
- C#显示及隐藏任务栏
private const int SW_HIDE = 0; //隐藏任务栏 private const int SW_RESTORE = 9;//显示任务栏 [DllImport("use ...
- struts2知识系统整理
1.MVC 和 JSP Model 2 ** a.:M-Model 模型 包含两部分:业务数据和业务处理逻辑 b.V-View 视图:视图(View)的职责是负责显示界面和用户交互(收集用户信息 ...
- 更新yum源导致yum不可用
当安装和yum配置相关的包后报yum模块找不到 yum install -y yum-utils device-mapper-persistent-data lvm2 yum list|grep yu ...
- SQL2012 分页(最新)
--提取分页数据,返回总记录数 ALTER procedure [dbo].[sp_Common_GetDataPaging_ReturnDataCount] ( @SqlString varchar ...
- iOS学习笔记15-序列化、偏好设置和归档
一.本地持久化 所谓的持久化,就是将数据保存到硬盘中,使得在应用程序或机器重启后可以继续访问之前保存的数据.在iOS开发中,有很多数据持久化的方案,接下来我将尝试着介绍一下5种方案: plist文件( ...
- 【bzoj3696】化合物 树形dp
题目描述 首长NOI惨跪,于是去念文化课了.现在,他面对一道化学题.这题的来源是因为在一个奇怪的学校两个化竞党在玩一个奇怪的博弈论游戏.这个游戏很蛋疼,我相信你们也没有兴趣听.由于这个游戏涉及博弈论, ...
- PHP文件锁定机制
<?php //如果多用户访问一个文件,采用文件锁定机制 /* flock()文件锁定 */ header("Content-Type:text/html;charset=utf8&q ...
- Spring boot+Spring Security 4配置整合实例
本例所覆盖的内容: 1. 使用Spring Security管理用户身份认证.登录退出 2. 用户密码加密及验证 3. 采用数据库的方式实现Spring Security的remember-me功能 ...
- Codevs 1026 逃跑的拉尔夫
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 年轻的拉尔夫开玩笑地从一个小镇上偷走了一辆车,但他没想到的是那辆车属于警察局,并且 ...
- HUNAN 11562 The Triangle Division of the Convex Polygon(大卡特兰数)
http://acm.hunnu.edu.cn/online/?action=problem&type=show&id=11562&courseid=0 求n边形分解成三角形的 ...