首页 >web前端 >前端问答 > 正文

先引入js还是css文件

原创2021-09-10 17:56:440735

先引入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中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:javascript css
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    php常用打印变量的方法有哪些483
    jquery的优点有哪些852
    jquery怎么判断dom元素是否存在453
    推荐视频教程
  • javascript初级视频教程javascript初级视频教程
  • jquery 基础视频教程jquery 基础视频教程
  • 视频教程分类