如何正确的加载javascript文件

最新推荐文章于 2022-11-15 18:18:25 发布
最新推荐文章于 2022-11-15 18:18:25 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： Performance Rules 文章标签： javascript function google 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Danwang/article/details/5286576
版权

1） 为什么加载javascript文件很重要？

 

javascript文件是比较特殊的，因为浏览器加载javascript是串行的。以为着在加载Javascript文件的时候，其他一切资源的下载包括页面的显示都会被阻塞。

 

2） 如何正确的加载JavaScript？

 

a. 将JavaScript文件放在页面的最后

 

因为JavaScript的加载会阻塞页面的显示，所以将JavaScript文件放置在页面的最后，也就是<body>标签结束前。这样用户可以更快的看到页面的显示，可以有更好的用户体验。

 

b. 并行的加载JavaScript

 

如果使用普通的<script>标签来引用外部的JS文件，那么JS文件的下载是串行的，这样通常效率会非常低。推荐使用LABjs来加载JavaScript，可以达到JS文件的并行下载，但同时又有机制来保证JS文件执行的顺序。

 

下面就是一个使用LABj来加载JavaScript的例子

<script>

   $LAB

   .script("framework.js").wait()

   .script("plugin.framework.js")

   .script("myplugin.framework.js")

   .wait(function(){

      myplugin.init();

      framework.init();

      framework.doSomething();

   });

</script>

具体可以查看LABj的官方网站：http://labjs.com/

 

c. Lazy load

 

这个往往是讲起来比较容易，做其他比较难。原理很简单，就是页面显示的时候，只加载需要的JS文件，然后在用户操作的时候再加载需要的JS文件。

 

d. 正确的压缩JS文件

 

使用JSMin或者Google Closure来压缩JS文件，这个往往可以大大减少JS文件的大小。

 

 

 

 

 

 

 

Danwang
关注
专栏目录
异步安全加载javascript文件的方法
10-23
在互联网应用开发中，加载JavaScript文件是常见的需求，但同步加载可能会阻塞浏览器渲染，影响用户体验。异步加载JavaScript文件则可以解决这个问题，它允许页面继续加载其他资源，而不会被脚本加载所阻塞。本文将...
javascript文件加载管理简单实现方法
10-23
顺序加载JavaScript文件是指在文档中按特定的顺序引入和执行脚本文件。这种加载方式可以确保依赖关系正确执行，避免因脚本加载顺序不当导致的运行时错误。 知识点二：基本的JavaScript文件加载方法 传统的文件加载...
如何加载JS
小天的博客
11-15 124
外部JS的阻塞下载 所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。 有人会问：为什么JS不能像CSS、image一样并行下载了？这里需要简单介绍一下浏览器构造页面的原理， 当浏览器从服务器接收到了HTML文档，并把HTML在内存中转换成DOM树，在转换的过程中如果发现某个节点(...
JavaScript加载方式介绍
chuannaoxuan4674的博客
01-19 169
介绍 在HTML中添加JavaScript代码有几种方式（和CSS的代码类似），下面一一介绍。 脚本嵌入 [codesyntax lang="xml"] <input id='suren' type='button' value='load' /> &lt...
JavaScript 文件加载
weixin_45032957的博客
04-15 607
Script 标签 其实最原始的 JavaScript 文件加载方式，就是Script 标签，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window 对象中，不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口。 缺点： 污染全局作用域 开发人员必须主观解决模块和代码库的依赖关系 文件只能按照script标签的书写顺序进行加载 在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪 默认情况下，浏览器是同步加载 Ja
加载JavaScript脚本方式
qq_36582776的博客
04-01 1112
1.静态加载： 1. <script>... ...</script>直接写入HTML文件 2. <script src="xxx.js"></script> 2.动态引入 1.document.write() <script language="javascript"> document.write("<script src='test.js'><\/script>"); </script>
JavaScript的加载方式
YoungHD66的博客
10-10 144
1.JavaScript的四种加载方式 2.defer与async
javascript中动态加载js文件多种解决办法总结
10-26
在开发过程中，有时我们可能需要在运行时动态加载JavaScript文件，以提高页面性能或根据用户需求加载特定的脚本。本文将详细介绍几种在JavaScript中动态加载JS文件的方法。 1. **利用`document.write`** 这是最...
学习javascript文件加载优化
11-22
3. 自定义异步加载：通过创建新的`<script>`元素并动态添加到文档中，可以实现异步加载JavaScript文件，但这可能导致执行顺序混乱，不适合有依赖关系的脚本。例如： ```javascript function asyncAdd(src) { var ...
JavaScript文件的同步和异步加载的实现代码
10-19
与同步加载相对的是异步加载，它允许浏览器并行加载JavaScript文件，不会阻塞页面的其他内容的渲染。通过动态创建script元素并设置`async`或`defer`属性，或者使用AJAX技术实现。 1. **动态创建script元素** 通过...
JavaScript加载
你的博客
08-02 336
本篇文章转载自我的个人博客 传统js加载方式 &lt;script src="path/to/myModule.js"&gt;&lt;/script&gt; &lt;script src="path/to/myModule.js" defer&gt;&lt;/script&gt; &lt;script src="path/to/myModule.js" async&amp
javascript文件加载模式与加载方法
weixin_34248118的博客
05-01 137
加载方式 形象图像化方法，见 http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html 1、 script标签， 无 async defer， 则script文件下载和执行的过程， 会阻塞后面html标签的解析，进而影响页面渲染。 2、script标签， 有defer， 则script文件下载过程，不会阻...
动态加载JavaScript文件
liubangbo的专栏
05-20 188
写一个简单的动态加载JavaScript demo： testA.js 代码如下： var testA = {}; (function (self) { self.pubFunc1 = function () { console.log("testA pubFunc1"); } })(testA); main.html中的脚本如下： function ...
js加载文件到div容器中
milli236的博客
12-13 1846
load demo body { font-size: 12px; font-family: Arial; } $( "#success" ).load( "index.html", function( response, status, xhr ) { alert(response); alert(status); });
JavaScript加载与执行
aaronthon的博客
01-22 186
多数情况下，浏览器是用单一进程处理用户界面和JavaScript脚本执行。所以，JavaScript的处理时间越久，浏览器等待响应事件就越长。 简单地说，就是浏览器每次处理<script>标签，就会让页面等待脚本的解析和执行。这个过程页面渲染和用户交互是完全阻塞的。 一、脚本位置 H4规范指出，<script>标签可以放在<h...
五种加载JavaScript脚本的方式
beautifulsarah的博客
01-17 861
 JavaScript文件（下面简称脚本文件）需要被HTML文件引用才能在浏览器中运行。在HTML文件中可以通过不同的方式来引用脚本文件，我们需要关注的是，这些方式的具体实现和这些方式可能会带来的性能问题。     当浏览器遇到（内嵌）标签时，当前浏览器无从获知javaScript是否会修改页面内容。因此，这时浏览器会停止处理页面，先执行javaScript代码，然后再继续解析和渲染页
动态加载执行 JS 文件、前端文件下载方式汇总
蚩尤后裔-汪茂雄
11-07 2812
目录 重新加载 JS 文件 动态加载 JS 文件 对话框 confirm 方法 开发中根据需求来动态加载 JS 文件，或者在某些情况下需要重新加载某个 JS 文件。 重新加载 JS 文件 应用中的某些 JS 文件如果在某些条件下需要重新加载时，最简单的思路就是先删除原来的 JS 文件，再重新添加。为了方便，使用 JQuery 操作。 <!DOCTYPE html> &l...
js：js中加载js文件
最新发布
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
11-15 2837
这个问题，之前没怎么想过，因为现在大部分时间我们都在搞 react、vue + webpack 这种有模块化的，所以基本上用 es module 就可以。一般最终形态都是 html 引入 script 标签，一些老项目可能需要一个 script 标签里的 js 引用另一个 js 文件，怎么办呢。
JS实现页面刷新和重新加载功能（关闭当前窗口）
热门推荐
HaleyTiger的博客
03-09 1万+
一、刷新或重新加载当前页面 序号 方法 1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(location) 5 document.execCommand(‘Refresh’) 6 window.navigate(location) 7 location.rep...
详解JavaScript文件同步与异步加载原理及其实践
本文将深入探讨JavaScript文件的同步加载与异步加载实现原理，这对于理解和优化...总结来说，理解JavaScript文件的同步和异步加载机制对于优化网站性能和用户体验至关重要，开发者需要根据具体需求选择正确的加载策略。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值