尚武科技——负责任的企业公民

尚武十年[点击进入]

科技以人为本
尚武旗下网站
尚武科技
搜索图标
Sitemap | Mail | 合作答疑 | 招贤纳士
网站公告 尚武科技服务热线:0311-87882018
   
我们是谁  |  企业文化  |  新闻动态  |  加入我们  |  行业知识
网站制作之性能优化——为什么JS调用尽量放到网页底部?

  渲染引擎逐行解析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尽可能放到底部可以防止阻塞的产生。

  




上一篇:石家庄网站建设中如何构建Web端设计规范             下一篇:在网站设计中如何做出出众的网页

标签:石家庄网站制作 石家庄网站开发 石家庄建网站
尚武科技
睿亿网络用心服务的团队,竭诚为您服务 客服不能及时回复您,您可点击QQ进行交谈
欲了解业务详情,请拨打咨询热线:
总部电话:0311-87882018    值班电话:15512183667
在线服务: 尚武科技售前专员   尚武科技售前专员  尚武科技技术专员  尚武科技美工专员  尚武科技售后专员  
Copyright © 2008-2018 尚武科技 保留所有权利 >冀ICP备07012169号    Copyright © 2008 www.sw-tech.cn, Inc. All rights reserved