①. 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). 这样,首屏能快速显示出来,相对减少用户对页面加载的等待过程.