Script的加载方法小结

2024-11-03 14:24:49

1.静态加载
CSS，图片资源文件在页面渲染过程中可以并行下载，不会阻塞。在IE8，FF下，也可以支持JS的并行下载。尽管页面的JS下载加速了，但是JS对页面渲染的阻塞还是依然存在的，只有JS加载完毕了，页面的剩余部分才能继续渲染。放在Head部分的Script是最为恶劣的，因为对页面来说，Head部分是require的，是后部分所必须的，Head部分不加载完毕，Body部分不会开始解析，Body解析之前，页面是空白的。静态Script放到页面的哪部分来说都是阻塞，从浏览器实现的角度来说很好理解，因为JS代码中完全有可能修改页面元素影响Dom结构。因为浏览器对JS行为的不可预知，所以只好等前面的Script加载完毕后再继续渲染。所以最佳实践往往是说将Script放到页面底部</body>附近。
JS加载对前台性能的影响，雅虎优化原则之一是减少Http请求数，压缩JS，合并JS，减少JS数。
若是业务上有很多独立模块化的JS需要加载，可以考虑在线打包的方案。

2。延迟加载
W3C标准HTML4.01给Script标签定义了一个defer属性，指明该JS不会改变Dom的content，浏览器可继续解析和渲染，无需阻塞在该Script。
http://www.w3.org/TR/1999/REC-html401-19991224/interact/scripts.html

但部分浏览器并不支持该属性。所以它不是个很好的跨浏览器解决方案。

3.动态加载

代码如下:

这段代码创建了script标签，并插入这条标签到文档中。关键在于，这个脚本的加载时异步的，不会影响页面渲染的进程，不会阻塞页面内容的展示。这样的方式尽管不会阻塞页面资源的加载，但却可能会阻塞其他的script脚本，不同浏览器在这点上的表现是有非常大的差异的，参看这篇文章动态引入的外部 JS 文件在各浏览器中的加载顺序不一致
有两点非常突出，

1.同样的动态加载代码，不同浏览器对动态加载进来的js，是否阻塞下条Script标签的表现是不一样的

2.实现动态加载的那段代码顺序不同，对同一个浏览器来说，结果可能是非常迥异的，
如：

代码顺序的调换，IE的表现就不一样

所以，对动态加载脚本，需要重点关注的一个问题是，所动态加载的JS脚本的接口依赖问题。这个问题的解决方案也不复杂，既根据实现业务的需要跟踪所加载脚本的加载状态。加载状态的判断在IE下用readyState属性，非IE浏览器支持，脚本加载完成后的onload方法的调用。

业界优秀的延迟加载库

Ryan Grove 的LazeLoad https://github.com/rgrove/lazyload
Kyle Simpson 的 LABjs http://labjs.com/

if ($ != jQuery) {
$ = jQuery.noConflict();
}

Script的加载方法小结

1.静态加载 CSS,图片资源文件在页面渲染过程中可以并行下载,不会阻塞.在IE8,FF下,也可以支持JS的并行下载.尽管页面的JS下载加速了,但是JS对页面渲染的阻塞还是依然存在的,只有JS加载完毕了,页面的剩余部分才能继续渲染.放在Head部分的Script是最为恶劣的,因为对页面来说,Head部分是require的,是后部分所必须的,Head部分不加载完毕,Body部分不会开始解析,Body解析之前,页面是空白的.静态Script放到页面的哪部分来说都是阻塞,从浏览器实现的角度来说很好理解
async和DOM Script文件加载比较

目前我用demo.js作为执行文件操作.代码: var now = function() { return +(new Date()); } var t_s = now(); while(now() - t_s < 2000) { } 用sleep.php作为请求文件操作.代码: <?php sleep(3); echo 'var bb'; ?> 1. 一般script标签加载 <script src="demo.js"></script> &
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数

为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在"sourceController.js"文件内. function sourceController(){ var root = ""; var cssCount = 0; // css加载计数器 var jsCount = 0; // js加载计数器 this.callfunc = null; // 回调函数 this.
JS 插件dropload下拉刷新、上拉加载使用小结

前端展示php代码: <?php header("Content-type: text/html; charset=utf-8"); include_once("./config.php"); // 初始显示界面数据获取 $data = file_get_contents(URL."/interfaces/page.php?paging=1"); // echo $data;die; $data = json_decode($data);
使用Browserify来实现CommonJS的浏览器加载方法

Nodejs的模块是基于CommonJS规范实现的,可不可以应用在浏览器环境中呢? var math = require('math'); math.add(2, 3); 第二行math.add(2, 3),在第一行require('math')之后运行,因此必须等math.js加载完成.也就是说,如果加载时间很长,整个应用就会停在那里等.这对服务器端不是一个问题,因为所有的模块都存放在本地硬盘,可以同步加载完成,等待时间就是硬盘的读取时间.但是,对于浏览器,这却是一个大问题,因为模块都放在服务
UIImage加载图片Images.xcassets加载方法的影响

UIImage加载图片的方式以及Images.xcassets对于加载方法的影响图片缓存根据是否将创建好的对象缓存入系统内存,有两类创建UIImage对象的方法可选: 缓存:+ imageNamed:,只需传入文件名.扩展名(可选)即可. 不缓存:+ imageWithContentsOfFile:,必须传入文件的全名(全路径+文件名). 注意,对于有缓存功能的方法来说,其创建对象的步骤如下: 根据图片文件名在缓存池中查找特定的UIImage对象,入存在,将这个对象返回. 如果不存在,则从b
JavaWeb项目中dll文件动态加载方法解析（详细步骤）

相信很多做Java的朋友都有过用Java调用JNI实现调用C或C++方法的经历,那么Java Web中又如何实现DLL/SO文件的动态加载方法呢.今天就给大家带来一篇JAVA Web项目中DLL/SO文件动态加载方法的文章. 在Java Web项目中,我们经常会用到通过JNI调用dll动态库文件来实现一些JAVA不能实现的功能,或者是一些第三方dll插件.通常的做法是将这些dll文件复制到 %JAVA_HOME%\jre\bin\ 文件夹或者应用中间件(Tomcat|Weblogic)的bin
jQuery Ajax页面局部加载方法汇总

在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考. 例 $.ajax({ url: "hotelQuery!queryHotelByCity.action", type: "post", dataType: "html", data: "queryHotel.city="+cityobj.value+"&
jquery ajax局部加载方法详解(实现代码)

在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考. 例 $.ajax({ url: "hotelQuery!queryHotelByCity.action", type: "post", dataType: "html", data: "queryHotel.city="+cityobj.value+"&
vue element-ui table表格滚动加载方法

添加全局注册事件,用来监听滚动事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.

Script的加载方法小结

相关推荐

随机推荐