红宝书：在html中使用script章节总结

qiangdada 发布于2019-08-29 12:52 / 2801人阅读

摘要：在中插入的方法外部脚本，内嵌脚本属性异步脚本可选。表示应该立即下载脚本但不应妨碍页面中的其他操作比如下载其他资源或等待加载其他脚本。一定会在页面的事件前执行但可能会在事件触发之前或之后执行。不同点执行阶段不同。

浏览器解析器从上至下进行解析，遇到script标签，解析停止，直至脚本加载执行完毕。

在html中插入script的方法：外部脚本，内嵌脚本

script属性：
async（异步脚本）:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。一定会在页面的 load 事件前执行,但可能会在 DOMContentLoaded 事件触发之前或之后执行。
defer（延迟脚本）:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。延迟到再加载，当含有两个defer的script标签，理论上会按照顺序加载，先于DOMContentLoaded事件，实际上有可能会乱序（不靠谱），也不一定会先于DOMContentLoaded事件。

蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。
async和defer
共同点：net阶段都是异步的。只适用于外部脚本。
不同点：执行阶段不同。
async更适合它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics

浏览器在遇到标签时才开始呈现内容

其他大佬关于这块内容写的文章

网站为什么 JS 调用尽量放到网页底部？ https://www.zhihu.com/questio...
JavaScript 的性能优化：加载和执行
https://www.ibm.com/developer...
JavaScript 启动性能瓶颈分析与解决方案 https://zhuanlan.zhihu.com/p/...
Effective前端7：加快页面打开速度 https://zhuanlan.zhihu.com/p/...
《浏览器的工作原理：新式网络浏览器幕后揭秘》https://www.html5rocks.com/zh...

GPU云服务器云服务器在php中使用组件在VBScript中使用类 webrtc在webview中使用问题在浏览器中使用webrtc

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

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

红宝书：在html中使用script章节总结

摘要：在中插入的方法外部脚本，内嵌脚本属性异步脚本可选。表示应该立即下载脚本但不应妨碍页面中的其他操作比如下载其他资源或等待加载其他脚本。一定会在页面的事件前执行但可能会在事件触发之前或之后执行。不同点执行阶段不同。浏览器解析器从上至下进行解析，遇到script标签，解析停止，直至脚本加载执行完毕。在html中插入script的方法：外部脚本，内嵌脚本 script属性：async（异步...

Backache 2019-08-20 17:41 评论0 收藏0
红宝书：在html中使用script章节总结

摘要：在中插入的方法外部脚本，内嵌脚本属性异步脚本可选。表示应该立即下载脚本但不应妨碍页面中的其他操作比如下载其他资源或等待加载其他脚本。一定会在页面的事件前执行但可能会在事件触发之前或之后执行。不同点执行阶段不同。浏览器解析器从上至下进行解析，遇到script标签，解析停止，直至脚本加载执行完毕。在html中插入script的方法：外部脚本，内嵌脚本 script属性：async（异步...

hss01248 2019-08-01 17:06 评论0 收藏0
ES2018 学习笔记（3）标识符

摘要：属性名属性访问器属性两种表示法点表示法，例如方括号表示法，例如其中，点表示法中要求之后必须跟着。回看上面提到的标识符的定义任何点表示法，都能转换成方括号表示法反之，则行不通。总结属性名不是标识符。以下内容来至 es2017 语言规范和 javascript 高级程序设计（第三版）起源：标识符的定义在红宝书 3.1.2 章节中，对标识符做了如下定义： An identifier i...

roland_reed 2019-08-23 11:39 评论0 收藏0
JavaScript红宝书笔记（三）---函数特性

摘要：接下来的文章更新以红宝书章节更新，内容过多分若干篇文章来写，标题会清晰表明是哪一章节，大家一起学习进步，谢谢大家的支持 1.函数参数的特性： function doAdd(num1, num2) { arguments[1] = 10; alert(arguments[0] + num2); } arguments对象中的值会自动反映到对应的命名参数，所以修改 argu...

沈建明 2019-08-23 18:01 评论0 收藏0