高性能的javascript之加载顺序与执行原理篇

前言

javascript在浏览器中的性能，可以认为是开发者所面临的最严重的可用性问题，今天，自己看完高性能的javascript的加载和执行这一章，聊聊怎么解决js的加载顺序和执行的原理，下面话不多说了，来一起看看详细的介绍：

当浏览器遇到<script>标签的时候，浏览器必须先话时间下载外链的文件然后并执行，在这过程中，页面渲染和用户交互是完全被阻塞的。

脚本放在哪里比较好？

这种情况无疑是存在严重的性能问题的，由于脚本会阻塞页面的渲染，直到它们全部下载并执行完成后，页面渲染才会继续，下面的图就是代码的执行顺序

第一个js文件下载，要等到第一个js文件下载完全才会执行第二个js文件，不过现在IE8，Firefox3.5,Safari4和Chrome2都允许并行下载js文件，遗憾的是，js下载过程还是会阻塞其他资源的下载，例如：图片

所以提高性能的方法之一：将脚本放在body底部

组织脚本

由于每个<script>标签下载时都会阻塞页面的渲染，所以减少页面包含的<script>标签数量是必不可少的，解决方法：可以把多个js文件合并打包成一个js文件,这样子做的好处就是可以最小化延迟时间将会明显的改善页面的总体性能，除此之外，还可以减少HTTP的请求。

一般来说下载单个100KB的文件比下载4个25KB的文件快。

如果有多个外链的js文件，可以合并成一个js文件

无阻塞的脚本

尽管下载单个较大的js文件只产生一次HTTP的请求，但是会假死浏览器一大段时间，为了避免这种情况，你需要向页面中逐步加载js文件。

延迟的脚本

defer属性指明本元素所含的脚本可以延迟执行，但是只有IE4+和Firefox3.5+的浏览器支持

简单来说defer的机制就是知道DOM加载完成前才去下载js文件，不会阻塞浏览器的其他进程

在不支持defer属性的浏览器弹出的顺序是：defer,script,load

支持defer属性的浏览器弹出的顺序是:script,defer,load

所以说defer是在onload事件执行之前被调用

动态脚本

动态脚本的注入有两种方式，第一就是动态创建script标签，第二就是通过XMLHttpRequest注入页面

先说说第一种怎么使用：

这种技术的重点在于：无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程，但是使用动态脚本节点下载js文件时，返回的代码会立即执行（除了Firefox和Opera，它们会等待此前所有动态脚本节点执行完毕）

在主流的浏览器会在<script>标签接收完成时触发一个load事件，但是ie浏览器没有，所以我们必须封装一个兼容所有的浏览器都可以使用的方法

这种方式的缺点就是要清楚文件的加载顺序，当js文件多了，依赖关系复杂的时候，很难管理加载的依赖顺序

就像这样子写的代码很难维护

第二种动态创建脚本方式

实际上相当于创建一个带有内联脚本的<script>标签，一旦新创建的<script>元素被添加到页面，代码就会立即执行然后准备就绪。

优点：就是下载的js代码但是不立即执行，这样子可以把脚本的执行推迟到你准备好的时候执行，这种方法还可以兼容所有的浏览器

缺点：js文件必须与所请求的页面处于相同的域，js文件不能从CDN下载，一般大型web应用都不会使用这种方式

推荐使用无阻塞模式：

先添加动态所需的代码，然后假装初始化页面的剩下的代码

[图片上传失败...(image-dd3f9-1515902024710)]

上面介绍了那么多，给大家推荐一些动态延迟加载的库

有YUI3，LazyLoad和LABjs等这些库，个人觉得LABjs库比较好用，但是没有用过，大家可以去了解一下，使用方法就不在这里说了。

总结：

提高js性能的几个方面

1.</body>闭合标签之前，将所有的<script>标签放到页面底部。这能确保在脚本执行前页面已经完成了渲染

2.合并脚本。页面中的<script>标签越少，加载也就越快，响应也更快。无论外链文件还是内嵌脚本都是如此

3.有多种无阻塞下载js的方法

3.1使用<script>标签的defer属性

3.2使用动态创建的<script>元素来下载并执行代码

3.3使用XHR对象下载js代码并注入页面中

通过以上策略，可以极大提高那些需要使用大量js的web应用的实际性能

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

您可能感兴趣的文章:

  • 编写高性能的JavaScript 脚本的加载与执行
  • JavaScript性能优化总结之加载与执行
  • Javascript 加载和执行-性能提高篇
  • 实现高性能JavaScript之执行与加载
赞 (0)

相关推荐

  • JavaScript性能优化总结之加载与执行

    JavaScript性能优化总结之加载与执行

    前言 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或 JavaScript 的命名空间,它们对后面页面内容造成影响.一个典型的例子就是在页面中使用document.write(),例如清单 1 清单 1 JavaScript 代码内嵌示例 <html> <head> <title

  • 编写高性能的JavaScript 脚本的加载与执行

    脚本可以放在html页面的head里面,也可以放在body里面. 把脚本放在body中,当浏览器遇见<script>标签时, 浏览器不知道脚本会插入文本还是html标签,因此浏览器会停止分析html页面而去执行脚本.当使用src的方式添加脚本时,浏览器也会做同样的动作.在脚本处理的时候,页面呈现和用户交互将被完全阻止.脚本下载和执行阻塞了其他资源的下载,比如呈现页面使用的图片.(虽然很多浏览器实现了脚本并行下载的技术,但是这个问题依然没有解决) 脚本的位置 鉴于上面的理由,脚本应该始终放在页面

  • 实现高性能JavaScript之执行与加载

    浏览器在处理HTML页面渲染和JavaScript脚本执行的时候是单一进程的,所以在当浏览器在渲染HTML遇到了<script>标签会先去执行标签内的代码(如果是使用src属性加载的外链文件,则先下载再执行),在这个过程中,页面渲染和交互都会被阻塞. ...虽然会有阻塞,但还是有几招可以减少JavaScript对性能的影响的. 1.script标签的位置 当<script>出现在<head>中的时候,比如: <head> <script type=&q

  • Javascript 加载和执行-性能提高篇

    Js的阻塞性 Javascript 在浏览器中的性能问题,可能是最重要的可用性问题 Js的阻塞性 浏览器用单一进程来处理UI进程和Js的执行 不管是内嵌的还是外链的,下载并立即执行 因为它有可能会修改页面 页面生存周期的概念 瀑布图中看到了下载时间和executing time 在head中加入script 和link body加载到前不会输出任何东西,因此会看到空白页面 复制代码 代码如下: <script type="text/javascript"> document

  • 高性能的javascript之加载顺序与执行原理篇

    高性能的javascript之加载顺序与执行原理篇

    前言 javascript在浏览器中的性能,可以认为是开发者所面临的最严重的可用性问题,今天,自己看完高性能的javascript的加载和执行这一章,聊聊怎么解决js的加载顺序和执行的原理,下面话不多说了,来一起看看详细的介绍: 当浏览器遇到<script>标签的时候,浏览器必须先话时间下载外链的文件然后并执行,在这过程中,页面渲染和用户交互是完全被阻塞的. 脚本放在哪里比较好? 这种情况无疑是存在严重的性能问题的,由于脚本会阻塞页面的渲染,直到它们全部下载并执行完成后,页面渲染才会继续,下面

  • 探析浏览器执行JavaScript脚本加载与代码执行顺序

    探析浏览器执行JavaScript脚本加载与代码执行顺序

    本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析.渲染以及其他资源的下载都要停下来等待脚本执行完毕①.这一点是没有争议的,并且在所有浏览器中的行为都是一致的,原因也不难理解:浏览器需要一个稳定的DOM结构,而JavaScript可能会修改DOM(改变DOM结构或修改某个

  • JQuery中DOM加载与事件执行实例分析

    本文实例讲述了JQuery中DOM加载与事件执行原理.分享给大家供大家参考.具体分析如下: JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件:当用户单击某个按钮时,也会生成事件.虽然利用传统的JavaScript事件能完成这些交互,但jQuery增加并扩展了基本的事件处理机制.jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能

  • Javascript代码在页面加载时的执行顺序介绍

    一.在HTML中嵌入Javasript的方法1.直接在Javascript代码放在标记对<script>和</script>之间2.由<script />标记的src属性制定外部的js文件3.放在事件处理程序中,比如:<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p>4.作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href=&q

  • javascript动态加载三

    之前两篇都介绍了,通过动态加载JS文件或者说JS模块,是怎么一步一步实现. 首先是通过同步策略来实现模块加载与回调函数之间进行分离,接着是通过异步策略来实现模块加载与回调函数之间进行分离. 这一篇,主要是为了说说怎么优化异步策略,并且实现了随意加载(非任意顺序加载模块),页面Ready之后加载文件.先接一下上一篇遗留下来的问题 1.页面Ready之后进行加载 2.随意添加模块 进行加载 看第一个问题,这个问题其实还是比较简单的,主要是监听页面的DOMContentLoaded事件,这里就不多讲解

  • JavaScript异步加载浅析

    前言 关于JavaScript脚本加载的问题,相信大家碰到很多.主要在几个点-- 1> 同步脚本和异步脚本带来的文件加载.文件依赖及执行顺序问题 2> 同步脚本和异步脚本带来的性能优化问题 深入理解脚本加载相关的方方面面问题,不仅利于解决实际问题,更加利于对性能优化的把握并执行.   先看随便一个script标签代码-- 复制代码 代码如下: <script src="js/myApp.js"></script> 如果放在<head>上面

  • 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异步脚本"的作用.然而,以defer为例,一些细节问题可能开发者却并不一定熟悉,比如:有了defer特性的脚本会延迟到什么时候执行:内部脚本和外部脚本是不是都能够支持defer:defer后的脚本除了会延迟执行之外,还有哪些特殊的地方等等.本文结合已有的一些文章以及MDN文档中对两个特性的阐述,对de

  • Javascript 异步加载详解(浏览器在javascript的加载方式)

    一.同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像).渲染.代码执行. js 之所以要同步执行,是因为 js 中可能有输出 document 内容.修改dom.重定向等行为,所以默认同步执行才是安全的. 以前的一般建议

  • jsp页面中的代码执行加载顺序介绍

    1. java是在服务器端运行的代码,jsp在服务器的servlet里运行,而javascript和html都是在浏览器端运行的代码.所以加载执行顺序是是java>jsp>js. 2. js在jsp中的加载顺序 页面上的js代码时html代码的一部分,所以页面加载的时候是由上而下加载.所以js加载的顺序也就是页面中<script>标签出现的顺序.<script>标签里面的或者是引入的外部js文件的执行顺序都是其语句出现的顺序,其中js执行的过程也是页面装载的一部分. 2

  • javascript文件加载管理简单实现方法

    本文实例讲述了javascript文件加载管理简单实现方法.分享给大家供大家参考.具体如下: 这里介绍超级简单的进行javascript的文件(模块)的加载管理, 实现sea.js或者require.js核心功能,用一行 <script src="js/light/light.js"></script> 加载所有的js文件. //按照lightJs的顺序,让网页加载js文件: var lightJs = [ "./js/light/pre/jquery

随机推荐