引入外部js文件放在body上面的话会阻塞dom的渲染该如何解决

最新推荐文章于 2024-02-09 23:30:28 发布

奋斗的博意志

最新推荐文章于 2024-02-09 23:30:28 发布

阅读量349

点赞数 2

原文链接：https://blog.csdn.net/weixin_45704555/article/details/120091907

版权

script优化 DOM渲染异步加载 defer async

关键词由CSDN通过智能技术生成

①. 改变script标签的放置位置。最好将其丢在body标签的最后面，即放在</ body>标签的前面，这种方式不会影响浏览器的DOM渲染，会让页面处理执行完后才去执行它

②. 同步转异步。浏览器允许脚本异步加载，这种方式可以让 script 标签继续放在head头部使用async与defer，异步就是 script 标签打开defer或async属性，脚本就会异步加载。浏览器渲染引擎遇到这一行命令，就会开始下载外部脚本，在下载的同时渲染引擎会直接执行后面的命令。下面是两种异步加载的语法:


<script src="./1.js" async></script>
<script src="./1.js" defer></script>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

奋斗的博意志

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

JS阻塞渲染，这么多年我理解错啦？

发果叁

06-02

1301

大家好，我卡颂。在中文社区，这么多年一直流传一个说法：线程负责执行，渲染线程负责渲染，这两者是互斥的，所以执行时会阻塞渲染。但随着使用的增多，逐渐开始怀疑以上说法。本文会以实际案例来解释为什么阻塞渲染。在讲解线程与线程互斥的文章中，通常会列出渲染进程包含的线程，比如：渲染线程引擎线程事件触发线程定时触发器线程请求线程等但是，我们以百度的搜索页举例，打开面板开启录制：上图录制结果中：对应线程的任务记录，用户输入、网络、设备相关事件都与他相关记录光栅化线程池任务、记录合成位图的任务、记录合成线程的任务执行，以上

页面渲染时js阻塞的解决方法

aizou6838的博客

03-19

3884

一般地，一个包含外部样式表文件和外部脚本文件的HTML载入和渲染过程是这样的：浏览器下载HTML文件并开始解析DOM。遇到样式表文件link[rel=stylesheet]时，将其加入资源文件下载队列，继续解析DOM。遇到脚本文件时，暂停DOM解析并立即下载脚本文件。下载结束后立即执行脚本，在脚本中可访问当前<script>以上的DOM。脚本执行结束，...

参与评论您还未登录，请先登录后发表或查看评论

js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？

huyao的博客

07-30

1052

1. css加载不会阻塞DOM树的解析 2. css加载会阻塞DOM树的渲染 3. css加载会阻塞后面js语句的执行因此，为了避免让用户看到长时间的白屏时间，我们应该尽可能的提高css加载速度，比如可以使用以下几种方法: 1.使用CDN(因为CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间) 2.对css进行压缩(可以用很多打...

关于js和css是否阻塞dom解析和渲染

Amethyst的博客

11-27

2906

关于css和js是否会阻塞DOM解析和执行通常我们把script标签放在body尾部，link标签放在head头部，通过CDN引入第三方库时，放在link标签前面概括 CSS不会阻塞DOM解析，但是会阻塞DOM渲染，严谨一点则是CSS会阻塞render tree的生成，进而会阻塞DOM的渲染 JS会阻塞DOM解析 CSS会阻塞JS的执行浏览器遇到<script>标签且没有defer或async属性时会触发页面渲染 Body内部的外链CSS较为特殊，会形成FOUC(样式闪烁)现象，请慎用

页面加载的过程中，JS 文件是不是一定会阻塞 DOM 和 CSSOM 的构建？

zz130428的博客

05-16

843

JavaScript阻塞DOM和CSSOM的构建的情况主要集中在以下两个方面： JavaScript文件被放置在head标签内部当JavaScript文件被放置在head标签内部时，浏览器会先加载JavaScript文件并执行它，然后才会继续解析HTML文档。因此，如果JavaScript文件过大或服务器响应时间过长，就会导致页面一直处于等待状态，进而影响DOM和CSSOM的构建。

JS 与 CSS 是否阻塞 DOM 的渲染和解析

Darlingmi的博客

07-18

892

关于 JS 与 CSS 是否阻塞 DOM 的渲染和解析

Dom-manipulation-practice-simple-:这只是在学习如何使用外部JS文件来操作DOM，以及如何使用HTML中的script标签进行链接。

04-02

例如，可以在`<head>`或`<body>`的底部添加如下代码来引入名为`script.js`的外部JS文件： ```html <script src="path/to/script.js"> ``` 这里的`src`属性指定了JS文件的路径。将脚本放在`<head>`中可以立即执行，...

CSS 会阻塞 DOM 解析吗？

sisterAn的博客

08-05

1421

浏览器的渲染浏览器的渲染流程如下：图：WebKit 主流程图：Mozilla 的 Gecko 呈现引擎主流程（3.6）结合上图，一个完整的渲染流程如下：渲染进程解析 HTML 内容转换为能够读懂的 DOM 树结构，解析 CSS 为 CSSDOM 把 DOM 和 CSSOM 结合起来生成渲染树(Render Tree) 渲染树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标把渲染树展示到屏幕上。再下一步就是绘制，即遍历渲染树，并使用UI后端层绘制每个节点。值得注意的是：

js阻塞dom的构建 && CSS通过js来阻塞DOM的构建 && async、defer

qq_36303110的博客

04-21

1175

js阻塞dom的构建 && CSS通过js来阻塞DOM的构建 JavaScript脚本由于可能会修改DOM，因此会阻塞DOM的构建，这一点我们都知道；而CSS并不会操作或者改变DOM，因此通常我们认为CSS不会影响DOM的构建，只会影响后续的布局、绘制等过程，即会影响DOM的渲染。但其实CSS可以通过JavaScript来阻塞DOM的构建。因为JavaScript是可以改变样式的，也就是具有修改CSS规则树的能力，而JavaScript脚本里是否有改变样式的操作，这一点在执行JavaS

【JS】浏览器渲染机制及渲染阻塞

Voiceu的博客

05-29

1165

渲染机制浏览器的渲染机制一般分为以下几个步骤处理 HTML 并构建 DOM 树。处理 CSS 构建 CSSOM 树。将 DOM 与 CSSOM 合并成一个渲染树。根据渲染树来布局，计算每个节点的位置。调用 GPU 绘制，合成图层，显示在屏幕上。参考1 一个渲染引擎主要包括：HTML解析器，CSS解析器，javascript引擎，布局layout模块，绘图模块 HTML解析器：解释HTML文档的解析器，主要作用是将HTML文本解释成DOM树。 CSS解析器：它的作用是为DOM中的各个元素

完美解决JS文件页面加载时的阻塞问题

11-30

关于页面加载时的时间消费，许多书中都做出了介绍，也提出了很多种方法。本文章就详细介绍XHR注入。概述：JS分拆的方法 1.XHR注入：就是用ajax异步请求同域包含脚本的文件，然后将返回的字符串转化为脚本使用，该方法不会造成页面渲染和onload事件的阻塞，因为是异步处理，推荐使用。 2.iframe注入：加载一个iframe框架，通过使用iframe框架中的脚本来避免src方式加载脚本的阻塞，但是iframe元素开销较大，不推荐。 3.DOM注入：就是创建script元素，通过制定该元素的src并放入DOM树中，根据该语句书写的文字不同，会造成渲染或onload事件的阻塞。 4. docu

前端性能优化八：js阻塞DOM树

最新发布

m0_68635815的博客

02-09

218

但是JS不一样，因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现.在没有使用异步加载（async）或者是延迟加载(defer)的情况下,只有在一个JS文件加载解析完后才能加载后面的JS文件。利用延迟脚本和异步脚本可以实现脚本的并行加载。

在JS引入时如何避免阻塞DOM解析

angry_rooster的博客

07-19

989

在JS引入时避免阻塞HTML文档加载的几种方式浏览器对HTML文档代码的加载和解析是按代码的编写顺序进行的，如果在浏览器对HTML文档进行加载和解析时，遇到了内嵌在HTML文档中的JavaScript脚本或者对JS脚本进行外部引入的标签，如果不经过任何的处理，浏览器会直接对遇到的JS代码相关内容进行加载和解析，这是会阻塞后续的HTML元素的加载，如果JS代码中的部分代码涉及完整HTML文档中的元素节点操作而此时目标节点并没有加载出来，这会导致代码执行错误。这就需要对JS的加载顺序进行相关处理来避免代码执行

有的js文件为什么放在body里面

bai101724的博客

12-29

341

放在body后面是等body载入完成，依次往下执行，避免：现载入js，却找不到body里面的dom对象而造成js出错，所以一般用window。onload来判断页面是否加载完成。这样处理的好处是无需担心因页面未完成加载，造成DOM节点获取不到，使脚本报错的问题，而且能避免因脚本运行缓慢遭成页面卡死的问题，另外，Yahoo的前端优化指南里面就有这一条。

js放在body里面还是html外面,JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制...

weixin_29022821的博客

07-14

1017

(点击上方公众号，可快速关注)作者：德来网址：http://segmentfault.com/a/1190000004292479一、从一个面试题说起面试前端的时候我喜欢问一些看上去是常识的问题。比如：为什么大家普遍把放到导航栏的下面，结果是这样的：从上面的Timeline我们可以看出：首屏时间和DomContentLoad事件没有必然的先后关系所有CSS尽早加载是减少首屏时间的最关键js的下载...

js文件放head，还是body，哪些情况下引用到body

cry_watermelon的博客

12-01

1066

js文件放head，还是body，哪些情况下引用到body 原文链接：https://blog.csdn.net/Yy921117/article/details/51982159 放在head或body里面都可以，但是在一些情况下，一定要放在body的里面（在body结束前引用），跟浏览器加载机制有关涉及到的“浏览器渲染页面和加载页面机制"原文链接：https://www.cnblog...

js插入位置对页面效果的影响

我只会html

02-14

277

书写html页面时，将js插入在body的后部是常识，因为如果将js插入在body前部，页面还未渲染就先执行js，将导致js中涉及组件的操作无法正确地作用。举例来说，以下这段代码，将使得页面无法正确渲染。 <body> <script src = "./vue2.6.11.js"></script> <script> ...

JS-1-如何减少因引入js文件造成阻塞的影响

小水滴的博客

07-04

347

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

JavaScript DOM appendChild添加子元素

编程界明世隐的博客

12-16

8222

目录 1.在末尾添加元素： 2.移动元素至末尾或至另一个元素的末尾： 1.在末尾添加元素，实例： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> </head> <body> <div id="box"