切图崽的自我修养－加载JS的常见方式

pumpkin9 发布于2019-08-01 15:25 / 3148人阅读

摘要：总而言之，只有先构建了对应的你才能用脚本去操作它所以这就是如果在中写内联不加经常报错的原因，通常因为找不到对应的这也是我们为什么通常把外链放在底部进行加载确保了和加载完毕主要内容已经呈现给用户确保了和加载完毕所有处于可操作状态

前言

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

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

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

阻塞加载

异步加载

延迟加载

阻塞加载


    ...
      
    ...

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

异步加载

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

延迟加载

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

动态插入Script节点

同异步加载

结语

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

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

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

因为$(function(){})是DOMContentLoaded回调,表示DOM树已经构建完成.window.onload 是整个页面资源加载完成的回调。总而言之，只有先构建了对应的DOM,你才能用脚本去操作它.所以这就是如果在中写内联js不加window.onload经常报错的原因，通常因为找不到对应的DOM

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

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

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

云服务器 GPU云服务器切图崽常见的数据存储方式 js常见的数据类型 ddos常见攻击方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49899.html

切图崽的自我修养－加载JS的常见方式

摘要：总而言之，只有先构建了对应的你才能用脚本去操作它所以这就是如果在中写内联不加经常报错的原因，通常因为找不到对应的这也是我们为什么通常把外链放在底部进行加载确保了和加载完毕主要内容已经呈现给用户确保了和加载完毕所有处于可操作状态前言我就想随便找个地方放东西不行吗？看别人写的代码，中写原生js无一例外加了window.onload, jquery示例中无一例外的加了 $(funct...

王军 2019-08-19 18:42 评论0 收藏0
切图崽的自我修养－优化图片加载流程

摘要：前言优化又是优化切图崽们作为整个应用的纽带，连接着用户行为和机器性能而优化的最终意义，在于在这两者之间取得一个最佳的平衡点对于图片资源的加载来说，更是如此今天我们就来简单说说，项目开发中常见的图片加载优化方式预加载遮罩大法我们经常用中实际上前言优化！又是优化！切图崽们作为整个web应用的纽带，连接着用户行为和机器性能. 而优化的最终意义，在于在这两者之间取得一个最佳的平衡点. ...

ygyooo 2019-08-29 10:57 评论0 收藏0
切图崽的自我修养－优化图片加载流程

摘要：前言优化又是优化切图崽们作为整个应用的纽带，连接着用户行为和机器性能而优化的最终意义，在于在这两者之间取得一个最佳的平衡点对于图片资源的加载来说，更是如此今天我们就来简单说说，项目开发中常见的图片加载优化方式预加载遮罩大法我们经常用中实际上前言优化！又是优化！切图崽们作为整个web应用的纽带，连接着用户行为和机器性能. 而优化的最终意义，在于在这两者之间取得一个最佳的平衡点. ...

AaronYuan 2019-08-19 18:44 评论0 收藏0
切图崽的自我修养－优化图片加载流程

摘要：前言优化又是优化切图崽们作为整个应用的纽带，连接着用户行为和机器性能而优化的最终意义，在于在这两者之间取得一个最佳的平衡点对于图片资源的加载来说，更是如此今天我们就来简单说说，项目开发中常见的图片加载优化方式预加载遮罩大法我们经常用中实际上前言优化！又是优化！切图崽们作为整个web应用的纽带，连接着用户行为和机器性能. 而优化的最终意义，在于在这两者之间取得一个最佳的平衡点. ...

xiaochao 2019-08-01 15:26 评论0 收藏0
切图崽的自我修养－使用模块化JS

摘要：之前的闭包也好，自执行函数也好，都是模块化的一些尝试，直到规范推出之后，模块化才真正迅猛发展起来。因为有了模块化的概念，才有了按需加载的概念。前言我们来玩乐高积木吧模块化Js已经成为了老生常谈，不过在JavaScript设计之初，由于定位的问题并没有提供类的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码。之前的闭包也好，自执行函数也好，都是模块化的一...

littleGrow 2019-08-19 18:43 评论0 收藏0