扫码关注官方订阅号
bootstrap的模板页view-source:http://v3.bootcss.com/examples/starter-template/中把bootstrap核心的js放在了文档的尾部,并没有放在head里面,说是会加快加载速度,这是为啥?
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
由于页面是单线程的,当脚本的位置在head中时,且没有添加async或者defer的话,脚本就会被下载或者执行。这回阻塞页面的渲染。如果脚本的执行时间过长,或者出现错误时等情况时,都会导致页面有一段空白期,这样给用户造成页面没加载的错觉。这无疑对用户体验来说是糟糕的。当脚本放在body的最下面加载时。当脚本执行的时候,那就说明页面的dom树已经渲染完成。能程序一个较完整的页面给用户。这也就是用户感觉加载快了的原因。
浏览器在下载js的时候,会阻塞页面渲染,放在尾部会先显示页面再加载js,百度一下即可。
浏览器加载js是同步加载,如果放在head里,会阻塞其它文件的加载及dom渲染,如果dom节点还没加载完成,且js里有引用某个dom节点,会报错。
楼上的回答也有失偏颇,不一定所有的js都必须放在footer中,如果涉及到页面渲染方面的js还是必须放在head中,比如:
$('#main_wrapper').css({left:$(window).width()/2-480});//这种涉及到页面css渲染的js,需放在head中
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
由于页面是单线程的,当脚本的位置在head中时,且没有添加async或者defer的话,脚本就会被下载或者执行。这回阻塞页面的渲染。如果脚本的执行时间过长,或者出现错误时等情况时,都会导致页面有一段空白期,这样给用户造成页面没加载的错觉。这无疑对用户体验来说是糟糕的。当脚本放在body的最下面加载时。当脚本执行的时候,那就说明页面的dom树已经渲染完成。能程序一个较完整的页面给用户。这也就是用户感觉加载快了的原因。
浏览器在下载js的时候,会阻塞页面渲染,放在尾部会先显示页面再加载js,百度一下即可。
浏览器加载js是同步加载,如果放在head里,会阻塞其它文件的加载及dom渲染,如果dom节点还没加载完成,且js里有引用某个dom节点,会报错。
楼上的回答也有失偏颇,不一定所有的js都必须放在footer中,如果涉及到页面渲染方面的js还是必须放在head中,比如: