javascript性能优化:创建javascript无阻塞脚本

简介:   javaScript 在浏览器中的运行性能,在web2.0时代显得尤为重要,成千上万行javaScript代码无疑会成为性能杀手, 在较低版本的浏览器执行JavaScript代码的时候,由于浏览器只使用单一进程来处理ui界面刷新和JavaScript脚本执行, 这意味着在加载javascript文件的时候不能同时做任何其他的事情。

  javaScript 在浏览器中的运行性能,在web2.0时代显得尤为重要,成千上万行javaScript代码无疑会成为性能杀手,

在较低版本的浏览器执行JavaScript代码的时候,由于浏览器只使用单一进程来处理ui界面刷新和JavaScript脚本执行,

这意味着在加载javascript文件的时候不能同时做任何其他的事情。   在加载的同时造成了用户交互阻塞;


 

  理论上来说,把样式与行为有关的脚本放在一起率先加载,这样有利于确保正确的用户体验,例如下面的代码:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>javascript</title>
	<script src="file.js" type="text/javascript" charset="utf-8"></script>
	<script src="file1.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="file.css"/>
	<link rel="stylesheet" type="text/css" href="file1.css"/>
	<link rel="stylesheet" type="text/css" href="file2.css"/>
</head>
<body>

</body>
</html>

 

  这种看似合理的代码其实有着很严重的性能问题:在javascript文件加载并执行完成之前会阻止页面进行渲染,我们的web页面会出现一片空白

无法与之正常交互,这称之为脚本阻塞

  

  由于脚本会阻塞页面其他资源的加载 我们可以把所有的script标签放在</body>之前  在页面加载的最后来加载javascript文件

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>javascript</title>
    
    <link rel="stylesheet" type="text/css" href="file.css"/>
    <link rel="stylesheet" type="text/css" href="file1.css"/>
    <link rel="stylesheet" type="text/css" href="file2.css"/>
</head>
<body>
    
    <!--推荐所有的js文件位置-->
    <script src="file.js" type="text/javascript" charset="utf-8"></script>
    <script src="file1.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>


-----------优化javascript的首要任务,将js文件放置在页面底部;

 

   那如何创建一个无阻塞的脚本呢?

无阻塞脚本的秘诀在于,在页面加载完成之后才开始加载javascript代码。 我们要在window对象的load时间触发后再下载并执行脚本,

已知有很多种方式可以实现这一效果,这里简单例举一二:

 

  1.HTML5新特性 

    html5为script标签提供了两个新的属性 一个是defer 另一个是async 它们采用的都是并行下载的方式; 在下载过程中并不会造成页面阻塞

它们的区别在于 defer表示等待页面加载完成才会执行,async则是它本身加载完成后就自动执行;

defer目前已被各大主流浏览器所兼容;

 

  2.创建动态脚本元素;这很容易使页面渲染完成之后再进行脚本加载;

例如:

  

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>javascript</title>
    
</head>
<body>
    
    <script type="text/javascript">
        var script = document.createElement("script");
        script.src = "ztf.js";
        document.getElementsByTagName("head")[0].appendChild(script);
    </script>
</body>
</html>

  我们使用标准的dom方法document.createElement来动态的创建一个script元素并指定它的src;这行成了一个动态的脚本模式;在任意时刻插入任意的javascript代码都会被浏览器执行;(创建的script最好不要插入到body里面;这样可能会引起ie抛出一个‘操作已终止’的错误信息;)

  ff,opera,chrome和safari3以上版本的script标签会在加载完成触发onload事件。

  而在老版本ie下(ie6-10) 它会触发一个readystatechange事件。<script>元素会提供一个readyState属性,它的值在scr加载不同过程产生不同的变化;我们通常会使用到 "loaded" 和 "complete"。

  通过“客户端能力检测” (http://www.jxbh.cn/newshow.asp?id=1434&tag=2) 我们可以创建一个通用的动态加载javascript的函数:    

function loadScript(url,callback){
            var script = document.createElement("script");
            script.type="text/javascript";
            if(script.readyState){        //客户端能力检测  如果支持readyState则返回的是字符串 反之返回undefined
                script.onreadystatechange = function(){    //onreadystatechange事件
                    if(script.readyState=="loaden"||script.readyState=="complete"){
                        
                        script.onreadystatechange=null;
                        
                        callback();
                    }
                }
            }else{
                script.onload = function(){
                    callback();
                }
            }
            script.src = url;
            document.getElementsByTagName("head")[0].appendChild(script);
        }

这个函数接受两个参数;javascript文件的url和完成加载后的回调函数。loadScript()函数的用法如下

loadScript("ztf.js",function(){
       alert("loadend")
});

如果需要的话,你可以尽可能多的加载javascript文件到页面上,但一定要考虑清楚文件的加载顺序,可以不断的使用callback回调函数加载多个javascript脚本;

 

另外还有一种,ajax动态请求加载脚本 在这里笔者就不一 一说明 ,大家查阅有关文档;

 

部分内容摘自《高性能javascript》

 

======================================================== 转载请注明出处。
目录
相关文章
|
6月前
|
JavaScript 前端开发 测试技术
使用Selenium执行JavaScript脚本:探索Web自动化的新领域
本文介绍了如何在Selenium中使用JavaScript解决自动化测试中的复杂问题。Selenium的`execute_script`函数用于同步执行JS,例如滑动页面、操作时间控件等。在滑动操作示例中,通过JS将页面滚动到底部,点击下一页并获取页面信息。对于只读时间控件,利用JS去除readonly属性并设置新日期。使用JS扩展了Selenium的功能,提高了测试效率和精准度,适用于各种自动化测试场景。
172 1
|
6月前
|
Web App开发 JavaScript 前端开发
JavaScript中的性能优化:代码优化技巧与性能分析工具
【4月更文挑战第22天】本文探讨JavaScript性能优化,包括代码优化技巧和性能分析工具。建议避免全局查找、减少DOM操作、使用事件委托、优化循环和异步编程以提升代码效率。推荐使用Chrome DevTools、Lighthouse和jsPerf等工具进行性能检测和优化。持续学习和实践是提升JavaScript应用性能的关键。
|
10天前
|
存储 缓存 监控
Vue.js 九个性能优化技巧
【10月更文挑战第16天】Vue.js 性能优化是一个持续的过程,需要我们不断地探索和实践。通过合理使用上述九个技巧,并结合具体的项目需求和性能指标,我们可以不断地提高 Vue.js 应用的性能和用户体验。
|
2月前
|
JavaScript 前端开发
用JavaScript脚本将当地时间转换成其它时区
用JavaScript脚本将当地时间转换成其它时区
|
3月前
|
JavaScript 前端开发 开发者
Chrom devtools JS调试、性能优化与必备功能
Chrom devtools JS调试、性能优化与必备功能
|
3月前
|
Java 数据库连接 数据库
从零到精通:揭秘 Hibernate 构建持久层服务的全过程,你离数据持久化大师还有多远?
【8月更文挑战第31天】本文详细介绍了如何从零开始使用 Hibernate 构建一个持久层服务。首先,通过在 Maven 项目中添加必要的依赖,确保项目具备使用 Hibernate 的条件。接着,配置 `hibernate.cfg.xml` 文件以连接 MySQL 数据库,并设置了基本属性。然后定义了一个简单的 `User` 实体类及其映射关系。此外,还创建了一个 `HibernateUtil` 工具类来管理 `SessionFactory`。
36 0
|
3月前
|
缓存 监控 JavaScript
Node.js 性能优化技巧
【8月更文挑战第4天】Node.js 性能优化技巧
76 3
|
3月前
|
缓存 监控 JavaScript
node.js - 性能优化
【8月更文挑战第4天】node.js - 性能优化
80 3
|
3月前
|
缓存 JavaScript 前端开发
Vue.js与JavaScript性能优化终极揭秘:掌握这些技巧,让你的Web应用飞一般地流畅!
【8月更文挑战第30天】随着前端应用复杂度的增加,性能优化变得至关重要。本文深入探讨了如何利用Vue.js和JavaScript实现高效的应用性能。主要内容包括:优化组件设计以减少不必要的渲染,采用异步组件与懒加载技术加速应用启动,利用虚拟滚动和分页处理大数据集,改进Vuex使用方式以及合理运用浏览器缓存等策略。通过具体示例和最佳实践,帮助开发者充分挖掘Vue.js潜力,打造高性能的前端应用。
64 0
|
4月前
|
缓存 JavaScript 前端开发
JavaScript框架中的性能优化策略
【7月更文挑战第27天】JavaScript框架中的性能优化是一个持续的过程,需要开发者在开发过程中不断关注和改进。通过代码优化、DOM操作优化、缓存机制、异步处理以及使用性能分析工具等策略,可以显著提升应用的性能,提升用户体验。在实际开发中,开发者应根据应用的具体需求和性能瓶颈选择合适的优化策略,以实现最佳的优化效果。