切图崽的自我教养－加载JS的罕见体式格局

2019年8月30日 99次阅读 来源: 大切图崽

媒介

我就想随意找个处所放东西不行吗？

看他人写的代码，<head>中写原生js无一例外加了window.onload, jquery示例中无一例外的加了 $(function(){}) But why? 今后这两尊神奇的大佛让我怕惧了良久，本日写的博文，就是为了崇尚科学破除迷信，撕下’划定规矩’ 的神奇面纱. 而这神奇的面纱，实质就是浏览器加载js的体式格局

总的来说，浏览器加载js平常就这么几种体式格局:

  • 壅塞加载

  • 异步加载

  • 耽误加载

壅塞加载

<head>
    ...
    <script src=xx.js ></script>  
    ...
</head>

壅塞加载是浏览器最罕见的加载js的体式格局，不论这条语句出现在页面中的什么位置， 浏览器剖析到该标签时， 会梗塞下载(即串行)xx.js,  同时位于该标签以后的资本下载和剖析悉数挂起. xx.js下载完成以后马上实行，实行终了以后，才最先后续资本的下载和剖析

异步加载

<script src=xx.js async=”async”></script>

不论这条语句出现在页面中的什么位置， 浏览器剖析到该标签时， 会非梗塞下载(即并行)xx.js, (非梗塞下载即该资本在下载的过程当中不影响后续资本的下载和剖析), 下载完成以后马上实行

耽误加载

<script src=xx.js defer="defer"></script>

不论这条语句出现在页面中的什么位置， 浏览器剖析到该标签时， 会非梗塞下载(即并行)xx.js, (非梗塞下载即该资本在下载的过程当中不影响后续资本的下载和剖析), 下载完成以后挂起，比及DOMContentLoaded事宜完成以后再实行

动态插进去Script节点

同异步加载

结语

通过了解了罕见的几种加载js的要领，媒介中提出的题目置信人人已有了答案

为何如果在<head>中写内联js平常会云云开首:

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

由于$(function(){})是DOMContentLoaded回调,示意DOM树已构建完成.window.onload 是全部页面资本加载完成的回调。总而言之，只要先构建了对应的DOM,你才能用剧本去操纵它.所以这就是如果在<head>中写内联js不加window.onload常常报错的缘由，平常由于找不到对应的DOM

这也是我们为何平常把外链Js放在底部举行加载:

  • 确保了CSS和HTML加载终了,主要内容已显现给用户

  • 确保了CSS和HTML加载终了,一切DOM处于可操纵状况

    原文作者：大切图崽
    原文地址: https://segmentfault.com/a/1190000005874664
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞