前端性能优化-静态资源优化2-HTML

本文地址： https://www.cnblogs.com/veinyin/p/14274243.html

1 精简 HTML 代码

1. 减少 HTML 嵌套

2. 减少 DOM 节点数

3. 减少无语义代码（如额外元素清除浮动）

4. 删除 HTTP 或 HTTPS，如果 URL 协议与页面协议一致，或都支持，可删除协议头

5. 删除多余空格、换行符、缩进、注释

6. 省略冗余标签和属性

7. 使用相对路径的 URL

2 文件放在合适的位置

1. CSS 样式文件链接放在页面头部。CSS 文件加载不会阻塞 DOM 树构建，但会阻塞 DOM 渲染，也会阻塞 JS 执行。先获取元素样式也可减少重排次数

2. JS 放在页面底部，防止 JS 加载、解析、执行阻塞页面元素渲染

3 用户体验增强

1. 添加 favicon。不添加时控制台报错，页面加载时无 loading 效果，不利于记忆网站品牌

2. 增加首屏必要的 CSS 和 JS。如骨架屏、加载效果、背景图片等，避免在弱网环境下，用户等待页面一直空白