一、性能优化的原则
- 多使用内存、缓存
- 减少CPU计算、减少网络请求
二、 性能优化入手点
2.1 页面和静态资源的加载
-
静态资源的压缩合并
<script src="a.js"></script>
<script src="b.js"></script>构建工具合并 ==> <script src="ab.js"></script> -
静态资源缓存
静态资源由浏览加载一次后会有缓存，只要静态资源名字不改变，则访问浏览器的缓存。只有内容改变的时候，静态资源名字才会改变。 -
使用cdn让资源加载更快
常用的cdn服务百度CDN库、360的CDN服务、新浪公共CDN库、BootCDN、又拍云CDN库、CDNJS.CN和开放静态文件CDN库。 -
使用ssr后端渲染
好处：数据直接输出到html中进行渲染，而不需要使用ajax发送数据请求得到数据后再进行渲染。
2.2 页面的渲染
-
css放在头部，js放在底部，因为js会阻塞页面渲染
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<script src="main.js"></script>
</body>
</html> -
懒加载（图片懒加载、下拉加载更多）
实现原理：使用尺寸较小的图片作为预览图，在img的自定义数据属性data-realsrc里存储图片的真实src链接，当页面渲染到图片时再进行src的替换。
<script>
var img = document.getElementById('lazyImg')
img.src = img.getAttribute('data-realsrc')
</script> -
减少dom查询，对dom查询做缓存
// 未优化
for (var i = 0; i < document.getElementById('p').length; i ++) {
// something to do
}// 优化后 var pList = document.getElementById('p') for (var i = 0; pList.length; i ++) { // something to do } -
减少dom操作，多个操作尽量合并在一起执行
var listNode = document.getElementById('list')
// 要插入10个li标签
var frag = document.createDocumentFragment()
for (var x = 0; x < 10; x++) {
li = document.createElement('li')
li.innerHTML = 'List item' + x
frag.appendChild(li)
}
listNode.appendChild(frag) -
事件节流
实现原理：设置事件的延迟执行，当用户快速持续地触发keyup事件时，只有最后一次触发才会执行。
var input = document.getElementById('input')
var timer
input.addEventListener('keyup', function() {
if (timer) clearTimeout(timer)
timer = setTimeout(function() {
// 触发事件
}, 100)
}) -
尽早执行操作
window.addEventListener('load', function() {
// 页面的全部资源加载完才会执行，包括图片、视频等，等待时间可能比较久
})window.addEventListener('DOMContentLoaded', function() { // 渲染完即可执行，此时图片、视频可能还没有加载完。大部分框架使用此方法 })
网友评论