将CSS添加到JavaScript文件并动态加载到HTML头标记对性能有效吗？

Question

如果在一个网站中，我在主体的最后添加了一个JavaScript，并向该JavaScript添加了大量的CSS，当页面被加载并且我的JavaScript文件被解析时，动态地将其添加到HTML页面的头部，该文件驻留在HTML页面的末尾，整个页面加载后，这是否会减慢页面速度？

由于我的CSS代码超过1000行（unminified），我不想外部CSS（尽管它被缓存），因为某些原因。

Answer 1

不是。它不会减慢页面的速度，因为页面基本上已经完成加载所有HTML和其他CSS。

随着HTML和CSS的下载，浏览器将构建DOM模型和CSSOM。到达脚本的时候，最后，除了以JavaScript添加结尾之外，它们大部分都是完整的。

我从重新阅读你的问题中得到的结论是，你打算通过运行在页面末尾的JavaScript加载所有的CSS。可能与您有关的问题是您添加的CSS将开始修改页面。潜在的问题可能会使页面跳转一点，闪光颜色，更改字体等，具体取决于您添加的CSS所做的操作。