切图崽的自我修养－页面加载Js的常见方式

前言

我就想随便找个地方放东西不行吗？

看别人写的代码，中写原生js无一例外加了window.onload, jquery示例中无一例外的加了 $(function(){}) But why? 从此这两尊神秘的大佛让我畏惧了很久，今天写的博文，就是为了崇尚科学破除迷信，撕下'规则' 的神秘面纱. 而这神秘的面纱，本质就是浏览器加载js的方式

总的来说，浏览器加载js通常就这么几种方式:

1. 阻塞加载

2. 异步加载

3. 延迟加载

阻塞加载

    ...    ...

阻塞加载是浏览器最常见的加载js的方式，不管这条语句出现在页面中的什么位置， 浏览器解析到该标签时， 会堵塞下载(即串行)xx.js,  同时位于该标签之后的资源下载和解析全部挂起. xx.js下载完成之后立刻执行，执行完毕之后，才开始后续资源的下载和解析

异步加载

不管这条语句出现在页面中的什么位置， 浏览器解析到该标签时， 会非堵塞下载(即并行)xx.js, (非堵塞下载即该资源在下载的过程中不影响后续资源的下载和解析), 下载完成之后立即执行

延迟加载

不管这条语句出现在页面中的什么位置， 浏览器解析到该标签时， 会非堵塞下载(即并行)xx.js, (非堵塞下载即该资源在下载的过程中不影响后续资源的下载和解析), 下载完成之后挂起，等到DOMContentLoaded事件完成之后再执行

动态插入Script节点

同异步加载

结语

通过了解了常见的几种加载js的方法，前言中提出的问题相信大家已经有了答案

为什么如果在中写内联js一般会如此开头:

window.onload＝function(){...}

因为window.onload是DOMContentLoaded回调,表示DOM树已经构建完成.只有先构建了对应的DOM,你才能用脚本去操作它.所以这就是如果在中写内联js不加window.onload经常报错的原因，通常因为找不到对应的DOM

这也是我们为什么通常把外链Js放在底部进行加载:

1. 确保了CSS和HTML加载完毕,主要内容已经呈现给用户

2. 确保了CSS和HTML加载完毕,所有DOM处于可操作状态

关键字：html, JavaScript, 下载, 加载

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！