js怎么动态加载js文件(JavaScript性能优化篇)
下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度
【基本优化】
将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完成页面渲染而不会造成页面堵塞问题,这个大家都懂的。
【合并JS代码,尽可能少的使用script标签】
最常见的方式就是带代码写入一个js文件中,让页面只使用一次<script></script>标签来引入
【无堵塞加载JS】
通过给script标签增加 defer属性或者是 async 属性来实现
<script src="file.js" defer></script>
注解:
async和defer不同之处是async加载完成后会自动执行脚本,defer加载完成后需要等待页面也加载完成才会执行代码
【动态创建script来加载-推荐】
function loadJS( url, callback ){
var script = document.createElement('script'),
fn = callback || function(){};
script.type = 'text/javascript';
//IE
if(script.readyState){
script.onreadystatechange = function(){
if( script.readyState == 'loaded' || script.readyState == 'complete' ){
script.onreadystatechange = null;
fn();
}
};
}else{
//其他浏览器
script.onload = function(){
fn();
};
}
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
//用法
loadJS('file.js',function(){
alert(1);
});
谷歌浏览器运行效果,script被动态创建在head中
建议大家可以封装成类库,单独引入。
该原理实现的也有很多不错的js类库可以使用,如LazyLoad.js,支持数组的形式引入,打开浏览器在network中可看到js是同步加载的
【XHR加载】
使用ajax方式加载
代码:
var xhr = new XMLHttpRequest;
xhr.open('get','file.js',true);
xhr.onreadystatechange = function(){
if( xhr.readyState == 4 ){
if( xhr.status >=200 && xhr.status < 300 || xhr.status == 304 ){
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
};
xhr.send(null);
- 8
【总结】
最好的方式还是使用动态创建script的方式加载,当动态创建script,浏览器会分配一个线程去下载src指向的资源,多个script也是同步下载的
转载于:https://www.cnblogs.com/telwanggs/p/11045773.html
js怎么动态加载js文件(JavaScript性能优化篇)相关推荐
- html动态加载js方法,原生JS实现动态加载js文件并在加载成功后执行回调函数的方法...
本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中 ...
- JS练习 -- 动态加载JS
文章目录 导读 通过CDN网站获取js的url url.script.src XHR加载.script.text 参考资料 导读 日期:2022-1-18 分析网页时,经常遇到一些库未加载的情况,比如 ...
- js插件动态加载js、css解决方案
最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...
- js jq 动态加载js文件
1.jquery方法 $.getScript("./test.js"); //加载js文件 $.getScript("./test.js",function() ...
- 原生js实现动态加载js文件?
一.写在前面 今天拼多多笔试题,题目如下: 实现一个动态加载函数function loadScript(src, attrs)返回Promise, 其中 src是脚本地址,attrs是脚本属性. 二. ...
- jquery 动态加载js插件
作用描述: 在H5页面直接加载插件,有时可能在js使用到时没有记载完成,如果不进行二次加载及判断,程序可能就此卡壳,无法继续运行.通过jquery动态多次判断加载,保证插件的完整加载及使用. 解决方案 ...
- JavaScript动态加载js文件
/********************************************************************** JavaScript动态加载js文件* 说明:* 之前没 ...
- JavaScript 之 动态加载JS代码或JS文件
2.动态加载JS文件 <script type="text/javascript"> function loadScript(url, callback) { var ...
- java加载js_[Java教程]javascript如何动态加载js文件
[Java教程]javascript如何动态加载js文件 0 2016-01-01 00:00:52 javascript如何动态加载js文件: 有时候我们需要根据需要动态加载js文件,本章节就简单介 ...
最新文章
- 《OpenCV3编程入门》学习笔记6 图像处理(一)线性滤波:方框滤波、均值滤波、高斯滤波
- 华为策略路由加等价路由_两个ISP接入路由,双路由接入华为S5700交换机,实施策略路由...
- Linux安装python3.6
- linux命令 — lsof 查看进程打开那些文件 或者 查看文件给那个进程使用
- leetcode412
- 过Postfix构建Exchange Server 2010邮件网关部署系列三:安装Exchange 2010先决性条件
- mysql查询语句4,MySQL(4):CRUD语句(2)——基本查询
- YBTOJ:最短时间(长链剖分、线段树)
- 多媒体计算机接口卡,多媒体技术基础 2.2多媒体接口卡 多媒体接口卡.docx
- MATLAB中的max函数的用法及含义
- Android UI控件之Gallery(拖动效果) --拖动式图片浏览
- crypto_policy_set_aes_cm_128_hmac_sha1_32/crypto_policy_set_aes_cm_128_hmac_sha1_80找不到
- VB.Net视频教程和VBA简单介绍下载
- Ubuntu20设置蓝牙
- BP神经网络整定PID
- 广州IT销售菜鸟总结精华
- 笔记本电脑共享WiFi
- PHP友情链接检测代码
- 计算机基础频率单位转换,hz换算(hz与秒单位换算)
- FreeRTOS STM32CubeMX port.c(483): error: A1586E: Bad operand types (UnDefOT, Constant) ...
热门文章
- unas基于_flunas
- python读取大文件内存不够_大型CSV文件(numpy)上的Python内存不足
- python读取csv文件_python配置文件的读取
- java父类静态 子类调用_在java 中 父类定义的静态方法 子类 调用时候 如何 知道 是哪个子类调用的...
- 计算机英语 考研 翻译,研究生英语翻译笔记
- 芯片电源引脚的电容选择
- 12002.i2ctools工具
- NEC协议——红外遥控的使用
- 数据结构及算法总结(概述)
- php位值,解决 PHP 中 usort 在值相同时改变原始位置的问题