性能在前端一直是容易被忽略的点，但是却又是非常重要的部分。
HTML
1. 压缩HTML：将注释、空格和新行从生产文件中删除
这样做会减小HTML的大小，加快网站的页面加载时间，显著减少用户下载时间
2. 删除不必要的属性：type="text/javascript" or type="text/css"
类型属性不是必须的，因为HTML5把这些属性作为默认值，多写反而多余增加代码体积
3. 在JS之前引用CSS
可以更好的实现并行下载，加快浏览器渲染速度
4. 尽量避免使用iframe
5. 预解析DNS：一次 DNS 查询时间大概在60-120ms之间或者更长，提前解析网页中可能的网络连接域名
<link rel="dns-prefetch" href="http://example.com/">
CSS
1. 压缩：压缩CSS文件，删除注释、空格和空行
2. 合并
HTTP1情况下适用，HTTP2待讨论
2. 非阻塞：使用非阻塞方式引入CSS，以防止DOM花费更多时间才能渲染完成
<link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="global.min.css"></noscript>
CSS文件可以阻止页面加载并延迟页面呈现。使用preload实际上可以在浏览器开始显示页面内容之前加载CSS文件。
CSS不会阻止DOM的解析，但是会阻止DOM树的渲染，因为如果DOM树在CSS加载完毕前渲染了，那么CSS加载完毕后会再执行一次引起页面的回流。CSS加载会阻塞后面js语句的执行
3. 将关键的CSS使用内联方式放置于页面
图片
1. 图形优化：保证压缩后的图片符合产品要求情况下进行图形优化
2. 使用适当的图像格式
3. 使用矢量图像（SVG）
格式小，具有响应性和完美缩放
4. 已知渲染图像大小情况下，设置宽高，浏览器会预先保留位置，以保证布局的稳定性
5. 懒加载
6. 响应式图像：为不同设备提供不同尺寸图像
JavaScript
1. 压缩
2. 避免使用内嵌JS
将JavaScript嵌入代码直接放在中可能会降低页面速度，因为它在构建DOM时会加载。最好的选择是使用async 或 defer的外部文件来避免阻塞DOM渲染。另一种选择是在中放置一些脚本。大多数时候是需要在DOM进入主处理之前加载的分析代码或小脚本。
3. 异步加载脚本
使用async或者defer加载所有script文件
4. 优化和更新JS库
大多数情况下，新版本都带有优化和安全性修复，所以应该使用最优化的代码来优化项目。确保不存在过时插件
5.检查JS代码性能问题
6. 使用 tree shaking 技术减少 JS 大小
7. 使用 code splitting 分包加载 JS
网络
1. 使用HTTPS
2. 控制cookie大小
cookie存在于HTTP头中，在Web服务器和浏览器之间交换。保持cookie的大小尽可能低是非常重要的，以尽量减少对用户响应时间的影响。
3. 减少HTTP请求
每个浏览器对于统一域名的HTTP并发数都是有限制的
4. 使用CDN提供静态文件
加大了浏览器HTTP请求的并发数
5. 正确设置HTTP缓存标头
合理利用缓存，避免多余的请求消耗
6. 启用GZIP压缩
压缩请求文件，减少带宽
