为什么要把js放在页面底部，css放在顶部

先了解一下浏览器的渲染原理：

当我们在浏览器输入URL 时，浏览器会返回我们一个HTML文档，将文档下载下来后，便开始从上到下开始解析。解析完成之后就会生成DOM。如果页面中有css,会根据css的内容生成cssom, 然后DOM会和cssom结合生成一个渲染树，最后浏览器会根据渲染树的内容，计算出各个节点的大小和位置绘制在页面上。

js 会阻碍浏览器的解析，解析遇到js会停止渲染，优先去加载或者执行js,处理完毕后再继续渲染。

如果，js脚本标签前面有link样式链接，js会等样式加载和解析完毕才会执行JS。

在现在浏览器中，为了减缓渲染被阻塞的情况，现代的浏览器都使用了猜测预加载。当解析被阻塞的时候，浏览器会有一个轻量级的HTML（或CSS）扫描器（scanner）继续在文档中扫描，查找那些将来可能能够用到的资源文件的url，在渲染器使用它们之前将其下载下来。

在这里我们可以明确DOMContentLoaded所计算的时间，当文档中没有脚本时，浏览器解析完文档便能触发 DOMContentLoaded 事件；如果文档中包含脚本，则脚本会阻塞文档的解析，而脚本需要等位于脚本前面的css加载完才能执行。在任何情况下，DOMContentLoaded 的触发不需要等待图片等其他资源加载完成。

接下来，我们来说说load，页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件，简单来说，页面的load事件会在DOMContentLoaded被触发之后才触发。

我们在 jQuery 中经常使用的 $(document).ready(function() { // ...代码... }); 其实监听的就是 DOMContentLoaded 事件，而 $(document).load(function() { // ...代码... }); 监听的是 load 事件。在用jquery的时候，我们一般都会将函数调用写在ready方法内，就是页面被解析后，我们就可以访问整个页面的所有dom元素，可以缩短页面的可交互时间，提高整个页面的体验。

在面试的过程中，经常会有人在回答页面的优化中提到将js放到body标签底部，原因是因为浏览器生成Dom树的时候是一行一行读HTML代码的，script标签放在最后面就不会影响前面的页面的渲染。那么问题来了，既然Dom树完全生成好后页面才能渲染出来，浏览器又必须读完全部HTML才能生成完整的Dom树，script标签不放在body底部是不是也一样，因为dom树的生成需要整个文档解析完毕。

我们再来看一下chrome在页面渲染过程中的，绿色标志线是First Paint的时间。纳尼，为什么会出现firstpaint，页面的paint不是在渲染树生成之后吗？其实现代浏览器为了更好的用户体验,渲染引擎将尝试尽快在屏幕上显示的内容。它不会等到所有HTML解析之前开始构建和布局渲染树。部分的内容将被解析并显示。也就是说浏览器能够渲染不完整的dom树和cssom，尽快的减少白屏的时间。假如我们将js放在header，js将阻塞解析dom，dom的内容会影响到First Paint，导致First Paint延后。所以说我们会将js放在后面，以减少First Paint的时间，但是不会减少DOMContentLoaded被触发的时间。我们再来看一下chrome在页面渲染过程中的，绿色标志线是First Paint的时间。纳尼，为什么会出现firstpaint，页面的paint不是在渲染树生成之后吗？其实现代浏览器为了更好的用户体验,渲染引擎将尝试尽快在屏幕上显示的内容。它不会等到所有HTML解析之前开始构建和布局渲染树。部分的内容将被解析并显示。也就是说浏览器能够渲染不完整的dom树和cssom，尽快的减少白屏的时间。假如我们将js放在header，js将阻塞解析dom，dom的内容会影响到First Paint，导致First Paint延后。所以说我们会将js放在后面，以减少First Paint的时间，但是不会减少DOMContentLoaded被触发的时间。

为什么要把js放在页面底部，css放在顶部相关推荐

高性能web建站规则（将js放在页面底部）
版权声明:欢迎转载,请注明沉默王二原创. https://blog.csdn.net/qing_gee/article/details/80123552 简单解释一下为什么要将js放在页面底部: 浏览 ...
fish.js实现页面底部小鱼跳跃动画
fish.js:用于绘制小鱼跳跃相关动画,依赖jquery.js var RENDERER = {POINT_INTERVAL : 5,FISH_COUNT : 3,MAX_INTERVAL_COUN ...
css 图片紧贴页面底部,CSS StickyFooter——当内容不足一屏时footer紧贴底部
本文作者:IMWeb 结一未经同意,禁止转载一般来说我们的footer是跟着内容走的,所以当内容较少不足一屏的时候,footer也会跟着内容往上走,导致下面一段空白.所以这里我们来探讨下当内容不足 ...
解决 vue路由跳转到新页面底部而不是顶部和后退到首页就不让他继续后退了
mounted () {this.$router.afterEach((to, from, next) => {window.scrollTo(0, 0); //跳到别的页面会自动滚动底部 }) ...
CSS样式为什么放在head中，而不放在body底部
CSS样式为什么放在head中,而不放在body底部 1. 放在body底部代码: <!DOCTYPE html> <html lang="en"> &l ...
元素始终置于页面底部
本文实例: 按钮始终在距离页面底部16px的位置,注意是页面底部,不是屏幕底部如果放置在屏幕底部,只需要给元素设置以下内容 .element {position: fixed;bottom: 16p ...
js 下拉底部加载|滑轮滚动到页面底部ajax加载数据的实例
转载链接:http://www.cnblogs.com/thinksley/archive/2013/05/12/3074237.html 滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配 ...
JS实现让页脚一直固定在页面底部
2019独角兽企业重金招聘Python工程师标准>>> JS实现页脚在浏览器可视范围内始终置底. 如下图所示: 代码如下: <!DOCTYPE html> <htm ...
js实现判断滚动条滚到页面底部并执行事件的方法
这里我主要介绍JS实现判断滚动条滚到页面底部并执行事件的方法: 需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个 ...

为什么要把js放在页面底部，css放在顶部

为什么要把js放在页面底部，css放在顶部相关推荐

最新文章

热门文章