一.图片优化
1.使用雪碧图（webpack和gulp都有对应插件自动转换成雪碧图），减少请求。
2.压缩图片质量(打包编译可以找对应的插件，手动版可以看下智图)，在不失真和可接受失真条件下可以减少大量数据请求。
3.小图可以考虑base64，最好不要大于5kb，简单图可以考虑用canvas和svg代替。
4.条件允许考虑使用webp，不过要注意兼容问题。具体可以参考这篇文章
5请务必指定img大小来减少图片资源加载完后造成的重排性能损耗
未设置图片大小
图中update layer tree时间就是不指定图片大小造成的损耗。对于页面负责程度较高的这里造成的顺畅会影响用户体验。
6.灵活使用srcset 或picture 让图片响应式加载。
7.首屏多图可以通过图片懒加载去减少请求数，通过占位符显示图片（比如全部请求预览图），到可视区域时再加载实际图片。
二js代码优化
1.减少dom操作，dom树渲染和js代码编译是通过不同的引擎实现的，每次通过js动态操作dom，都会造成2个引擎建立连接额外开销。现在通过框架去开发项目基本不会考虑这个问题了，vue react都引入了vdom。vdom通过diff算法同步到dom tree减少了额外的性能损耗达到提升性能的效果，具体可以看下这篇介绍。
2.减少重绘重排。虽然现代浏览器对重绘重排有做优化，但是代码中引入获取当前布局的api都会造成强制重绘重排。
/**会触发重排的属性。
offsetTop,offsetLeft,offsetWidth,offsetHeight;
scrollTop,scrollLeft,scrollWidth,scrollHeight;
clientTop,clientLeft,clientWidth,clientHeight;
getComputedStyle()/currentStyle**/
//以下代码在本机测试结果0.17ms和0.32ms
if (document.body.currentStyle) {
computed = document.body.currentStyle;
} else {
computed = document.defaultView.getComputedStyle(document.body, '');
}
function testOneByOne() {
for(var i=0;i<10000;i++){
s.color = 'red';;
tmp = computed.backgroundColor;
s.color = 'white';
tmp = computed.backgroundImage;
s.color = 'green';
tmp = computed.backgroundAttachment;
}
}
function testAll() {
start()
for(var i=0;i<10000;i++){
s.color = 'yellow';
s.color = 'pink';
s.color = 'blue';
}
// tmp = computed.backgroundColor;
// tmp = computed.backgroundImage;
// tmp = computed.backgroundAttachment;
end()
}
3.使用事件代理代替批量绑定，给每个元素绑定事件会带来额外开销。可以通过事件冒泡通过来源进行不同事件处理。
4.高频事件考虑用防抖和节流，像滚动触发更新，输入框输入联想请求。
5.减少作用域访问层级，一个执行环境中寻找对象是通过作用域连去查值的，如果当前环境没有会随着作用域连一层一层往上直到全局环境。
6.频繁的对象属性访问可以先缓存到内存。
7.字面量的创建执行效率比new 一个对象效率要高
var str ='str';
var str2= String('str');//也没人会这么用吧
var arr=['1'];
var arr2=Array('1');//也没人会这么用吧
8.闭包有很多好处，主要是利用闭包的特性进行传参和属性的动态初始化。
常见的：利用匿名函数自执行封装自身属性，防止属性外协。
上面提到的防抖节流就可以利用闭包特性。
还有柯里化的使用
但是:闭包本身会带来内存无法被回收的问题。如果在业务逻辑确认是无效代码最好清除闭包引用保证能被回收。
三 css优化
1.head头css后面不要跟script 会阻塞dom往下解析
<script>
setTimeout(function(){
var testdom=document.getElementById("test");
console.log(testdom)
},10)
</script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script>
//如果没有这段script，link解析完就会往下解析下面的body。原因在于dom引擎和javscript引擎只占其一。
//如果css文件够大 二网络又很不稳定 这一小段代码就很影响体验了
</script>
<title>Document</title>
</head>
<body>
<div id="test">test</div>
</body>
2.合理有规范的编写cssname。有关css查找规则可以参考这个
//以业务模块为单位，合理给class命名
<div class='wrapper'>
<header class='header'>
<ul class="header-menu menu">
<li class="header-menu-item"></li>
</ul>
</header>
<div class="content">
<ul class="content-menu menu">
<li class="content-menu-item"></li>
</ul>
</div>
</div>
<style>
.content .menu li{
}
//or
.content-menu-item{
}
</style>
3.简单动画可以使用css3来实现 css动画和js动画对比
四：关于加载优化，（首屏加载优化会再启一篇文章做总结）
利用你手头资源对代码进行压缩和合并，加快首屏代码加载速度。
包括但不限于
- js加载编译后置
2.开启gzip
3.客户端缓存策略（假设是在webview），cdn缓存，service-work缓存。
4.首屏加载有效代码率。
5.使用预加载(preload,如果是客户端，可以考虑变种策略)
网友评论