就性能而言,HTML 本身非常简单,主要是文本,文本相较来说也比较小。可优化即需要注意的细节包括:
精简 HTML 代码
- 减少 HTML 的嵌套;
- 减少 DOM 节点数;
- 减少无语义代码 (如:
- 删除 http 或者 https,如果 URL 的协议头和当前页面的协议头一致的,或者此 URL 在多个协议头都是可用的,则可以考虑删除协议头;
- 删除多余的空格、换行符、缩进和不必要的注释;
- 省略冗余标签和属性;
- 使用相对路径对的 URL;
文件放在合适位置
- CSS 文件链接尽量放在头部;
CSS 的加载不会阻塞 DOM tree 的解析,但是会阻塞 DOM tree 的渲染,也会阻塞后面 JS 执行。任何 body 元素之前,可以确保在文档部分忠解析了所有的 CSS 样式(内联合外联),从而减少浏览器的重排次数。 - JS 引用放在 HTML 底部; 防止 JS 加载、解析、执行阻塞页面后续元素的正常渲染。
增强用户体验
- 设置 favicon.ico;
如果不设置 favicon.ico 控制台会报错,同时不利于记忆网站品牌。 - 增加首屏必要的 CSS 和 JS;
如页面 loading 或背景图,使首屏能快速显示。