HTML性能优化
HTML性能优化
精讲代码
- 减少嵌套
- 减少节点
- 减少无语义代码
- 协议一致可以删除协议头
- 删除空格、换行、缩进、没意义的注释
- 省略冗余的标签/属性
- 使用相对路径的URL
放的位置
- css文件放在头部
- 防止堵塞渲染和js的执行（防止白屏现象）
- js文件放在底部
- 防止js加载、解析、执行对阻塞页面后续元素的渲染
优化体验
- 设置favicon.ico
- 用于体现网站的品牌
- 增加首屏必要的js和css
- 相对减少用户首屏的等待时间
压缩
使用工具压缩代码，配合服务器使用Gzip
项目开发通常没怎么想过html优化？
通常项目开发中不会这么考虑HTML，框架和打包工具以及处理了（部分需要单独配置），而且HTML可优化的内容确实很少
对于react、vue的HTML内容也几乎没有（只有基础的空壳）
- 自动压缩
index.html
零配置下：- Vite 内置
html-minify-terser，默认把空格、注释、冗余属性、布尔属性长写法等全部压掉。 - Webpack 系列（vue-cli / CRA）通过
HtmlWebpackPlugin默认开启同款压缩，产物体积通常 **−10 % ~ −15 %**。
- Vite 内置
- 自动注入关键
<meta>与<link>
构建时会往index.html插入：<meta charset="utf-8">放在 **首行<head>**（避免解析回退）。<meta name="viewport" content="width=device-width,initial-scale=1">（防止移动端缩放）。<link rel="icon" href="...">与<link rel="modulepreload" href="xxx.js">（预加载入口模块）。
这些标签手写容易漏，零配置模板保证顺序与位置最优。
- 资源哈希与内联策略
- 所有外链 JS/CSS 文件名自动带
?v=[hash]，HTML 里同步更新引用；用户刷新即可获最新文件，无需手动清缓存。 - 体积小于 4 kB 的小文件（如 runtime.js）会被直接内联到 HTML，减少一次 HTTP 请求；该阈值可在插件里调，但零配置已经启用
- 所有外链 JS/CSS 文件名自动带