原则:
- 多使用内存、缓存或其他方法
- 减少CPU计算量,减少网络加载耗时(适用于所有编程的性能优化-空间换时间)
从何入手:让加载更快,让渲染更快
「 让加载更快 」
1. 减少资源体积:
- 压缩代码:webpack配置 mode:'production'
- 图片压缩
2. 减少访问次数:
- 合并代码: js文件 css文件 图片(雪碧图)
-
SSR: 服务端渲染:将网页和数据一起加载,一起渲染
如早先的JSP ASP PHP ,现在的vue React SSR. -
缓存:webpack配置 output.filename:'bundle.[contenthash].js',静态资源加hash后缀,根据文件内容计算hash;文件内容不变,则hash不变,则url不变;url和文件不变,则自动触发http缓存机制,返回 304
使用更快的网络: - CDN:根据区域访问运营商的IP,访问更快
「 让渲染更快 」
1. CSS放在 head里面,JS放在body最下面
在渲染DOM节点前把CSS规则加载完,防止重复渲染Render Tree 渲染页面时,如果遇到script,则暂停渲染,优先加载并执行JS代码, 完成再继续放在中间阻塞dom渲染
2. 尽早开始执行js,用DOMContentLoaded触发
```
window.addEventListener('load',function(){
//页面加载完全部资源才执行,包括图片,视频
})
window.addEventListener('DOMContentLoaded',function(){
//DOM渲染完即可执行,包括图片,视频可能没加载完
})
```
3. 懒加载,图片懒加载,上滑加载更多
```
<img id="img1" src="preview.png" data-realsrc="abc.png" alt="">
<script type="text/javascript">
var img1=document.getElementById('img1')
//判断滑动到底部的时候赋值给图片真正的src
img1.src=img.getAttribute('data-realsrc')
</script>
```
网友评论