您当前位置:网站首页 > 网站建设 > 正文

网站访问延迟JSt非阻塞资源加载分析

作者:赵军 浏览次数:162

  首先,对于阻塞渲染的JavaScript,应该将它放置在页面body的底部,为什么呢?

  JavaScript可以查询和操作DOM和CSSOM,正如前面介绍的,HTML解析过程中构建DOM,当遇到JavaScript就停止DOM构建执行JavaScript,如果被执行的JavaScript是放置在head附近,那么很可能要被操作或者查询的DOM还没有构建到DOM当中。

  而对于,非阻塞渲染的JavaScript,我们应该采用异步的方式加载,如下:

  

 

  方式一:即阻塞的JavaScript,HTML解析过程中遇到script标签,发出网络请求获取script.js,在网络请求返回后,解析并执行script.js,然后浏览器继续HTML解析。

  方式二:async,完全的异步操作,HTML解析遇到该标签后,发出网络请求,但不阻止HTML解析和其后面的渲染操作,当JavaScript请求返回后立刻执行,且不等待HTML解析或其他操作的完成。所以,如果脚本中有DOM操作,就并不适合。比较适合的场景是Google Analytics。

  方式三:defer,HTML的解析和对JavaScript资源的网络请求是并行的,但它会等待HTML解析完成之后,才执行脚本。

广告
大连网龙网络科技有限公司 版权所有 辽ICP备14006349号
电话:400 - 048 - 0001 在线QQ客服:169*589*5999
Copyright © 2009-2015, 大连网龙科技, Inc.All Rights Reserved.