源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Script的加载方法小结

  • 时间:2021-07-28 04:37 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Script的加载方法小结
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。 [url=http://www.w3.org/TR/1999/REC-html401-19991224/interact/scripts.html]http://www.w3.org/TR/1999/REC-html401-19991224/interact/scripts.html[/url]  [url=http://www.1sucai.cn/upload/201101/20110112002729136.png][img]http://files.jb51.net/upload/201101/20110112002729239.png[/img] [/url] 但部分浏览器并不支持该属性。所以它不是个很好的跨浏览器解决方案。 3.动态加载
[url=http://www.w3help.org/zh-cn/causes/BX9013]动态引入的外部 JS 文件在各浏览器中的加载顺序不一致[/url] 有两点非常突出, 1.同样的动态加载代码,不同浏览器对动态加载进来的js,是否阻塞下条Script标签的表现是不一样的 [url=http://www.1sucai.cn/upload/201101/20110112002729686.png][img]http://files.jb51.net/upload/201101/20110112002729201.png[/img] [/url] 2.实现动态加载的那段代码顺序不同,对同一个浏览器来说,结果可能是非常迥异的, 如: [url=http://www.1sucai.cn/upload/201101/20110112002729968.png][img]http://files.jb51.net/upload/201101/20110112002729666.png[/img] [/url] [url=http://www.1sucai.cn/upload/201101/20110112002729616.png][img]http://files.jb51.net/upload/201101/20110112002729540.png[/img] [/url] 代码顺序的调换,IE的表现就不一样 所以,对动态加载脚本,需要重点关注的一个问题是,所动态加载的JS脚本的接口依赖问题。这个问题的解决方案也不复杂,既根据实现业务的需要跟踪所加载脚本的加载状态。加载状态的判断在IE下用readyState属性,非IE浏览器支持,脚本加载完成后的onload方法的调用。 业界优秀的延迟加载库 Ryan Grove 的LazeLoad [url=https://github.com/rgrove/lazyload]https://github.com/rgrove/lazyload[/url] Kyle Simpson 的 LABjs [url=http://labjs.com/]http://labjs.com/[/url]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部