首页 >web前端 >前端问答 >先引入js还是css文件

先引入js还是css文件

青灯夜游
青灯夜游原创
2021-09-10 17:41:122414浏览

先引入css文件,让css样式先加载出来,这样就不会让用户看到一个杂乱无章的页面;然后再引入并加载js。js一般都是处理功能的,不需要提前加载;先给用户观感,再给用户上手体验。

先引入js还是css文件

本教程操作环境:windows7系统、CSS3&&javascript1.8.5版、Dell G3电脑。

先引入并加载css文件,在在引入并加载js。

1.png

我们通常是把css放上面,js会放在下面;先加载css文件(不要让用户看到一个杂乱无章的页面),最后再加载js文件。js一般都是处理功能的,不需要提前加载;先给用户观感,再给用户上手体验。

js脚本文件的位置

js脚本应该放在底部,原因在于js线程与GUI渲染线程是互斥的关系,如果js放在首部,当下载执行js的时候,会影响渲染行程绘制页面,js的作用主要是处理交互,而交互必须得先让页面呈现才能进行,所以为了保证用户体验,尽量让页面先绘制出来。

CSS文件的位置

CSS 是页面渲染的关键因素之一,(当页面存在外链 CSS 时,)浏览器会等待全部的 CSS 下载及解析完成后再渲染页面。关键路径上的任何延迟都会影响首屏时间,因而我们需要尽快地将 CSS 传输到用户的设备,否则,(在页面渲染之前,)用户只能看到一个空白的屏幕。

CSS文件放在顶部一方面是因为放置顺序决定了下载的优先级,更关键的是浏览器的渲染机制。

css在加载过程中不会影响到DOM树的生成,但是会影响到Render树的生成,进而影响到layout,所以一般来说,style的link标签需要尽量放在head里面,因为在解析DOM树的时候是自上而下的,而css样式又是通过异步加载的,这样的话,解析DOM树下的body节点和加载css样式能尽可能的并行,加快Render树的生成的速度。

将CSS放在底部,页面可以逐步呈现,但在CSS下载并解析完毕后,已经呈现的文字和图片就要需要根据新的样式重绘,这是一种不好的用户体验。

更多编程相关知识,请访问:编程视频!!

以上是先引入js还是css文件的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn