性能优化–优化策略
- 这是个综合性的问题
- 没有标准答案
- 关注核心点
性能优化的原则
- 多使用内存、缓存或者其他方法
- 减少CPU计算、减少网络请求
从哪里入手
加载页面和静态资源
- 静态资源的合并压缩(合并减少请求个数,压缩减少文件大小)
- 静态资源缓存(刷新时减少重复请求,通过改名[加版本号/时间戳]来控制缓存)
- 使用CDN让资源加载更快(CDN能够让你请求最近/最快的服务器)
- 使用SSR(server side render)服务端渲染,数据直接输出到HTML中
关于SSR:虽然ssr的概念是Vue,React提出的,但其实最早的jsp,php,asp都属于后端渲染。把数据直接输入到html中,而不是通过ajax请求数据再渲染。
页面渲染优化
- CSS 放前边,JS放后边
- 懒加载(图片懒加载,下拉加载更多)
- 减少DOM查询,对DOM查询做缓存(DOM操作很耗费性能)
- 减少DOM操作,多个操作尽量合并在一起执行
- 事件节流
- 尽早执行操作(如使用 DOMContentLoaded代替window.onload)
关于懒加载:在图片位置先放一个很小的假图片src用来快速加载。然后在图片上定义一个属性,属性上是图片实际需要的src,渲染完后把实际的src赋值给img,这样,当实际的图片加载完之后会自动替换,看上去就好多了。
<img id="img1" src="preview.png" data-realsrc="abc.png">
<script>
var img1 = $('#img1')
img1.attr('src', img1.attr('data-realsrc'))
</script>
关于DOM操作
// DOM查询缓存
var p = $('#p') // 减少查询p的次数
// 合并dom插入
appendChild也很耗费性能,所以使用
document.createDocumentFragment
或字符串+字符串
最后只插入一次即可。