1. 性能优化原则
- 多使用内存、缓存或其他方法
- 减少CPU计算量,减少网络加载耗时
- (适用于所有编程的性能优化——空间换时间)
2. 从何入手
(1)让加载更快
- 减少资源体积,压缩代码
- 减少访问次数:合并代码,SSR服务器端渲染,缓存
- 使用更快的网络:CDN
(2)让渲染更快
- CSS放在head,JS放在body最下面
- 尽早开始执行JS,用DOMContentLoaded触发
- 懒加载(图片懒加载,上滑加载更多)
- 对DOM查询进行缓存
- 频繁DOM操作,合并到一起插入DOM结构
- 节流throttle,防抖debounce(体验性优化,让渲染更加流畅)
3. 缓存
- 静态资源加hash后缀,根据文件内容计算hash
- 文件内容不变,则hash不变,则url不变
- url和文件不变,则会自动触发http缓存机制,返回304
4. SSR(Server Side Render)
- 服务器端渲染:将网页和数据一起加载,一起渲染
- 非SSR(前后端分离):先加载网页,再加载数据,再渲染数据
- 早先的JSP、ASP、PHP都是SSR,现在的Vue、React用node做SSR
5. 懒加载
<img id="img1" src="preview.png" data-realsrc="abc.png" />
<script type="text/javascript">
var img1 = document.getElementById('img1')
img1.src = img1.getAttribute('data-realsrc')
</script>
6. 防抖 debounce
例如:监听一个输入框,文字变化后触发onchange事件,如果直接用keyup事件,则会频繁触发onchange事件。
防抖:用户输入结束或暂停时,才会触发change事件
html代码:
<input id="input1" />
javascript代码:
const input1 = document.getElementById('input1')
let timer = null
input1.addEventListener('keyup', funtion(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(() => {
// 模拟触发change事件
console.log(input1.value)
// 清空定时器
timer = null
}, 500)
})
封装:
function debounce(fn, delay = 500){
// timer在闭包中
let timer = null
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
input1.addEventListener('keyup', debounce(() => {
console.log(input1.value)
}), 600)
7. 防抖 throttle
例如:拖拽一个元素时,要随时拿到该元素被拖拽的位置,如果直接用drag事件,则会频繁地触发,很容易导致卡顿。
节流:无论拖拽速度多快,都会每隔100ms触发一次
html代码:
<div id="div1" draggable="true">可拖拽</div>
<style>
#div1{
border:1px solid #ccc;
width:200px;
height:200px;
}
</style>
javascript代码:
const div1 = document.getElemengById('div1')
let timer
div1.addEventListener('drag', function(e){
if(timer){
return
}
timer = setTimeout(() => {
console.log(e.offsetX, e.offsetY)
timer = null
}, 100)
})
封装:
function throttle(fn, delay = 100){
let timer = null
return function(){
if(timer){
return
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
div1.addEventListener('drag', throttle((e) => {
console.log(e.offsetX, e.offsetY)
}), 200)