CSS和JS在网页中的放置顺序

js是阻塞页面的加载,会影响页面加载的速度,js文件的大小和算法的复杂程度影响着页面的加载速度。浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或javascript的命名空间,它们对后面内容造成影响。一个典型的例子就是在页面中使用document.write()。

浏览器从服务器接收到html代码,就开始解析html,根据html的代码会自上向下进行构建,同时构建渲染树,如果遇到js文件加载执行,将会阻塞DOM树的构建,遇到css文件,又会阻塞渲染树的构建。

如今人们更喜爱相对于呈现用户面前的“快”网页,即呈现出来的时间越短,内容也不是很糟糕,更受人欢迎,如果一个网页加载没有反应,时间超过两秒甚至更多,对于用户来说,这个网页是差劲的

所以,script标签应该放在</body>标签的前面,因为,放在body标签后会避免出现网页加载空白的情况,可持续的给用户提供视觉反馈,同时在有些情况下,会降低错误的发生。页面渲染的时候,相对于其他的图片或css来说js是阻塞的,所以等页面的渲染树成行以后再引入js就可以避免白屏现象.

css标签应放在<head></head>标签之间,如果放在</body>标签的前面,当DOM树构建完成,渲染树开始构建,等构建完成,浏览器需要渲染整个页面,其实可以边渲染便构建,减少资源的浪费

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • JS、CSS渲染机制解析html构建DOM树解析CSS构建CSSOM树把DOM和CSSOM组合成渲染树(Rende...
    __Qiao阅读 6,478评论 1 7
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 远方 撑着油纸伞的姑娘 寻找着登船的港口 判不清方向,靠不近彼岸 像是无悲无喜无心伤的石头 那些梦 都随着潺潺流水...
    何夏陌舟阅读 3,043评论 0 0
  • 生活虽然有些不尽人意,但是我们仍有选择快乐的权力。 九月份初过完生日过后,老天又狠狠的连着甩了几个巴掌给我。唯一想...
    小王紙kiah阅读 4,853评论 3 5
  • 很久没有正儿八经地写点什么,猛然发现,自己好像很久不曾真正的思考过,脑子里一片空白,一时间,竟然不知道应该跟...
    Einsiedler阅读 2,726评论 2 0