APP开发实现无阻塞加载的方法以及代码，深圳APP开发公司提醒无阻塞加载，减少JavaScript文件大小，并限制HTTP请求数在功能丰富的Web应用或大型网站上并不总是可行。Web应用的功能越丰富，所需要的JavaScript代码就越多，尽管下载单个较大的JavaScript文件只产生一次HTTP请求，却会锁死浏览器的一大段时间。为避免这种情况，需要通过一些特定的技术向页面中逐步加载JavaScript文件，这样做在某种程度上来说不会阻塞浏览器。无阻塞脚本的秘诀在于，在页面加载完成后才加载JavaScript代码。这就意味着在window对象的onload事件触发后再下载脚本。有多种方式可以实现这一效果。首先，将所有的<script>标签放到页面底部，也就是</body>闭合标签之前，这能确保在脚本执行也面前已经完成渲染。
可以参考http://caniuse.com/#search=defer。在其他不支持defer属性的浏览器中，defer属性会被直接忽略，因此<script>标签会以默认的方式处理，也就是说会造成阻塞。如果目标浏览器支持，那么这仍然是一个有用的解决方案，例如：
01 < script type=" text/ javascript" src=" script1. js" defer></ script>
【代码 9- 1】 01 <! DOCTYPE html> 02 < html> 03 < head> 04 < title> 将 所有 的 script 标签 放到 页面 底部</ title> 05 < link rel=" dns- prefetch" href="// xxx. test. com"> 06 < meta content=" width= device- width, initial- scale= 1. 0, maximum- scale= 1. 0, user- scalable= no" name=" viewport"> 07 < meta content=" yes" name=" apple- mobile- web- app- capable"> 08 < meta content=" black" name=" apple- mobile- web- app- status- bar- style"> 09 < meta name=" format- detection" content=" telephone= no"> 10 < link rel=" stylesheet" type=" text/ css" href=" css/ bootstrap. min. css"> 11 < link rel=" stylesheet" type=" text/ css" href=" css/ main. css"> 12 </ head> 13 < body> 14 <!-- 页 头 --> 15 < header class=" header"> 16 <!-- 这里 是 页 头 的 结构 代码 -->
17 </ header> 18 <!-- 主体 内容 --> 19 < section class=" category"> 20 <!-- 这里 是 主体 内容 的 结构 代码 --> 21 </ section> 22 <!-- 底部 --> 23 < footer> 24 <!-- 这里 是 底部 的 结构 代码 --> 25 </ footer> 26 < script type=" text/ javascript" src=" js/ bootstrap. min. js"></ script> 27 < script type=" text/ javascript"> 28 (function(){ 29 var s = window. localStorage || window. sessionStorage; 30 //这里 插入 script 代码 31 })(); 32 </ script> 33 </ body> 34 </ html>
其次，<script>标签有一个扩展属性defer。defer属性指明本元素所含的脚本不会修改DOM，因此代码能安全地延迟执行。目前，defer属性的浏览器支持情况如图9.15所示，可以参考http://caniuse.com/#search=defer。在其他不支持defer属性的浏览器中，defer属性会被直接忽略，因此<script>标签会以默认的方式处理，也就是说会造成阻塞。如果目标浏览器支持，那么这仍然是一个有用的解决方案，例如：01 < script type=" text/ javascript" src=" script1. js" defer></ script>
带有defer属性的<script>标签可以放置在文档的任何位置。对应的JavaScript文件将在页面解析到<script>标签时开始下载，但不会执行，直到DOM加载完成，即onload事件触发前才会被执行。当一个带有defer属性的JavaScript文件下载时，它不会阻塞浏览器的其他进程，因此这类文件可以与其他资源文件一起并行下载。此外，HTML5为<script>标签定义了一个新的扩展属性：async。它的作用和defer一样，能够异步加载和执行脚本，不会因为加载脚本而阻塞页面的加载。例如：
01 < script type=" text/ javascript" src=" async. js" async=" async"></
async"></ script>
async属性规定该脚本相对于页面的其余部分异步执行，一旦脚本可用，就会异步执行。但是有一点需要注意，在有async的情况下，JavaScript脚本一旦下载好了就会执行，所以很有可能不是按照原来的顺序执行的。如果JavaScript脚本前后有依赖性，那么使用async就很有可能出现错误。因此，在使用过程中，需要额外小心。async是HTML5中的新属性，其浏览器支持情况如图9.16所示，
可以参考http://caniuse.com/#search=async。好了，APP开发公司本文关于“APP开发实现无阻塞加载的方法以及代码”就分享到这里，谢谢关注，博纳网络编辑整理。
可以参考http://caniuse.com/#search=async。好了，APP开发公司本文关于“APP开发实现无阻塞加载的方法以及代码”就分享到这里，谢谢关注，博纳网络编辑整理。当前文章链接：/construction/appkaifa/3521.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
