前端知识点-优化篇
优化
少设置全局变量，少全局查找（如需要全部变量，全局变量数据局部化）少闭包，及时清除定时器，事件委托，循环优先使用do...while...(合并循环变量和条件)，for 循环减少长度获取，文档碎片代替append
代码执行 工具：JSBench
减少判断层级
减少作用域链查找层级
// 全局变量局部化
fun1(){
const a = window.inneiHeight;
console.log(a);
}
// 文档碎片代替append
let frg = document.createDocumentFragment();
for(let i=0; i<1000; i++){
let el = document.createElement('p')
el.innerHTML = "lg is a coder"
fra.appChild(el)
}
document.body.appChild(frg)
复制代码 // 减少判断层级
// 方法1：
fun2(){
if(){
if(){
}
}else{
}
}
// 方法2:优先推荐
fun3(){
if(){}
if(){}
if(){}
}
复制代码页面加载阶段
- dns预解析
- 使用cdn
- 静态资源的压缩与合并
- 减少http请求
- 异步加载defer，async
- 服务端渲染ssr
- 多使用内存和缓存
页面渲染阶段
css放前面，js放后面
<html>
<head></head>
<body>
<!-- 页面布局 -->
<script></script>
</body>
</html>
复制代码- 减少dom查询，多次使用的保存为变量
- 减少dom操作，统一通过dom片段操作
- 事件函数的节流和防抖（手写）
- 图片懒加载，预加载
- 尽早进行操作，domContextLoad 与 load
- 使用字体图标或者svg来代替传统的png等格式的图片
代码层面
防抖，节流
// 防抖，在第一次触发事件时，不立即执行函数，而是给出一个期限值比如1000ms
// 如果短时间在大量触发同一事件，只会执行一次函数
// 就是事件触发后等待一会，看还触发不了，触发了重新等待执行
function debounce(fn, delay){
let timer = null;
return function(){
if(time){
clearTimeout(timer);
}
timer = setTimeout(fn, delay);
}
}
// 节流
// 防止无聊人士没事瞎点击，在delay时间范围内多次触发只执行一次
let isClick = true;
function throttle(fn, delay){
let valid = true;
return function(){
if(valid){
valid = false;
setTimeout(()=>{
fn();
valid = true;
}, delay)
}
}
}
复制代码动态脚本加载技术
function loadScript(url, cb){
let script = document.createElement("script");
script.type = "text/javascript";
if(script.readyState){
script.onreadystatechange = function(){
if(script.readyState === 'loaded' || script.readyState === 'complete'){
script.onreadystatechange = null;
cb();
}
}
}else{
script.onload = function(){
cb();
}
}
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
// 使用
loadScript('./a.js',function(){
loadScript('./b.js',function(){
loadScript('./c.js',function(){
console.log('加载完成')
})
})
})
复制代码循环中减少属性查找并反转(可以提升50%-60%的性能)
// 不推荐
for(var i=0; i<tem.length; i++){
process(item[i]);
}
// 推荐
// for 循环
for(var i=item.length; i--){
process(item[i]);
}
// while循环
var j = item.length;
while(j--){
process(item[i]);
}
复制代码基于函数的迭代（比基于循环的迭代慢）
// for...in... 循环比较慢，因为每次迭代操作时会同时查询实例或原型属性
// for循环迭代比forEach函数迭代性能高
// 不推荐
items.forEach(function(value,index,array){
process(value);
})
复制代码长列表性能优化，只渲染可视区域的列表
长表格性能优化，通过canvers来绘制表格
操作dom，不要用原始的方式来操作，vue中，可用ref，el，事件中e.target
递归可做尾递归的优化
避免嵌套循环和死循环
尽可能的使用事件委托来处理事件的绑定
vue
合理使用keep-alive来缓存数据
路由懒加载
import配合箭头函数
require
组件懒加载，异步加载
服务端渲染ssr，优化seo，首页白屏
模板预编译，使用vue-template-loader，把模板编译成渲染函数
webpack
去掉无用代码 treeShaking
使用souceMap，来还原线上代码，方便定位线上问题
使用chunck
图片可以使用webp，优雅降级处理
项目
打包打多份，根据浏览器支持，拉取es6 或 es5语法
浏览器缓存的使用
开启gzip
使用chrome的性能分析工具，查找性能瓶颈
静态资源和服务不要放在同一台机器上，多个域名去并行加载解析
设计模式的出现是为了代码复用，增加可维护性
作者：摘笑
链接：https://juejin.cn/post/6974334144083918878
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
虚心学习、丰富自己
