出处：http://www.jb51.net/article/25981.htm

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 type="text/javascript">
var js = document.createElement("script");
js.src = '**.js';
document.getElementsByTagName("head")[0].appendChild(js);
</script>

这段代码创建了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/

转载于:https://www.cnblogs.com/sunshinetian/archive/2012/05/23/2515444.html

Script的加载方法小结相关推荐

  1. java web配置dll文件_JavaWeb项目中dll文件动态加载方法解析（详细步骤）

    相信很多做Java的朋友都有过用Java调用JNI实现调用C或C++方法的经历,那么Java Web中又如何实现DLL/SO文件的动态加载方法呢.今天就给大家带来一篇JAVA Web项目中DLL/SO ...

  2. xib文件的加载方法

    xib文件的加载方法 以UITableViewCell的cell为例 很多时候因为系统的cell无法满足我们的日常需求,我们都会自定义cell 因为cell的界面比较固定,所以通常都会选择用xib来描 ...

  3. react路由按需加载方法

    使用router4之后以前的按需加载方法require.ensure 是不好使了. 所以我们改用react-loadable插件做按需加载. 第一步: yarn add react-loadable ...

  4. iOS控制器与视图加载方法

    转载记录, 请看原文: 1. iOS中的各种加载方法(initWithNibName,loadNibNamed,initWithCoder,awakeFromNib等等)简单使用   http://w ...

  5. 中国国界九段线，单独加载方法和原始数据

    本文章提供中国国界九段线原始数据和加载方法 1.原始数据 中国国界九段线topojson格式数据.rar 中国国界九段线topojson格式数据.zip-Javascript文档类资源-CSDN下载 ...

  6. 架设KMS服务器流程启动加载方法

    架设KMS服务器流程 启动加载方法 架设KMS服务器流程--启动加载方法 以下操作 root 一.准备Centos服务器CentOS-8.4.2105 1.下载http://mirrors.163.c ...

  7. 本文章提供中国国界、国界十段线原始数据以及加载方法

     本文章提供中国国界九段线原始数据和加载方法 1.中国国界 完整数据 包括十段线 中国国界线(完整版 包括十段线) 2.原始数据 中国国界十段线topojson格式数据.rar 中国国界线topjso ...

  8. 一套可行的PFC力控制实现循环加载方法

    一.基本原理 PFC中的计算元素包括ball.clump.wall,其中ball和clump是参与力学计算的,也就是说可以由接触力来计算其速度位移.但wall是不可以进行力学计算的,只能使用位移进行控 ...

  9. Golang toml配置文件加载方法

    一.toml 配置文件加载方法 Golang可以通过加载toml文件的方式,减少代码移植或环境变更时对代码的修改量. 有这样一份toml文件: 我们需要定义一个结构体类型(Config)来映射配置文件 ...

最新文章

  1. J2EE的十三个规范
  2. GitHub被“中介”攻击了？啥是中间人攻击？
  3. linux: convmv =-======pkgs.org
  4. HttpURLConnection 中Cookie 使用
  5. php 流（Stream）
  6. 关于配置中心的几个问题
  7. 安卓调用系统语音识别功能全解（谷歌语音服务）：获取识别结果，使用语音识别进行搜索。
  8. 网易云音乐会员下载正常音乐格式
  9. PHP根据经纬度计算距离
  10. 查看微信小程序的累计独立访客（UV）
  11. h5聊天页面 jquery_h5聊天室web端(仿微博、微信)|h5仿微信网页端|仿微信界面弹窗...
  12. 【白苹果系统镜像】macOS Big Sur 11.6.6正式版(20G608)镜像
  13. Linux内核深入理解定时器和时间管理（6）：x86_64 相关的时钟源（kvm-clock，tsc，acpi_pm，hpet）
  14. Docker 部署深度学习 运行deeplabV3
  15. 什么是二级指针和为什么要用二级指针
  16. 无线ap死机无法联接服务器,无法连接无线接入点 这几步帮你轻松解决无线连接问题...
  17. CUPS之gutenprint生成ppd文件
  18. SDN控制器的功能及作用—Vecloud
  19. 地理坐标系介绍：国家2000、西安80、WGS84、火星GCJ02、百度BD09
  20. 电子行业求职，技术才是硬道理

热门文章

  1. Tensorflow2.0数据和部署（三）——基于Tensorflow数据服务的数据管道
  2. 三个优秀的PyTorch实现语义分割框架
  3. excel对比_EXCEL对比图的用法
  4. 取消hover效果_CSS3 transition过渡动画效果
  5. iPhone开发知识和项目
  6. 如何用shell脚本读取配置文件
  7. Android程序的退出
  8. kettle-连接控件
  9. Windows 查看端口使用情况
  10. Windows Server 2012 R2 VDI系列（八）—发布RemoteDesktop