js和css文件位置对页面性能有什么影响?
js和css文件位置对页面性能有什么影响?
CSS和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下载并解析完毕后,已经呈现的文字和图片就要需要根据新的样式重绘,这是一种不好的用户体验。
广义而言,CSS 是(渲染)性能的关键,这是由于:
1、浏览器直到渲染树构建完成后才会渲染页面;
2、渲染树由 DOM 与 CSSOM 组合而成;
3、DOM 是 HTML 加上(同步)阻塞的 JavaScript 操作(DOM 后的)结果;
4、CSSOM 是 CSS 规则应用于 DOM 后的结果;
5、使 JavaScript 非阻塞非常简单,添加 async 或 defer 属性即可;
6、相对而言,要让 CSS 变为异步加载是比较困难的;
7、所以记住这条经验法则:(理想情况下,)最慢样式表的下载时间决定了页面渲染的时间。
基于上述考虑,我们需要尽快构建 DOM 与 CSSOM。一般情况下,DOM 的构建是相对较快,(当请求某个页面时,)服务器响应的首个请求是 HTML 文档。但一般 CSS 是作为 HTML 的子资源而存在,因此 CSSOM 的构建通常需要更长的时间。
更多web前端开发知识,请查阅 HTML中文网 !!
以上就是js和css文件位置对页面性能有什么影响?的详细内容,更多请关注易知道|edz.cc其它相关文章!
相关内容
-
在wps中粘贴保留原格式化|wps中复制文件保留原
在wps中粘贴保留原格式化|wps中复制文件保留原有格式,格式化,...
-
什么是boot.ini文件错误ini的非法解决方案
什么是boot.ini文件错误ini的非法解决方案,,千奇百怪的电脑问...
-
鼠标不能拖动文件了
鼠标不能拖动文件了,鼠标,拖动,本文目录鼠标不能拖动文件了电...
-
提高3A四核羿龙II游戏配置的性能
提高3A四核羿龙II游戏配置的性能,,以节能环保为主题的IT产业,目...
-
四PK四线程核心英特尔核心与AMD速龙
四PK四线程核心英特尔核心与AMD速龙,,英特尔32纳米Clarkdale处...
-
Outlook的PST文件损坏的修复方法
Outlook的PST文件损坏的修复方法,文件, ...
-
优化PostgreSQL中的批量更新性能
优化PostgreSQL中的批量更新性能,数据,表格,在Ubuntu 12.04上...
-
诺基亚威图性能好到哪里
诺基亚威图性能好到哪里,诺基亚,手机,诺基亚威图性能好到哪里...
-
魅蓝note6性能参数有哪些
魅蓝note6性能参数有哪些,摄像头,蓝牙,魅蓝note6性能参数有哪...
-
IE脚本错误如何做Web脚本错误解决技巧
IE脚本错误如何做Web脚本错误解决技巧,,这个问题是由于这样的...
-
电脑什么文件不能删除文件|电脑中哪些文件不能
电脑什么文件不能删除文件|电脑中哪些文件不能删除,,电脑中哪...
-
电脑上怎样打文件|电脑上怎样打文件符号
电脑上怎样打文件|电脑上怎样打文件符号,,电脑上怎样打文件符...
-
电脑什么cpu性能最好的|电脑cpu目前最好什么
电脑什么cpu性能最好的|电脑cpu目前最好什么,,电脑cpu目前最好...
-
完成端口与线程池的问题?可以多个iocp完成端口共
完成端口与线程池的问题?可以多个iocp完成端口共用吗,端口,线...
-
将wps转为EX|把WPS文件转为excel表格
将wps转为EX|把WPS文件转为excel表格,转为,如何将,wps,1.怎么...