工作踩坑之通过插入DOM引入JS

在工作中碰到了一个很奇怪的现象,直接访问测试所提供的环境,重复刷新使用了vue和elementUI的页面,会偶现页面错乱(一看见偶先就头大啊)。

通过控制台中,对网络中的element.js文件进行禁用,终于可以稳定复现错乱的页面,这个bug似乎和element.js有关系?

经过讨论和分析,初步推测是element.js还未执行就先执行了使用到elementUI的函数方法文件,导致页面错乱。简单来说,就是一个人还没学会英语就去看英文报纸,自然看出来的全是错误的。

先来看看代码是怎么写的:

在页面中,顶部是引入所需的js文件。

而底部则是执行该页面的函数方法文件。

如果js文件的引入顺序是按序执行的话,按理是不会出现页面错乱的问题的。

这时候,好奇的目光投向了element.js。这个文件他做了什么?

原来他是动态向DOM元素中插入JS文件!真凶就是他!

让我们先回忆一下script引入的方式和执行顺序:

  1. 直接在html中写script标签。由于HTML文档从上到下解析,因此脚本是按顺序执行的。

    <script src="a.js"></script>

  2. 使用ducument.write向html写入一个script标签。对于IE9以下的浏览器,采取的是内联脚本立即执行,外联脚本按序执行。其他的浏览器则是"尽力按顺序执行"

    document.write('<script src="a.js"></script>')

  3. 使用js代码动态插入到DOM中。这种情况根本不能保证脚本能按顺序执行。

    ini 复制代码
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);

结合element.js文件中的代码,这下真相大白了!直接访问该环境,脚本并不能保证按顺序执行,导致页面的脚本比element.js先执行,从而页面不认识elementUI导致页面错乱。

由于时间紧迫,没想到什么好的修订方案,最后还是删去引用element.js,并将全部涉及到的elementUI的页面全部在html顶部按顺序引用。

在此记录一下备忘~

相关推荐
安全系统学习1 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖1 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖1 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水2 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐2 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06272 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台2 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121382 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack3 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python