杭州设计师网站,镇江丹阳,wap手机商城网站源码,施工企业资质查询官网在性能优化中#xff0c;我们都知道#xff0c;async属性可以让script标签变得不阻塞HTML解析#xff0c;defer属性也有类似的功能#xff0c;但实际defer是会阻塞script解析的#xff08;用defer的话#xff0c;多个script会按顺序执行#xff0c;而async执行是无序的我们都知道async属性可以让script标签变得不阻塞HTML解析defer属性也有类似的功能但实际defer是会阻塞script解析的用defer的话多个script会按顺序执行而async执行是无序的谁下载的快执行谁使用async属性理论上讲是要比defer更快的。 用async属性有什么问题
感觉不太安全因为async会让多个script标签执行是无序的
实际测试async看看是否是危险的
随便用一个脚手架起项目vue或react都行build之后进入dist目录下用http-server起服务访问html如下手动改成async。
!doctype html
html lang
headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1link relicon href/favicon.icotitlehello-world/titlescript async src/js/chunk-vendors.f5ba3c0d.js/scriptscript async src/js/app.382b3f67.js/scriptlink href/css/app.2cf79ad6.css relstylesheet
/head
bodydiv idapp/div
/body
/html
用弱网访问看下的图很明显 app.382b3f67.js 要先下载完因为size小。 确认是否是 app.382b3f67.js 先执行 手动往2个js里面埋入log代码结果和预期一样app.382b3f67.js先执行 确认 chunk-vendors.f5ba3c0d.js 里面的代码是关键依赖比如是vue或react理论上讲应该是要报错的因为依赖后执行了但结果并没有报错。
结论
在webpack项目内可以放心对多个script标签使用async属性webpack已经对产物做好了兼容
webpack是如何实现兼容async的
分析打包出来的产物可以探知到webpack是如何实现的
产物1app.382b3f67.js 简化后的方便理解。
(function () {use strict;var __webpack_modules__ ({4629:(function (__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) {}),6949:(function (module) {})});!function () {// ...var chunkLoadingGlobal self[webpackChunkhello_world] self[webpackChunkhello_world] || [];chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));// .push 被改写chunkLoadingGlobal.push webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));}();var __webpack_exports__ __webpack_require__.O(undefined, [998], function () {return __webpack_require__(4629);})__webpack_exports__ __webpack_require__.O(__webpack_exports__);
})();
console.log(app.382b3f67.js)
产物2chunk-vendors.f5ba3c0d.js简化后的方便理解。
(self[webpackChunkhello_world] self[webpackChunkhello_world] || []).push([[998], {// ...
}]);
console.log(chunk-vendors.f5ba3c0d.js)
解释 1、app.382b3f67.js里面的关键代码webpack打包时的入口代码index.js比如new Vue()或root.render()被存放到了__webpack_require__(4629)里面每次打包数字会变不一定是4629 2、4629 没有立即被执行而是先存放好等依赖[998]准备好才执行
那app.382b3f67.js怎么知道依赖998已经准备好了呢 1、依赖[998]就是chunk-vendors.f5ba3c0d.js998被 .push 到了 self[webpackChunkhello_world] 里面这个push不是Array.push而是被改写过的我在上面写了注释具体是哪一行被改写了 2、改写的作用是可以通知到 app.382b3f67.js998依赖已经准备好了
由此可以得到结论 依赖未准备好时webpack打包时的入口代码index.js不会执行。 到这里还没完由上面的结论可以发现如果不做特殊处理我们几乎无法监控到webpack应用的白屏问题。
因为如果某个js资源网络问题丢失了index.js根本就不会执行意味着上报代码也不会执行。如果js执行报错那直接进程退出了上报代码也不会执行除非try catch了。
学习上
作为一个软件测试的过来人我想尽自己最大的努力帮助每一个伙伴都能顺利找到工作。所以我整理了下面这份资源现在免费分享给大家有需要的小伙伴可以关注【公众号开心螺蛳粉】自提 软件测试面试文档
我们学习必然是为了找到高薪的工作下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料并且有字节大佬给出了权威的解答刷完这一套面试资料相信大家都能找到满意的工作。 行动吧在路上总比一直观望的要好未来的你肯定会感谢现在拼搏的自己如果想学习提升找不到资料没人答疑解惑时请及时加入群1150305204里面有各种测试开发资料和技术可以一起交流哦。
