旗下品牌:
石家庄网站开发 石家庄网站开发公司

资讯动态

察而思、思而行、行而后语、知行合一

网站制作之性能优化——为什么JS调用尽量放到网页底部?

发布时间:2017-12-27 热度:

  渲染引擎逐行解析HTML,为了尽快将页面呈现出来,它不会等到HTML都被解析完才创建并布局RenderTree。它会在处理后续内容的同时把处理过的局部内容先展示出来,下面我们就和尚武科技一起来了解一下在石家庄网站制作都需要注意那些问题。

 

  之前理解有误,外部JS并不是浏览器逐行解析到script后再向服务器发起请求的,而是浏览器请求到HTML代码后,在生成DOM的最开始阶段,并行发起css、图片、js的请求,无论他们是否在HEAD里。但是JS的执行顺序是根据浏览器解析script标签顺序来的,因为JS引擎(负责对JS的解析与执行)是单线程的,所以JS的执行势必会对DOMTree的构建造成阻塞。

 

  了解了以上背景知识后,对该问题进行解答:为什么JS调用尽量放到网页底部?

 

  1.JS的下载和执行会阻塞DOMTree的构建,对于在首屏范围内的HTML代码段里的script标签会截断首屏内容,造成首屏大片空白从而影响网站的用户体验。

 

  2.如果JS中有对DOM的操作并且没有把这部分代码放入document.ready接口内,那么,当JS执行的时候DOM可能还未加载完,这样便会出错。比如:对按钮绑定点击事件这时候按钮还没被渲染出来对他绑定就会出现问题

石家庄网站制作,石家庄网站开发,石家庄建网站 

  (这里的首屏时间指的是浏览器第一次painting的时间。首屏内容的显示可以是不完整的。)

 

  在学习这些文档过程中,遇到了很多不能理解的点:

 

  1.为什么script标签的位置不一定会影响首屏时间。

 

  对于顶部的script,肯定会阻塞浏览器对之后的HTML解析,这种情况下不就影响首屏时间了吗?

 

  2.为什么放到网页顶部的JS不一定阻塞页面渲染

 

  除了首屏看得见的资源(主要是图片资源)外,其他资源一律需要通过js来控制,而不能随意地发起http请求(包括首屏看不到的资源)。按照这个原则,js只能放在body标签闭合之前,并且js逻辑不能随意书写。

 

  js对其他资源的控制,需要对部分资源请求进行延时,因此将script尽可能放到底部可以防止阻塞的产生。

  

联系尚武科技
客户服务
石家庄APP开发
400-666-4864
为您提供售前购买咨询、解决方案推荐等1V1服务!
技术支持及售后
石家庄APP开发公司
0311-66682288
为您提供从产品到服务的全面技术支持 !
客户服务
石家庄小程序开发
石家庄小程序开发公司
加我企业微信
为您提供售前购买咨询、
解决方案推荐等1V1服务!
石家庄网站建设公司
咨询相关问题或预约面谈,可以通过以下方式与我们联系。
石家庄网站制作
在线联系:
石家庄Web开发
石家庄软件开发
石家庄软件开发公司
ADD/地址:
河北·石家庄
新华区西三庄大街86号河北互联网大厦B座二层
Copyright © 2008-2025尚武科技 保留所有权利。 冀ICP备12011207号-2 石家庄网站开发冀公网安备 13010502001294号《互联网平台公约协议》
Copyright © 2025 www.sw-tech.cn, Inc. All rights reserved