前端知識點-優化篇
阿新 • • 發佈：2021-06-19
優化
少設定全域性變數，少全域性查詢（如需要全部變數，全域性變數資料區域性化）少閉包，及時清除定時器，事件委託，迴圈優先使用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
來源：掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。