首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么正文末尾的脚本会阻止页面加载?

正文末尾的脚本会阻止页面加载的原因有几个:

  1. 解析和执行脚本:当浏览器解析到脚本标签时,会暂停页面加载的过程,将脚本内容解析成可执行的代码,并执行脚本。这个过程需要一定的时间,如果脚本很大或者复杂,会导致页面加载速度变慢。
  2. 脚本依赖其他资源:脚本可能依赖其他外部资源,如CSS文件或其他JavaScript文件。如果这些资源还未加载完成,浏览器会等待它们加载完毕后再执行脚本。因此,脚本的加载和执行会阻塞页面加载的进程。
  3. 脚本修改DOM结构:脚本可以通过操作DOM来改变页面的结构和内容。如果脚本在DOM加载之前执行,脚本可能会找不到需要操作的DOM元素,导致出错。为了避免这种情况,浏览器会等待整个DOM结构加载完毕后再执行脚本,从而阻塞页面加载。

为了解决这个问题,可以采取以下策略:

  1. 将脚本放在页面底部:将脚本放在HTML文档末尾,可以确保脚本在页面加载完毕后再执行,不会阻塞页面的加载过程。
  2. 异步加载脚本:通过使用async或defer属性,可以让脚本异步加载,不会阻塞页面的加载。async属性表示脚本加载和执行是异步的,不会阻塞页面加载;defer属性表示脚本会在页面加载完毕后执行,但是不会影响页面的渲染过程。
  3. 压缩和合并脚本:将多个脚本文件合并成一个,并进行压缩,可以减少脚本的大小和加载时间,提高页面加载速度。

综上所述,正文末尾的脚本会阻止页面加载的原因主要是解析和执行脚本、脚本依赖其他资源和脚本修改DOM结构。为了避免这个问题,可以将脚本放在页面底部、异步加载脚本或压缩和合并脚本。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

js动态加载、缓存、更新以及复用(一)使用范围:遇到问题:目标:页面结构:正文

正文   现在做web版应用,越来越依赖各种js了,第三方jQuery、easyUI、my97等,还有自己写各种js。要实现功能越来越多,需要使用js也越来越多,js文件修改也很频繁。...有的Js文件还有依赖关系,如何确保加载顺序?本文内容就是分享一下我解决方案。 动态加载   在页面里使用加载js,显然很麻烦,那么怎么办呢?想来想去还是用动态加载方法来解决。...这个倒是可以,但是页面必须引用jQuery和我写加载js文件js。也就是说一个页面要写两个,这个就麻烦了。...复用   这个就要先看看上面那个图了,就是页面结构,有一个外壳页(或者首页),我们叫做父页。里面还有若干个iframe加载页面,我们加做子页。   ...没有指定时候,jQuery会在哪里搜索呢?加载jQuery页面里面搜索,而不是调用$页面里搜索。

4.1K50

script标签加快加载速度

script标签加快加载速度 ? 对于script元素,新增async属性与defer属性,他们作用都是加快页面加载速度,使脚本代码读取不再妨碍页面上其他元素加载。...我们修改测试页面如下: ? 遂得到了如下结果,页面加载时长上,并没有什么变化,毕竟都是异步加载脚本。...资源下载是在解析过程中进行,虽说script1本会很快加载完毕,但是他前边script2并没有加载&执行,所以他只能处于一个挂起状态,等待script2执行完毕后再执行。...当这两个脚本都执行完毕后,才会继续渲染页面。 ? defer 文档解析时,遇到设置了defer脚本,就会在后台进行下载,但是并不会阻止文档渲染,当页面解析&渲染完毕后。...会等到所有的defer脚本加载完毕并按照顺序执行,执行完毕后会触发DOMContentLoaded事件。 ? async async脚本会加载完毕后执行。

1.5K10

浅谈script标签中async和defer

我们修改测试页面如下: ? 遂得到了如下结果,页面加载时长上,并没有什么变化,毕竟都是异步加载脚本。...我们接着修改测试页面加载一个没有延迟script脚本,使得脚本可以即时加载完毕。...资源下载是在解析过程中进行,虽说script1本会很快加载完毕,但是他前边script2并没有加载&执行,所以他只能处于一个挂起状态,等待script2执行完毕后再执行。...当这两个脚本都执行完毕后,才会继续渲染页面。 ? defer 文档解析时,遇到设置了defer脚本,就会在后台进行下载,但是并不会阻止文档渲染,当页面解析&渲染完毕后。...会等到所有的defer脚本加载完毕并按照顺序执行,执行完毕后会触发DOMContentLoaded事件。 ? async async脚本会加载完毕后执行。

2K60

浅谈script标签中async和defer

我们修改测试页面如下: ? 遂得到了如下结果,页面加载时长上,并没有什么变化,毕竟都是异步加载脚本。...我们接着修改测试页面加载一个没有延迟script脚本,使得脚本可以即时加载完毕。...资源下载是在解析过程中进行,虽说script1本会很快加载完毕,但是他前边script2并没有加载&执行,所以他只能处于一个挂起状态,等待script2执行完毕后再执行。...当这两个脚本都执行完毕后,才会继续解析页面。 ? defer 文档解析时,遇到设置了defer脚本,就会在后台进行下载,但是并不会阻止文档渲染,当页面解析&渲染完毕后。...会等到所有的defer脚本加载完毕并按照顺序执行,执行完毕后会触发DOMContentLoaded事件。 ? async async脚本会加载完毕后执行。

1K20

前端优化--使用JavaScript添加交互

CSS 渲染是阻塞, 除了上篇讲述媒体查询可以只让 CSS 先加载后渲染,还有什么影响着 CSS 渲染呢?这里主要简述,JavaScript 对 DOM 及 CSSOM 影响相关!...在 JavaScript 函数第二部分,我们会创建一个新 div 元素,设置其文本内容,对其进行样式化,然后将其追加到正文中。...不过,尽管 JavaScript 为我们带来了许多功能,不过也在页面渲染方式和时间方面施加了更多限制。 首先,请注意上例中内联脚本靠近网页底部。为什么呢?您真应该亲自尝试一下。...换言之,我们脚本块找不到网页中任何靠后元素,因为它们尚未接受处理!或者,稍微换个说法:执行我们内联脚本会阻止 DOM 构建,也就延缓了首次渲染。...由于浏览器不了解脚本计划在页面上执行什么操作,它会作最坏假设并阻止解析器。

1.8K20

前端优化--使用JavaScript添加交互

CSS 渲染是阻塞, 除了上篇讲述媒体查询可以只让 CSS 先加载后渲染,还有什么影响着 CSS 渲染呢?这里主要简述,JavaScript 对 DOM 及 CSSOM 影响相关!...在 JavaScript 函数第二部分,我们会创建一个新 div 元素,设置其文本内容,对其进行样式化,然后将其追加到正文中。 ?...不过,尽管 JavaScript 为我们带来了许多功能,不过也在页面渲染方式和时间方面施加了更多限制。 首先,请注意上例中内联脚本靠近网页底部。为什么呢?您真应该亲自尝试一下。...换言之,我们脚本块找不到网页中任何靠后元素,因为它们尚未接受处理!或者,稍微换个说法:执行我们内联脚本会阻止 DOM 构建,也就延缓了首次渲染。...由于浏览器不了解脚本计划在页面上执行什么操作,它会作最坏假设并阻止解析器。

1.8K21

前端 Web 性能清单

提高 Web 应用程序性能是很重要。我们希望页面加载得更快、更流畅,并且没有太多布局变化。在这篇文章中,我想将关于这些所有知识一一列出来。...消除渲染阻塞资源 资源阻止页面的第一次绘制。考虑内联交付关键 JS/CSS 并推迟所有非关键 JS/样式。你可以通过仅提供所需代码和样式来减小页面的大小。...确定关键代码后,将该代码从呈现阻止 URL 移动到 HTML 页面内联脚本标记。 在 HTML 页面头部样式块中内嵌第一次绘制所需关键样式,并使用预加载链接异步加载其余样式。...避免过大 DOM 大小 大型 DOM 会增加内存使用量,导致更长样式计算,并产生代价高昂布局回流。 多个页面重定向 重定向在页面加载之前引入了额外延迟。...document.write() 对于连接速度较慢用户,通过 document.write() 动态注入外部脚本会使页面加载延迟数十秒。 非合成动画 未合成动画可能很重并会增加 CLS。

86930

快速优化 Web 性能10 个手段

WebP 版本比压缩 JPEG 版本小 43%。 4. 图像惰性加载 图像惰性加载是一种在以后加载暂时不显示在屏幕上图像技术。当解析器遇到图像时立即加载的话会减慢初始页面加载速度。...使用惰性加载,可以加速页面加载过程并稍后加载图像。使用 lazysizes[13] 可以轻松完成此操作。...缓存你资源:HTTP 缓存头 缓存是一种可以快速提高网站速度方法。它减少了老用户页面加载时间。如果你有权限访问服务器缓存,则用起来非常简单。...JavaScript 异步及延迟加载 JavaScript 是 HTML 解析器阻止。浏览器必须等待 JavaScript 执行才能完成对 HTML 解析。...因此,你可以将它们放在 HTML 末尾,紧接在 body 标记之前。 8. 使用资源提示加快交付速度。 资源提示[20]能够诉浏览器以后可能加载什么页面

1.8K30

【前端面试专栏】script脚本以及link标签对DOM影响

执行脚本会阻止页面的解析渲染 执行完脚本继续页面的解析渲染 执行完script脚本和页面解析渲染完, 才会依此触发DOMContentLoaded、 loaded事件 2、defer, 文档执行时,当遇到有...defer属性script标签时,则脚本下载则在后台运行,下载不会阻止DOM解析渲染 多个defer属性script标签,则在后台并行下载 脚本执行需要等到页面解析完成才能进行 当页面解析渲染完毕后...3、async 文档解析时,当遇到有async属性script标签时,则脚本下载则在后台运行,下载不会阻止DOM解析渲染 多个async属性script标签,则在后台同时并行下载 async脚本执行会阻止页面的解析渲染...标签加载CSS资源时阻止页面渲染 2、link标签会阻塞JS执行 JS运行时,有可能会请求样式信息,如果此时还没有加载和解析样式,js就有可能会得到错误回复,产生很多问题。...所以说link标签会阻止JS执行 当CSS资源加载完成或者加载失败后就执行了script脚本,可以看到控制台打印出来js执行完毕,且此时页面已经渲染出来 3、link和@import区别 用法: <link

15710

<script> 脚本以及 <link> 标签对 DOM 解析渲染影响

1、普通脚本文档解析过程中,如果遇到普通脚本就会直接下载脚本,下载会阻止DOM解析渲染如果是多个脚本,则并行下载,不论哪个先下载完,都要按HTML中顺序执行,即使后面的比前面的先下载完,也要等前面的执行完才能执行执行脚本会阻止页面的解析渲染执行完脚本继续页面的解析渲染执行完...3、async文档解析时,当遇到有async属性script标签时,则脚本下载则在后台运行,下载不会阻止DOM解析渲染多个async属性script标签,则在后台同时并行下载async脚本执行会阻止页面的解析渲染遵循先下载完先执行...注意:案例中CSS资源为外网资源,所以并不会直接就加载出来,可以在页面看到渲染过程,当然可以直接开vpn,css资源几乎秒加载页面也秒渲染<!...标签加载CSS资源时阻止页面渲染2、link标签会阻塞JS执行JS运行时,有可能会请求样式信息,如果此时还没有加载和解析样式,js就有可能会得到错误回复,产生很多问题。...所以说link标签会阻止JS执行当CSS资源加载完成或者加载失败后就执行了script脚本,可以看到控制台打印出来js执行完毕,且此时页面已经渲染出来3、link和@import区别用法:<link

48311

如何在Ubuntu 14.04上安装和配置Naxsi

您可以使用默认文档根(/usr/share/nginx/html/50x.html)中现成50x.html错误页面,也可以创建自己自定义错误页面。 CheckRule - 设置不同计数器阈值。...一旦超过此阈值(例如,SQL计数器为8个点),将阻止该请求。如果要使这些规则更具侵略性,请降低其值,反之亦然。 必须基于服务器块每个位置加载该naxsi.rules文件。...这就是为什么有白名单来解决这些问题。 使用第二种规则(Naxsi基本规则)创建白名单。使用基本规则,您可以将整个规则或部分规则列入白名单。...编写所有必要白名单可能是一项繁琐任务,也是一门独立科学。这就是为什么一开始你可以使用现成Naxsi白名单。对于最流行Web应用程序,现在是有这样白名单。...最后,重新加载Nginx以使更改生效: sudo service nginx reload 现在,Naxsi将阻止任何可疑请求,您网站将更安全。

1.2K00

async 和 defer 区别

HTML 中 元素定义了6个属性: async:可选,表示立即下载脚本,但不应该妨碍页面中其它操作,比如下载其它资源或者等待加载其它脚本,只对外部脚本文件有效。...延迟脚本 defer HTML4.01 中为 增加了 defer 属性,这个属性用来表明脚本执行时候不会影响页面结构,也就是说脚本会延迟到整页面解析完毕后再运行。...HTML5 规范要求脚本按照他们出现先后顺序执行,因此第一个延迟脚本 a.js 会优先于 b.js 执行,而这两个脚本会先于 DOMContentLoaded 事件执行。...,从而异步页面其它内容。...因此,建议异步脚本不要在加载期间修改 DOM。 异步脚本一定会在页面 load 事件之前执行,但可能会在 DOMContentLoaded 事件触发之前或之后执行。

5.1K60

WordPress网站js脚本延迟和异步加载教程

这些包括由WordPress添加标准脚本以及由使用wp_enqueue_scripts函数主题和插件添加一些脚本。 根据脚本类型,它可能位于网页头部,正文或页脚部分。...位于页面头部和主体部分内脚本可能会导致页面加载延迟,因为浏览器甚至在页面内容之前尝试加载和执行这些脚本。 这就是为什么这些脚本被称为渲染阻塞javascripts。...根据脚本及其功能,您可能希望延迟加载或异步加载它们。 如前所述,延迟脚本仅在页面完全加载后执行,因此如果您脚本需要在页面加载期间执行,则异步属性更合适。...只需在“移除会阻止内容呈现 JavaScript”部分下检查您脚本。 您可以使用脚本名称作为唯一名称。...(参见下图) 只需复制标记脚本名称作为延迟或者异步加载属性脚本名称即可。 图片 步骤3:打开主题functions.php文件,并将以下代码添加到文件末尾

2.2K20

异常403绕过接管整个网站

正文 我开始积极扫描和浏览网站以发现潜在切入点,除了 80 和 443 之外,没有其他开放端口。..., []等) - 将其添加到路径末尾和路径内部 长话短说,这些方法都没有奏效。所以,我记得有时安全控制是围绕请求中组件字面拼写和大小写构建。...但是,这是管理面板,因此我们使用通常测试: 查看是否存在用户名枚举 查看是否有任何登录限制 检查可能 WAF 会因请求数量而阻止我们 简而言之,这两个都没有。...我们无法枚举用户名,但是没有任何类型速率限制。考虑到上述情况,我们加载rockyou.txt并开始暴力破解“admin”帐户密码。...具有管理权限管理面板允许您更改整个网站配置,控制网站页面,真正控制一切。

50030

如何提高CSS性能

CSS阻止渲染 当一个页面有CSS可用时,无论是内联还是外部样式表,浏览器都会延迟渲染,直到CSS被解析。这是因为没有CSS页面通常是不可用。...CSS可以阻止HTML解析 尽管浏览器在完成CSS解析之前不会显示内容,但它会处理HTML其余部分。然而脚本会阻止解析器,除非它们被标记为defer或async。...Above-the-fold是指浏览者在滚动之前在页面加载时看到所有内容。由于有许多设备和屏幕尺寸,所以没有一个普遍定义像素高度被认为是折叠以上内容。...,浏览器将在不延迟页面渲染情况下加载这种样式表。...如果你考虑浏览器是如何从右到左匹配选择符,再举个例子,比如.container ul li a { },你就会明白为什么后代选择器经常被贴上 "昂贵 "标签。

2.2K30

原来这样就可以提升页面首屏渲染性能

如果它是一个样式表文件,浏览器必须在渲染页面之前完全解析它,这就是为什么 CSS 会阻塞渲染原因。 如果是脚本,浏览器必须:停止解析,下载脚本,然后运行。...为了进一步改进该过程,你还可以将一些样式内联,这可以为我们节省了至少一次到服务器往返行程。 脚本 如上所述,脚本会阻塞解析,因为它们可以改变 DOM 和 CSSOM。...相比之下,标有 defer 脚本将在页面加载结束时进行执行。 换句话说,使用 defer,脚本直到页面加载事件被触发后才会执行,而 async 让脚本在文档被解析时就会在后台运行。...浏览器开发人员尽最大努力优化你访问每个页面的网站性能,这就是浏览器通常实现所谓“预加载器”原因。这部分程序会在你以 HTML 格式请求资源之前进行扫描,以便一次发出多个请求并让它们并行运行。...这就是为什么在 HTML(逐行)以及脚本标签中保持样式标签彼此靠近原因。

75440

【前端面试题】03—200+道常见JavaScript基础面试题上(附答案)

(1) defer属性规定是否延迟执行脚本,直到页面加载为止, async属性规定脚本一旦可用,就异步执行。...(2) defer并行加载 JavaScript文件,会按照页面上 script标签顺序执行, async并行加载 JavaScript文件,下载完成立即执行,不会按照页面上 script标签顺序执行...在使用Deferred时,脚本会延迟执行,直到HTML解析器运行。这缩短了网页加载时间,并且它们显示速度更快。 28、什么是闭包( closure)? 为了说明闭包,创建一个闭包。...caller返回一个关于函数引用,该函数调用了当前函数;callee返回正在执行函数,也就是指定 function对象正文。 44、讲一下手写数组快速排序步骤。...void(0)用于防止页面刷新,并在调用时传递参数“0”。 void(0)用于调用另一种方法而不刷新页面。 76、如何强制页面加载 JavaScript中其他页面

4.5K10

pjax使用小结

pjax 结合 pushState 和 ajax 技术, 不需要重新加载整个页面就能从服务器加载 Html 到你当前页面,这个 ajax 请求会有永久链接、title 并支持浏览器回退/前进按钮。...不使用pjax 使用pjax 优点: 减轻服务端压力 按需请求,每次只需加载页面的部分内容,而不用重复加载一些公共资源文件和不变页面结构,大大减小了数据请求量,以减轻对服务器带宽和性能压力,还大大提升了页面加载速度...优化页面跳转体验 常规页面跳转需要重新加载画面上内容,会有明显闪烁,而且往往和跳转前页面没有连贯性,用户体验不是很好。如果再遇上页面比较庞大、网速又不是很好情况,用户体验就更加雪上加霜了。...20 缓存历史页面个数( pjax 加载页面前会把原页面的内容缓存起来,缓存加载后其中本会再次执行 ) version 是一个函数,返回当前页面的pjax-version,即页面中 <meta...pushState + ajax 方式简单实现它功能,还是要踩不少坑,所以为什么要放着这么个易用又精致小轮子不用呢?

2.9K40

Web性能优化:不要与浏览器预加载扫描器对抗

左边是没有样式web.dev首页。右边是应用了样式同一页面。如果浏览器在下载和处理样式表时候没有阻止渲染,那么无样式状态就会在瞬间发生。...当浏览器遇到没有defer或async属性元素时,也会阻止页面的解析和渲染。 从带有type=module属性元素中加载脚本,默认情况下是延缓。...这就是为什么在文档末尾加载JavaScript是一种常见做法,这样解析和渲染受阻影响就变得微不足道。...让我们来看看一个带有样式表基本文本和图片页面。因为CSS文件同时阻止了渲染和解析,我们可以通过代理服务为样式表引入两秒的人为延迟。这个延迟使我们更容易在网络瀑布图中看到预加载扫描器工作情况。...这种情况补救措施取决于对这个问题回答:是否有理由说明为什么页面标记不能由服务器提供而不是在客户端呈现?

5.3K151
领券