• 技术文章 >web前端 >前端问答

    先引入js还是css文件

    青灯夜游青灯夜游2021-09-10 17:56:44原创102

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

    本教程操作环境: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中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript css
    上一篇:怎么用css做两头变尖的直线 下一篇:css中的背景图片怎么变小
    线上培训班

    相关文章推荐

    • 使用nodejs如何设置编码• Safari浏览器里关闭javascript• javascript怎么设置元素的height(高度)• nodejs中怎么将编码gbk转为utf8• nodejs怎么修改文件内容

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网