公告
财富商城
积分规则
提问
发文
2019-01-03 03:40发布
The star\"
css样式表放在头部，js放在尾部可以达到性能优化的一个目的
但是css样式表放在头部能达到这样一个效果的原理是什么呢？
这样会先加载css的样式，在渲染dom的时候已经知道了自己的样式了，所以一次渲染成功
如果css放在底部，那么需要先渲染dom，然后加载css后会重新渲染之前dom，需要两次渲染
因为所有操作是顺序执行的，js放在尾部就会先显示出页面，如果放在头部，如果JS文件又较多，加载就会花费较多的时间，页面响应的就慢了。
文档加载顺序，js操作dom，阻塞dom加载，现在浏览器为了更好的用户体验，渲染引擎会尝试尽快在屏幕上显示内容，它不会等到所有的HTMl元素解析之后在构建和布局dom树，所以部分内容将被解析并显示。也就是说浏览器能够渲染不完整的dom
如果css放在尾端 你就需要游览器执行2倍的渲染工作！~~~
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 The star\" 的问题《css样式表性能优化》','https://www.manongdao.com/q-26437.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
这样会先加载css的样式，在渲染dom的时候已经知道了自己的样式了，所以一次渲染成功
如果css放在底部，那么需要先渲染dom，然后加载css后会重新渲染之前dom，需要两次渲染
因为所有操作是顺序执行的，js放在尾部就会先显示出页面，如果放在头部，如果JS文件又较多，加载就会花费较多的时间，页面响应的就慢了。
文档加载顺序，js操作dom，阻塞dom加载，现在浏览器为了更好的用户体验，渲染引擎会尝试尽快在屏幕上显示内容，它不会等到所有的HTMl元素解析之后在构建和布局dom树，所以部分内容将被解析并显示。也就是说浏览器能够渲染不完整的dom
如果css放在尾端 你就需要游览器执行2倍的渲染工作！~~~