簡介:前言我想死你們啦~今天給大家帶來前端面試必會問到的前端性能優化問題，暫定分三期給大家帶來，第一期講述基本的代碼優化，後續還有網絡傳輸層優化和頁面加載速度優化，敬請期待，也歡迎點擊查看原文了解更多前端小 ...轉發+關注，私信小編“資料”免費分享資料給你！
前言
我想死你們啦~
今天給大家帶來前端面試必會問到的前端性能優化問題，暫定分三期給大家帶來，第一期講述基本的代碼優化，後續還有網絡傳輸層優化和頁面加載速度優化，敬請期待，也歡迎點擊查看原文了解更多前端小知識。
點關注，不迷路，我們一起鹹魚翻個身兒。
正文
為什麼要進行性能優化？
性能優化的總體方向
高效 ：合理安排資源快速 ：減少等待時間標準 ：首次有效繪製（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、不濫用高消耗的樣式
7、選擇器合併
8、 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、合併表達式
<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學習資料獲取方式
私信不要多字，不要少字，不要錯字，私信方法：點擊我頭像，進入主頁面，右上角有私信功能，在關注的上方位置。