前端性能优化
1.)减少DOM的操作
- 操作DOM耗性能，因为会引发DOM的重排（回流）和重绘
- VUE/REACT等框架是不需要我们操作DOM的（推荐）
- 读写分离
- 基于文档碎片或者字符串拼接的方式，批量实现DOM创建
- 修改样式尽可能使用transform
- 要修改样式的元素，尽可能在单独的文档流（层）【使用position定位】
- .....
2.）减少页面中HTTP的请求数量和大小
【HTTP有并发限制、多个HTTP请求需要等待资源加载回来在渲染】
- 资源合并&压缩【例如：css合并为一个、JS合并为一个、雪碧图...->webpack】
- 图片/音视频的懒加载【首次渲染页面，减少HTTP请求，以此来优化白屏等待时间；当页面渲染完，再去请求真正的图片】
- 在保证图片不失真的情况下，尽可能压缩大小，或者使用字体图标
- css代码不多的时，使用内嵌式【原因：减少HTTP请求&加快样式渲染】
- 开启HTTP
- 开启服务器的GZIP压缩
- 图片使用BASE64【正常方式加载图片需要经历：请求、编码、渲染三个步骤，】而每个步骤都需要一些时间，base64是直接给图片设置对应编码，浏览器只需要渲染即可【问题：base64码太长了，不方便开发和维护，也增加了页面请求时间，所以真是项目中，base64我们会基于webpack编译生成，而且不要过度使用】
3）前端骨架屏渲染：客户端骨屏 + 服务器骨架屏 首次渲染快，减少白屏
- SEO搜索引擎优化
- SEM百度竞价排名
- 网站Alex排名
- 关键词权重
- 服务器渲染{SSR}【vue:nuxt.js react:next.js】
- 服务器渲染有利于SEO优化，而客户端渲染是做不了的
- 在“服务器并发压力较强”的情况下，服务器渲染是可以更快实现页面渲染的
- 弊端：导致服务器压力过大、前后端没有完全分离...
- 服务器只需要完成首屏信息的渲染即可，其余屏幕还是交给客户端完成
- 纯前端骨架屏方案【Loading效果】
4）终极方案：使用CDN
零零散散
1） css
- css样式表置于头部导入，在渲染DOM-TREE的时候预先请求样式资源，让页面渲染速度加快
- css选择器不要太深
- 尽可能使用CSS3动画，如果需要使用JS动画，则最好使用requestAnimationFrame
- 避免使用table布局
- css中减少filter的使用
- 不要使用@import导入css资源【原因阻塞GUI渲染】
- 避免使用css表达式
