`

js脚本阻塞

 
阅读更多
本文翻译整理自:http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/
     所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验,新一代浏览器都支持并行下载JS,但是JS下载仍然会阻塞其它资源的下载(例如.图片,css文件等)
外部js脚本加载的时候常常会遇到脚本阻塞的问题,有什么解决方法呢?

1.there is an easy way to work around this problem: use dynamic scripts tags and load scripts in parallel, improving the page loading speed and the user experience.使用动态script 标签,并行加载script,提高页面加载速度。
var js = document.createElement('script');
js.src = 'myscript.js';
var head = document.getElementsByTagName('head')[0];
head.appendChild(js);


2.当然还有一种方法就是:把脚本放在页面最底端,</body>标签前。

同理,不影响ie中加载样式表时间,但是在ff中能提高加载时间,可以这样解决:
var h = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = 'mycss.css';
link.type = 'text/css';
link.rel = 'stylesheet';
h.appendChild(link);


文中还指出了其他防止阻塞的几种方法:
3.Using defer attribute of the script tag使用defer属性(IE有效)
4.使用eval()--不安全,非常耗性能,不赞成使用
5.通过XHR请求创建script标签
6.使用iframe
分享到:
评论

相关推荐

    JS脚本集合 大全 JS脚本集合 大全

    这个“JS脚本集合大全”包含了多种JavaScript脚本,可能是用于各种功能的实现,比如页面特效、表单验证、数据处理等。 JavaScript的核心概念包括变量、数据类型、控制结构(如条件语句和循环)、函数、对象和类。...

    js库 js 脚本程序大全.rar

    3. **脚本程序**:JavaScript脚本通常指一段实现特定功能的代码,可以是独立的文件或嵌入到HTML中的代码段。这些脚本可能包括交互式元素、表单验证、动态加载内容、页面特效等。例如,一个简单的脚本可能用于改变...

    js动态引入外部js脚本并获取里面的变量值.pdf

    "js动态引入外部js脚本并获取里面的变量值"这个主题就是关于如何在JavaScript中实现这种功能的讨论。 首先,`jQuery`库提供了一个非常方便的方法来实现动态加载外部脚本:`$.getScript()`。这是一个异步方法,它...

    js脚本js脚本

    以上就是JavaScript脚本的核心知识点,理解并掌握这些概念将有助于你编写高效、健壮的JavaScript代码。在实际开发中,还需要不断学习和了解新的API、框架和最佳实践,以适应快速发展的前端技术生态。

    javascript脚本应用大全

    在“JavaScript脚本应用大全”这个主题中,我们将深入探讨JavaScript的核心概念、语法特性以及各种实用的应用场景。 1. **基础语法** JavaScript的基础语法包括变量声明(var、let、const)、数据类型(如字符串、...

    页面常用的JS脚本小结

    综上所述,JavaScript脚本在网页开发中的应用广泛,从基本的DOM操作到复杂的异步通信和页面特效,都离不开它的身影。通过熟练掌握这些常用JS脚本,可以大大提升网站的交互性和用户体验。文件"网页常用的jsp 脚本.doc...

    经典的JS脚本

    Node.js基于Chrome的V8引擎,提供了一个高效运行JavaScript的平台,支持非阻塞I/O和事件驱动,适合构建高性能的网络应用。 JavaScript库和框架,如jQuery、React、Vue和Angular,进一步简化了开发流程,提供了丰富...

    JavaScript脚本程序设计

    在"JavaScript脚本程序设计"中,我们可能涉及到以下几个关键知识点: 1. **基础语法**:JavaScript的基础包括变量声明(var、let、const)、数据类型(如字符串、数字、布尔值、null、undefined、对象、数组、符号...

    引入JavaScript脚本代码到HTML文档中

    这篇博客“引入JavaScript脚本代码到HTML文档中”将探讨如何将JS代码整合到HTML页面,以便实现网页的交互功能。 首先,JavaScript的引入方式主要有三种:内联方式、内部脚本方式和外部脚本方式。 1. 内联方式:这...

    JavaScript脚本特效

    "JavaScript脚本特效"通常是指利用JavaScript语言编写的代码片段,用于增强网页的视觉效果和用户体验。这些特效可以是动画、用户交互或者一些创新的视觉展示。 1. **雪花效果**:在网页上模拟下雪的场景,通过...

    几个比较厉害的js脚本,供以后学习之用

    在本压缩包中,包含了一些强大的JavaScript脚本,这些脚本可以为你的Web项目增添丰富的功能和特效,同时也非常适合学习和研究。下面将详细探讨JavaScript在Web开发中的重要性和几个关键知识点。 1. **DOM操作**:...

    动态加载JS脚本的4种方法.doc

    在Web开发中,动态加载JavaScript脚本是一种常见的优化策略,它允许在页面加载后根据需要按需加载脚本,从而提高页面性能和用户体验。本文将详细介绍四种动态加载JS脚本的方法,并探讨它们的工作原理和应用场景。 1...

    js脚本!

    JavaScript,简称JS,是一种轻量级的解释型编程语言,主要应用于Web....txt"中,你可以找到各种常用的和特殊的JavaScript脚本示例,这些示例涵盖了上述知识点,通过学习和实践,可以加深对JavaScript的理解和应用能力。

    javascript脚本技术课件

    JavaScript脚本技术是Web开发中的基础且至关重要的部分,它主要负责网页的动态效果和交互功能。对于初学者来说,理解和掌握JavaScript的核心概念是至关重要的。以下是对"javascript脚本技术课件"的详细解析: 1. **...

    js脚本大集合(JavaScript)

    这个“js脚本大集合”显然是一份包含多种JavaScript特效和功能实现的资源包,适合初学者学习和开发者参考。 1. **基础概念**: - JavaScript主要由ECMAScript规范定义,是网景公司的Brendan Eich在1995年发明的。 ...

    两侧广告JS脚本

    在网页设计和开发中,"两侧广告JS脚本"是一个重要的技术点,它涉及到JavaScript语言、网页布局和用户体验等多个方面。这种脚本主要用于在网页的两侧显示动态或静态的广告内容,以增加网站的收入来源或者提升品牌曝光...

    JavaScript脚本特效编程给力起飞pdf

    本书《JavaScript脚本特效编程给力起飞》显然是为了帮助读者深入理解和掌握利用JavaScript实现各种特效编程的技术。以下是对该书内容可能涵盖的知识点的详细阐述: 1. **JavaScript基础**:书中应该会介绍...

    javascript常用的JS脚本

    本文将基于"javascript常用的JS脚本"这一主题,详细探讨JavaScript的一些核心概念、常用函数和技巧。 首先,理解JavaScript的基本语法是至关重要的。它遵循ECMAScript标准,包括变量声明(var, let, const)、数据...

    内存javascript脚本

    根据提供的文件信息,我们可以深入探讨与“内存JavaScript脚本”相关的知识点。这将涵盖JavaScript在内存管理中的作用、常见的内存问题及其解决方案。 ### 内存管理基础 在计算机科学中,内存是用于存储数据和程序...

    工作中常用的javascript脚本

    这个压缩包中收集的"工作中常用的javascript脚本"涵盖了各种实用场景,帮助开发者提高工作效率。 1. **基础语法** JavaScript的基础语法包括变量声明(`var`, `let`, `const`)、数据类型(如字符串、数字、布尔、...

Global site tag (gtag.js) - Google Analytics