加载第三方Js减少页面渲染时间

最新推荐文章于 2024-07-18 18:16:05 发布

KunQian_smile

最新推荐文章于 2024-07-18 18:16:05 发布

阅读量971

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_24892029/article/details/74518865

版权

本文探讨了如何通过异步加载和预加载技术减少第三方JS对页面渲染时间的影响。介绍了动态创建script标签实现异步加载、使用async和defer属性预加载JS，以及利用iframe避免阻塞onload事件的友好iframe方法。强调了在选择加载策略时要考虑兼容性和业务需求。

摘要由CSDN通过智能技术生成

如果你的网站上面有很多第三方JS代码，那么“下载速度的不可控”很有可能导致你的网站会被拖慢。因为JS在执行的时候会影响到页面的DOM和样式等情况。浏览器在解析渲染HTML的时候，如果解析到需要下载文件的script标签，那么会停止解析接下来的HTML，然后下载外链JS文件并执行。等JS执行完毕之后才会继续解析剩下的HTML。这就是所谓的『HTML解析被阻止』。浏览器解析渲染页面的抽象流程图如下：

（1）异步加载

异步加载JS的方法很多，最常见的就是动态创建一个script标签，然后设置其src和async属性，再插入到页面中。这里有个DEMO。实际操作的代码如下：

<script>
function loadScript(url) {
    var scrs = document.getElementsByTagName('script');
    var last = scrs[scrs.length - 1];
    var scr = document.createElement('script');
    scr.src = url;
    scr.async = true;
    la