`
younglibin
  • 浏览: 1214239 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript 控制优化页面 js 加载顺序

    博客分类：
  • js
JavaScript脚本 
阅读更多

学习js的时候，经常会遇到这样的问题，如何控制dom、js在页面上的加载顺序。
Peter Michaux 有一篇文章非常具体地分析了各种控制 js 装载过程的方法和优劣。


首先可能会用到 defer来强制页面加载完成后来再运行js，像这样：

<script src="x.js" type="text/javascript" defer></script>

看似用起来没什么问题，但是发现无法兼容Mozilla。

既然这样不行，就只好换种方法，利用 window.onload 来捕获页面的载入事件。
在js文件里：

window.onload = function() {
alert("load over");
}

这一切的一切想必大家都是很熟悉的了，但是，之后就没有问题了么？假设页面dom里有一张图片，像这样：

<img src="picture.jpg" >

而这张图片又非常之大，那么在dom加载完毕之前，js是无法执行的。问题就在于假设dom提供了用户交互的功能。例如按钮，输入表单等，这个时候他们已经是被呈现了的，因此就很有可能产生无效的用户行为。
我们不能指望用户会安分守己地等待页面显示加载完毕后再发生动作，而要把用户考虑成随时随刻会到处乱点的朋友。

这个问题又如何解决呢？既然我们需要页面结构输出后执行js，我们不妨把js入口函数定义在页面最下面好了。

<head>
  <script src="x.js" type="text/javascript"></script>
</head>
<body>
   ......
  <img src="picture.jpg" >
  <script type="text/javascript">init();</script>
</body>

这样就达到我们的目的了，页面结构输出完毕后就执行js，不用考虑图片的加载。

但是在文档末尾嵌入一条js脚本，毕竟容易被忽略，把关键的程序入口放在这种渺小的角落，总觉得不太合适。那有什么预留退路的方法没有呢？
我们可以把结尾的脚本稍微修改一下：

<head>
  <script src="x.js" type="text/javascript"></script>
</head>
<body>
   ......
  <img src="picture.jpg" >
<script type="text/javascript">window.onload();</script>
</body>

而在js里预先把入口定义给onload事件：

 

window.onload = function() {
alert("load over");
}

这时候页面结构加载完毕后就会调用onload函数，而即使漏写了dom里的onload入口，js自身里的onload定义也会在页面加载完毕后执行，这样退路就留出来了。
不过这时候有个问题，onload事件会执行两次，可以在js的onload实现里解决这个问题，改成这样：

var flag = false;
window.onload = function() {
  if (flag) {return;}
   flag= true;
   alert("load over");
}

这样似乎已经解决我们所有的问题了，不过仍然有些小遗憾，因为最后一行代码，致使行为与结构没有分离开来，要 unobtrusive 就要 unobtrusive 的彻底，为了达到完美的分离，还有很大的讨论空间。

而对于js文件内部的onload事件，我们还可以参考 Simon Willison   的addLoadEvent函数来优化：

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
     window.onload = func;
   } else {
     window.onload = function() {
      if (oldonload) {
         oldonload();
       }
       func();
     }
   }
}

然后，我们就可以在js里肆无忌惮地不停地将各个不同的函数添加到onload事件响应中了：

addLoadEvent(funcA);
addLoadEvent(funcB);
addLoadEvent(funcC);

当然，同一个js里设置多个onload响应函数其实没什么必要，我们完全可以把funcA、funcB、funcC封装在一个函数里add，addLoadEvent函数，更理想的状态是为页面动态调用的多个js文件添加入口。

 

 

 

小试牛刀：

 

 

function addLoadEvent(func)
 {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
      window.onload = func;
    }else{
       window.onload = function()
      {
         if (oldonload){
           oldonload();
        }
       func();
     }
   }
   
   function query(){
    alert("加载成功");
   }
   addLoadEvent(query);

 

 

 

<input type="button" onClick="query();" value="加载js"/>

分享到：
| JFreeChart饼状图显示百分比
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    页面加载中js 页面加载中js 页面加载中js

    在网页开发中，"页面加载中js"是一个关键的概念，涉及到用户体验和页面性能优化。页面加载过程中，JavaScript（js）的执行对用户感知的页面加载速度有着直接影响。在这个主题下，我们将深入探讨JavaScript如何影响...

    页面加载顺序，loading巧妙解决

    综上所述，理解并优化页面加载顺序是提升网页性能和用户体验的关键。通过合理利用`loading`属性和其他技术，我们可以更好地控制页面的展现，使得用户在等待页面完全加载的过程中获得更流畅的体验。

    html中js代码的加载顺序

    了解JavaScript加载顺序对于优化页面性能和解决脚本依赖关系至关重要。正确地管理脚本加载可以帮助减少页面加载时间，提供更好的用户体验。通过使用异步、延迟加载和模块化等技术，开发者可以更加灵活地控制脚本的...

    通过JavaScript+IFRAME实现页面分屏加载

    - **控制加载顺序**：根据需要，可以通过JavaScript控制各个IFRAME的加载顺序，实现逐屏加载。 ### 4. 示例代码 以下是一个简单的示例，展示了如何使用JavaScript和IFRAME实现分屏加载： ```javascript // 创建...

    js加载页面等待效果

    7. **性能优化**：为了减少等待时间，可以对图片进行压缩，使用懒加载技术延迟非首屏内容的加载，以及优化脚本和样式表的加载顺序，以提高页面的初始渲染速度。 8. **用户反馈**：良好的等待效果不仅要告知用户页面...

    Javascript在页面加载时的执行顺序.docx

    JavaScript在页面加载时的执行...理解JavaScript在页面加载时的执行顺序对于优化页面性能、避免冲突和确保代码正确执行至关重要。开发者应当注意代码组织和加载策略，以确保在不同的浏览器环境下都能得到预期的效果。

    Javascript在页面加载时的执行顺序.pdf

    在Firefox和Opera中，由于它们按照加载顺序执行，所以先弹出`test.js`中的值，然后是内联脚本中的值。而在IE中，由于`document.write()`的特性，可能会导致`tmpStr`未定义的错误。 为了解决IE中的问题，我们可以...

    javascript函数动态加载javascript文件

    在实际项目中，为了提高页面加载速度和优化用户体验，我们常常需要按需加载JavaScript文件，而不是一次性加载所有资源。这正是"javascript函数动态加载javascript文件"这一主题的核心所在。 动态加载JavaScript文件...

    JavaScript性能优化的小知识总结共23页.pdf

    1. **延迟加载（Lazy Loading）**：为了提高页面加载速度，可以使用延迟加载策略，如图片懒加载，只在用户滚动到可视区域时才加载资源。 2. **代码分割（Code Splitting）**：在使用模块化工具如Webpack时，可以将...

    网页按顺序加载 最后加载js广告

    通过优化网页的加载顺序，特别是将非关键的JavaScript广告放在最后加载，我们可以显著提高网页的首屏加载速度，从而提升用户体验。同时，对于网页性能的优化，还可以考虑使用CDN加速资源获取，压缩代码减少传输量，...

    动态加载外部JS文件

    动态加载外部JS文件是网页开发中的一个重要技术，它允许网页在需要时按需加载JavaScript资源，从而提高页面的加载速度，优化用户体验，并有效地管理复杂的项目结构。以下将详细阐述动态加载的原理、方法以及相关实践...

    js加载页面

    首先，了解JavaScript加载页面的基本过程至关重要。当用户访问一个网页时，浏览器会解析HTML文件，并遇到`&lt;script&gt;`标签。这些标签可以内联包含JavaScript代码或指向外部JS文件的URL。对于外部文件，浏览器会发起...

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

    本文主要探讨了JavaScript加载顺序与执行原理，以及如何通过优化策略提升性能。 首先，当浏览器遇到`&lt;script&gt;`标签时，会暂停页面的渲染，先下载并执行脚本。这种行为会导致页面呈现的阻塞，特别是在脚本数量较多或...

    JavaScript 的性能优化：加载和执行.docx

    JavaScript 是Web开发中不可或缺的一部分，尤其...需要注意的是，虽然现代浏览器允许并行下载JavaScript文件，但仍然会阻塞样式和图片等其他资源的下载，因此，优化JavaScript加载和执行仍然是提升网页性能的关键步骤。

    jQuery页面区域预加载布局代码

    这种技术允许开发者控制不同页面区域的加载顺序和速度，使得关键内容可以更快地呈现给用户，同时其他非关键内容在后台逐步加载。 首先，我们来看**jQuery**，它是一个广泛使用的JavaScript库，简化了JavaScript的...

    scriptjs异步JavaScript加载器和依赖管理器

    **script.js：异步JavaScript加载器与依赖管理器详解** 在Web开发中，JavaScript的异步加载和依赖管理是优化页面性能的关键因素。`script.js`是一个轻量级且功能强大的工具，它允许开发者实现异步加载JavaScript...

    javascript代码加载优化方法

    JavaScript代码加载优化是提高网页...在实际应用中，开发者还可以结合使用其它优化技术，如合并和压缩JavaScript文件，使用CDN（内容分发网络）加速资源下载，或者利用`defer`和`async`属性更精细地控制脚本加载顺序。

    2.02 JavaScript优化.pdf

    JavaScript 优化 - 事件流、事件委托、懒加载、预加载 JavaScript 优化是指通过各种技术和方法来提高 JavaScript 的执行效率、减少浏览器的 нагрузка、提升用户体验的一种优化手段。下面我们将详细介绍事件...

    html加载顺序.zip

    HTML加载顺序是Web前端开发中的一个关键概念，它关乎到网页元素何时呈现、何时执行以及如何交互。了解这个过程对于优化网页性能、提高用户体验至关重要。本文将深入探讨HTML的加载流程，包括解析、渲染和执行的各个...

    浏览器的加载与页面性能优化

    JavaScript和CSS的加载顺序直接影响页面的渲染流程。通常，JS文件应放置在页面底部，以避免阻塞页面的其他元素加载；而CSS则应优先加载，确保页面的基本布局和样式能够快速呈现。同时，使用`defer`和`async`属性可以...

Magicbox
Global site tag (gtag.js) - Google Analytics