减少页面的http请求：
1、webpack打包：CSS/JS 合并打包;
2、小图标等用iconfont代替;
3、使用雪碧图;
减少静态资源的体积
压缩静态资源：合并打包的js、css文件体积一般会比较大，一些图片也会比较大，这个时候必须要压缩处理。不论是gulp还是webpack，都有相应的工具包。针对个别图片，也可以单独拿出来处理，我个人经常使用这个网站 tinypng.com/ 在线压缩
编写高效率的CSS:CSS预处理器嵌套层数，一般建议三层即可；
服务端开启gzip压缩，能压缩60、70%，如果前端部署用node、express作服务器的话，使用中间件compression即可开启gzip压缩。
4、懒加载和预加载
懒加载：当页面出现时，请求数据，没有展示在用户的数据先不加载。
1、data-src图片的真正地址src="default"
2、IntersectionObserver API为开发者提供了一种可以异步监听目标元素与其祖先或视窗(viewport)
处于交叉状态的方式。祖先元素与视窗(viewport)被称为根(root)。
预加载：有些时候，文件内容较大，加载过慢，会有白屏现象，可以提前请求数据。
XMLHttpRequest，虽然存在跨域问题，但会精细控制预加载过程
img
css性能优化
参考地址：https://juejin.cn/post/6844903649605320711?utm_source=
gold_browser_extension
1、首屏关键css样式内联引入
内联引入css的缺点：不能进行缓存，每次都会重新加载渲染。
2、css代码
嵌套层数不可过多，一层一层的查找会影响到加载速度；
将重复性的代码提取为公共的类；
3、异步加载css
第一种方式是使用JavaScript动态创建样式表link元素，并插入到DOM中。
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
第二种方式是将link元素的media属性设置为用户浏览器不匹配的媒体类型（或媒体查询），如media="print"，甚至可以是完全不存在的类型media="noexist"。对浏览器来说，如果样式表不适用于当前媒体类型，其优先级会被放低，会在不阻塞页面渲染的情况下再进行下载。
当然，这么做只是为了实现CSS的异步加载，别忘了在文件加载完成之后，将media的值设为screen或all，从而让浏览器开始解析CSS。
<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">
第三种方式是通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel改回去。
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
第四种方式是rel="preload"，as是必须的。忽略as属性，或者错误的as属性会使preload等同于XHR请求，浏览器不知道加载的是什么内容，因此此类资源加载优先级会非常低。
参考地址：
https://www.w3.org/TR/preload/
https://github.com/filamentgroup/loadCSS/tree/v2.0.1#loadcss
<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">
4、css文件压缩
通过构建工具，如webpack、gulp/grunt、rollup等也都支持CSS压缩功能。压缩后的文件能够明显减小，可以大大降低了浏览器的加载时间。
