性能优化思路

性能优化–优化策略

• 这是个综合性的问题
• 没有标准答案
• 关注核心点

性能优化的原则

• 多使用内存、缓存或者其他方法
• 减少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
 或字符串+字符串
 最后只插入一次即可。