前端性能优化五：css和js位置

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