前端性能优化五:css和js位置
2023-12-21 20:21:41
1. 精简HTML代码:
①. css链接文件尽量放在页面头部:
a. css的加载不会阻塞DOM Tree的解析.
b. 但会阻塞DOM Tree渲染,也会阻塞后面JS的执行.
c. 将css放在任何body元素之前:
(1). 可以确保在文档中解析了所有css的样式包括内联样式和外联的.
(2). 减少了浏览器必须重排文档的次数.
d. 如果将css放在底部,就要等待最后一个css下载完成:
(1). 会导致长时间白屏,影响用户体验.
e. css代码下无script代码段,就不会影响DOMContentLoaded.
②. js引用放在页面底部:
a. 防止js的加载、解析和执行,阻塞到页面后续元素的正常渲染.
b. script放在底部影响DOM渲染,不会影响解析.
c. script内的代码执行会等待css加载.
2. 增强用户体验:
①. 设置favicon.ico图标:
a. 不设置控制台会报错.
b. 页面加载过程中也没有图标loading过程,不利于记忆网站品牌.
②. 增加首屏必要的css和js:
a. SPA页面需要等待所依赖的js和css加载完成才能显示,在渲染过程中页面会一直显示空白,影响用户体验.
b. 建议增加首屏必要一些的css和js:
(1). 比如在加载过程中,增加如下内联在HTML页面中:
1. 页面框架背景图片
2. loading图标
3. 骨架屏
(2). 这样,首屏能快速显示出来,相对减少用户对页面加载的等待过程.
文章来源:https://blog.csdn.net/wanmeijuhao/article/details/135133706
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!