簡介:前言我想死你們啦~今天給大家帶來前端面試必會問到的前端性能優化問題，暫定分三期給大家帶來，第一期講述基本的代碼優化，後續還有網絡傳輸層優化和頁面加載速度優化，敬請期待，也歡迎點擊查看原文了解更多前端小 ...轉發+關注，私信小編“資料”免費分享資料給你！
前言
我想死你們啦~
今天給大家帶來前端面試必會問到的前端性能優化問題，暫定分三期給大家帶來，第一期講述基本的代碼優化，後續還有網絡傳輸層優化和頁面加載速度優化，敬請期待，也歡迎點擊查看原文了解更多前端小知識。
點關注，不迷路，我們一起鹹魚翻個身兒。
正文
為什麼要進行性能優化？
- 用戶: 提升用戶體驗，改善頁面性能。
- 開發者: 體現公司意志和開發人員技能。
性能優化的總體方向
- 高效 ：合理安排資源
- 快速 ：減少等待時間
- 標準 ：
- 首次有效繪製（First Meaningful Paint，簡稱FMP，當主要內容呈現在頁面上）
- 英雄渲染時間（Hero Rendering Times，度量用戶體驗的新指標，當用戶最關心的內容渲染完成）
- 可交互時間（Time to Interactive，簡稱TTI，指頁面佈局已經穩定，關鍵的頁面字體是可見的，並且主進程可用於處理用戶輸入，基本上用戶可以點擊UI並與其交互）
- 輸入響應（Input responsiveness，界面響應用戶輸入所需的時間）
- 感知速度指數（Perceptual Speed Index，簡稱PSI，測量頁面在加載過程中視覺上的變化速度，分數越低越好）
1.1、HTML/CSS優化
1、能用html/css解決的問題就不要用js，更快的開發速度，更小的維護成本。
適用場景：
<code>//導航高亮
nav li {
opacity: 0.5;
}
nav li:hover {
opacity: 1;
}
//鼠標懸停顯示模塊
.menu {
display: none;
}
.nav:hover + .menu {
display: inline-block;
}
.menu:before {
content: '';
position: absolute;
top: -20px;
left: 0px;
width: 100%;
height: 20px;
}/<code>
2、自定義radio/checkbox樣式
<code>input[type=checkbox]{}
input[type=checkbox]:checked{}/<code>
3、巧用css偽類，合理使用原生選擇器，如：:focus、@media、input[type=email]:invalid
4、使用全局樣式sass、scss
5、優化HTML標籤
- 文字
、
減少css代碼
- 表單<form>
- 列表
- 、
- 圖片
、<picture>
- 鏈接
- 根據情況使用input type值
- 使用HTML5語義化標籤
<code>//一個語義化的網頁佈局
<header>
<main>
/<main>
<footer>/<code>
6、不濫用高消耗的樣式
- box-shadow、border-radius、float需要瀏覽器進行大量的計算，應減少使用
7、選擇器合併
- 把有共同的屬性內容的一系列選擇器組合到一起，能壓縮空間和資源開銷
8、 0值去單位
- 對於為0的值，儘量不要加單位，增加兼容性
1.2、JS優化
1、減少前端代碼耦合
- 使用傳參的方法減少耦合
- 利用策略模式抽離公共組件、參數、封裝請求
2、JS書寫優化
- 按照強類型風格去寫代碼，指明變量類型和返回類型
- 字面量與局部變量的訪問速度最快，數組元素和對象成員相對較慢
<code> //bad
let num,
str,
obj;
//good
let num = 0;
str = '',
obj = null;
//bad
getPrice:function(price){
if (price < 0) {
return false;
}else {
return price * 10
}
}
//good
getPrice:function(price){
if (price < 0) {
return -1;
}else {
return price * 10
}
}
//類型確定，解析器不會去做一些額外的的工作，類型不確定的情況下回發生優化回滾
//優化回滾：編譯器已經編譯完成函數，類型變化導致回滾到通用狀態，重新生成函數/<code>
3、減少作用域查找
- 儘量少的不要讓代碼暴露在全局作用域下，變量從局部作用域到全局作用域的搜索過程越長速度越慢
<code> //bad
//good
/<code>
4、對象嵌套的越深，讀取速度就越慢
- 無意義的對象嵌套拖累讀取速度
5、避免 == 的使用
- 確定類型的情況下直接使用 ===
6、合併表達式
- 用三目運算符代替簡單的if-else
<code> //bad
function getPrice(count){
if(count < 0){
return -1;
}else {
return count * 100;
}
}
//good
function getPrice(count){
return count <0 ? return -1 : count * 100;
}
//在進行代碼壓縮的時候，即時書寫的是if-else，壓縮工具也會幫你把它改成三目運算符的形式/<code>
1.3、使用ES6簡化代碼
1、使用箭頭函數取代小函數
<code> var num = [4,6,8,3,1,0]
//bad
num.sort(function (a,b){
return a-b;
})
//good
num.sort(a,b => a-b);
```
* 使用ES6的class
```
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
addAge() {
this.age++;
}
setName(name) {
this.name = name;
}
}/<code>
2、字符串拼接
<code> let url = `/list.html?page=${page}&type=${type}`;/<code>
3、塊級作用域變量，使用let代替var
尾聲
總結的內容到這裡差不多就結束了，大多數來自工作中的一些總結和整理。文中若有不當之處，歡迎指出共同交流~~
web學習資料獲取方式
私信不要多字，不要少字，不要錯字，私信方法：點擊我頭像，進入主頁面，右上角有私信功能，在關注的上方位置。
分享到:
閱讀更多 y奈何k 的文章
