2021年要了解的34種JavaScript優化技術

用現代速記技術，技巧和竅門優化您的JavaScript代碼

開發人員的生活總是在學習新事物，并且跟上變化的難度不應該比現在已經難，我的動機是介紹所有JavaScript最佳實踐，例如速記和功能，我們作為前端開發人員必須知道這些使我們的生活在2021年變得更加輕松

您可能已經進行了很長時間的JavaScript開發，但是有時您可能沒有使用不需要解決或編寫一些額外代碼即可解決問題的最新功能。這些技術可以幫助您編寫干凈且優化的JavaScript代碼。此外，這些主題可以幫助您為2021年的JavaScript采訪做好準備。

在這里，我將提供一個新系列，介紹速記技術，這些速記技術可幫助您編寫更干凈和優化的JavaScript代碼。這是您在2021年必須知道的JavaScript編碼的備忘單。

1.如果有多個條件

我們可以在數組中存儲多個值，并且可以使用數組include方法。

//longhand
if (x==='abc' || x==='def' || x==='ghi' || x==='jkl') {
    //logic
}
//shorthand
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
   //logic
}

2.If true … else 簡寫

當我們具有不包含更大邏輯的if-else條件時，這是一個更大的捷徑。我們可以簡單地使用三元運算符來實現該速記。

// Longhand
let test: boolean;
if (x > 100) {
    test=true;
} else {
    test=false;
}
// Shorthand
let test=(x > 10) ? true : false;
//or we can use directly
let test=x > 10;
console.log(test);

當我們有嵌套條件時，我們可以采用這種方式。

let x=300,
test2=(x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(test2); // "greater than 100"

3.聲明變量

當我們要聲明兩個具有共同值或共同類型的變量時，可以使用此簡寫形式。

//Longhand 
let test1;
let test2=1;
//Shorthand 
let test1, test2=1;

4.空，未定義，空檢查

當我們確實創建新變量時，有時我們想檢查為其值引用的變量是否為null或未定義。JavaScript確實具有實現這些功能的非常好的捷徑。

// Longhand
if (test1 !==null || test1 !==undefined || test1 !=='') {
    let test2=test1;
}
// Shorthand
let test2=test1 || '';

5.空值檢查和分配默認值

let test1=null,
    test2=test1 || '';
console.log("null check", test2); // output will be ""

6.未定義值檢查和分配默認值

let test1=undefined,
    test2=test1 || '';
console.log("undefined check", test2); // output will be ""

正常值檢查

let test1='test',
    test2=test1 || '';
console.log(test2); // output: 'test'

（獎金：現在我們可以對主題4,5和6使用??運算符）

空位合并運算符

空合并運算符??如果左側為null或未定義，則返回右側的值。默認情況下，它將返回左側的值。

const test=null ?? 'default';
console.log(test);
// expected output: "default"const test1=0 ?? 2;
console.log(test1);
// expected output: 0

7.給多個變量賦值

當我們處理多個變量并希望將不同的值分配給不同的變量時，此速記技術非常有用。

//Longhand 
let test1, test2, test3;
test1=1;
test2=2;
test3=3;
//Shorthand 
let [test1, test2, test3]=[1, 2, 3];

8.賦值運算符的簡寫

我們在編程中處理很多算術運算符。這是將運算符分配給JavaScript變量的有用技術之一。

// Longhand
test1=test1 + 1;
test2=test2 - 1;
test3=test3 * 20;
// Shorthand
test1++;
test2--;
test3 *=20;

9.如果存在速記

這是我們大家都在使用的常用速記之一，但仍然值得一提。

// Longhand
if (test1===true)

// Shorthand
if (test1)

注意：如果test1有任何值，它將在if循環后進入邏輯，該運算符通常用于null或未定義的檢查。

10.多個條件的AND（&&）運算符

如果僅在變量為true的情況下才調用函數，則可以使用&&運算符。

//Longhand 
if (test1) {
 callMethod(); 
} 
//Shorthand 
test1 && callMethod();

11. foreach循環速記

這是迭代的常用速記技術之一。

// Longhand
for (var i=0; i < testData.length; i++)

// Shorthand
for (let i in testData) or  for (let i of testData)

每個變量的數組

function testData(element, index, array) {
  console.log('test[' + index + ']=' + element);
}

[11, 24, 32].forEach(testData);
// logs: test[0]=11, test[1]=24, test[2]=32

12.比較返回值

我們也可以在return語句中使用比較。它將避免我們的5行代碼，并將它們減少到1行。

// Longhand
let test;
function checkReturn() {
    if (!(test===undefined)) {
        return test;
    } else {
        return callMe('test');
    }
}
var data=checkReturn();
console.log(data); //output test
function callMe(val) {
    console.log(val);
}
// Shorthand
function checkReturn() {
    return test || callMe('test');
}

13.箭頭函數

//Longhand 
function add(a, b) { 
   return a + b; 
} 
//Shorthand 
const add=(a, b)=> a + b;

更多示例。

function callMe(name) {
  console.log('Hello', name);
}
callMe=name=> console.log('Hello', name);

14.短函數調用

我們可以使用三元運算符來實現這些功能。

// Longhand
function test1() {
  console.log('test1');
};
function test2() {
  console.log('test2');
};
var test3=1;
if (test3==1) {
  test1();
} else {
  test2();
}
// Shorthand
(test3===1? test1:test2)();

15.Switch速記

我們可以將條件保存在鍵值對象中，并可以根據條件使用。

// Longhand
switch (data) {
  case 1:
    test1();
  break;

  case 2:
    test2();
  break;

  case 3:
    test();
  break;
  // And so on...
}

// Shorthand
var data={
  1: test1,
  2: test2,
  3: test
};

data[something] && data[something]();

16.隱式返回速記

使用箭頭功能，我們可以直接返回值，而不必編寫return語句。

//longhand
function calculate(diameter) {
  return Math.PI * diameter
}
//shorthand
calculate=diameter=> (
  Math.PI * diameter;
)

17.小數基指數

// Longhand
for (var i=0; i < 10000; i++) { ... }

// Shorthand
for (var i=0; i < 1e4; i++) {

18.默認參數值

//Longhand
function add(test1, test2) {
  if (test1===undefined)
    test1=1;
  if (test2===undefined)
    test2=2;
  return test1 + test2;
}
//shorthand
add=(test1=1, test2=2)=> (test1 + test2);
add() //output: 3

19.點差運算符速記

//longhand
// joining arrays using concat
const data=[1, 2, 3];
const test=[4 ,5 , 6].concat(data);
//shorthand
// joining arrays
const data=[1, 2, 3];
const test=[4 ,5 , 6, ...data];
console.log(test); // [ 4, 5, 6, 1, 2, 3]

對于克隆，我們也可以使用傳播運算符。

//longhand

// cloning arrays
const test1=[1, 2, 3];
const test2=test1.slice()
//shorthand

// cloning arrays
const test1=[1, 2, 3];
const test2=[...test1];

20.模板文字

如果您厭倦了在單個字符串中使用+來連接多個變量，那么這種速記方式將消除您的頭痛。

//longhand
const welcome='Hi ' + test1 + ' ' + test2 + '.'
//shorthand
const welcome=`Hi ${test1} ${test2}`;

21.多行字符串速記

當我們在代碼中處理多行字符串時，可以使用以下功能：

//longhand
const data='abc abc abc abc abc abc\n\t'
    + 'test test,test test test test\n\t'
//shorthand
const data=`abc abc abc abc abc abc
         test test,test test test test`

22.對象屬性分配

let test1='a'; 
let test2='b';
//Longhand 
let obj={test1: test1, test2: test2}; 
//Shorthand 
let obj={test1, test2};

23.字符串成數字

//Longhand 
let test1=parseInt('123'); 
let test2=parseFloat('12.3'); 
//Shorthand 
let test1=+'123'; 
let test2=+'12.3';

24.分配速記

//longhand
const test1=this.data.test1;
const test2=this.data.test2;
const test2=this.data.test3;
//shorthand
const { test1, test2, test3 }=this.data;

25. Array.find的簡寫

當我們確實有一個對象數組并且我們想要根據對象屬性查找特定對象時，find方法確實很有用。

const data=[{
        type: 'test1',
        name: 'abc'
    },
    {
        type: 'test2',
        name: 'cde'
    },
    {
        type: 'test1',
        name: 'fgh'
    },
]
function findtest1(name) {
    for (let i=0; i < data.length; ++i) {
        if (data[i].type==='test1' && data[i].name===name) {
            return data[i];
        }
    }
}
//Shorthand
filteredData=data.find(data=> data.type==='test1' && data.name==='fgh');
console.log(filteredData); // { type: 'test1', name: 'fgh' }

26.查找條件速記

如果我們有代碼來檢查類型，并且基于類型需要調用不同的方法，我們可以選擇使用多個else if或進行切換，但是如果我們的速記比這更好呢？

// Longhand
if (type==='test1') {
  test1();
}
else if (type==='test2') {
  test2();
}
else if (type==='test3') {
  test3();
}
else if (type==='test4') {
  test4();
} else {
  throw new Error('Invalid value ' + type);
}
// Shorthand
var types={
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};
 
var func=types[type];
(!func) && throw new Error('Invalid value ' + type); func();

27.速記按位索引

當我們迭代數組以查找特定值時，我們確實使用indexOf（）方法，如果我們找到更好的方法呢？讓我們看看這個例子。

//longhand
if(arr.indexOf(item) > -1) { // item found 
}
if(arr.indexOf(item)===-1) { // item not found
}
//shorthand
if(~arr.indexOf(item)) { // item found
}
if(!~arr.indexOf(item)) { // item not found
}

按位（?）運算符將返回非-1的真實值。取反就像做！?一樣簡單。另外，我們也可以使用include（）函數：

if (arr.includes(item)) { 
// true if the item found
}

28. Object.entries（）

此功能有助于將對象轉換為對象數組。

const data={ test1: 'abc', test2: 'cde', test3: 'efg' };
const arr=Object.entries(data);
console.log(arr);
/** Output:
[ [ 'test1', 'abc' ],
  [ 'test2', 'cde' ],
  [ 'test3', 'efg' ]
]
**/

29. Object.values（）

這也是ES8中引入的一項新功能，它執行與Object.entries（）類似的功能，但沒有關鍵部分：

const data={ test1: 'abc', test2: 'cde' };
const arr=Object.values(data);
console.log(arr);
/** Output:
[ 'abc', 'cde']
**/

30. Double Bitwise簡寫

（雙重NOT按位運算符方法僅適用于32位整數）

// Longhand
Math.floor(1.9)===1 // true

// Shorthand
~~1.9===1 // true

31.重復一個字符串多次

要一次又一次地重復相同的字符，我們可以使用for循環并將它們添加到同一循環中，但是如果我們有一個簡寫方法呢？

//longhand 
let test=''; 
for(let i=0; i < 5; i ++) { 
  test +='test '; 
} 
console.log(str); // test test test test test 
//shorthand 
'test '.repeat(5);

32.在數組中查找最大值和最小值

const arr=[1, 2, 3]; 
Math.max(…arr); // 3
Math.min(…arr); // 1

33.從字符串中獲取字符

let str='abc';
//Longhand 
str.charAt(2); // c
//Shorthand 
Note: If we know the index of the array then we can directly use index insted of character.If we are not sure about index it can throw undefined
str[2]; // c

34.功率速記

數學指數冪函數的簡寫：

//longhand
Math.pow(2,3); // 8
//shorthand
2**3 // 8

如果您想了解JavaScript版本的最新功能，請檢查以下內容：

ES2021 / ES12

· replaceAll（）：返回一個新字符串，該字符串的所有模式匹配均被新的替換詞替換。

· Promise.any（）：它需要Promise對象的可迭代對象，并且當一個Promise履行時，返回帶有值的單個Promise。

· 弱引用：此對象持有對另一個對象的弱引用，而不會阻止該對象被垃圾回收。

· FinalizationRegistry：讓您在垃圾回收對象時請求回調。

· 方法和訪問器的私有可見性修飾符：私有方法可以用＃聲明。

· 邏輯運算符：&&和||操作員。

· 數字分隔符：啟用下劃線作為數字文字中的分隔符，以提高可讀性。

· Intl.ListFormat：此對象啟用語言敏感列表格式。

· Intl.DateTimeFormat：此對象啟用對語言敏感的日期和時間格式。

ES2020 / ES11

1. BigInt：提供了一種表示（整個）大于253–1的數字的方法

11.動態導入：動態導入提供了將JS文件作為模塊動態導入的選項。這將幫助您按需獲得模塊。

12.空合并運算符：如果左側為null或未定義，則返回右側的值。默認情況下，它將返回左側的值。

1. globalThis：包含全局this值，該值基本上用作全局對象。

1. Promise.allSettled（）：返回一個承諾，該承諾基本上包含具有每個承諾結果的對象數組。

15.可選鏈接：使用任何連接的對象或檢查方法讀取值，并檢查屬性是否存在。

1. String.prototype.matchAll（）：返回所有與正則表達式匹配字符串的結果的迭代器。

17.命名導出：使用此功能，每個文件可以有多個命名導出。

18.定義明確的順序：

1. import.meta：對象將特定于上下文的元數據公開給JS模塊

ES2019 / ES10

1. Array.flat（）：通過組合主數組中的其他數組來創建一個新數組。注意：我們可以設置合并數組的深度。

1. Array.flatmap：通過將回調函數應用于數組的每個元素來創建一個新數組。

1. Object.fromEntries（）：將鍵值對列表轉換為對象。

1. String.trimStart（）和String.trimEnd（）：方法從字符串的開頭和結尾刪除空格。

1. try…catch：語句標記要嘗試的語句塊，如果發生任何錯誤，catch將對其進行處理。

1. Function.toString（）：將任何方法/代碼轉換為字符串。

1. Symbol.prototype.description：返回Symbol對象的可選描述。

ES2018 / ES9

27.異步迭代：借助async和await，我們現在可以在for循環中運行一系列異步迭代。

1. Promise.finally（）：在結算或拒絕時返回承諾。這將有助于避免重復和捕獲處理程序。

1. Rest / Spread屬性：用于對象分解和數組。

30.正則表達式命名捕獲組：可以在方括號后使用符號？進行命名。

31.正則表達式s（dotAll）標志：匹配除回車符以外的任何單個字符。s標志更改了此行為，因此允許使用行終止符

32.正則表達式Unicode屬性轉義符：可以通過設置Unicode u標志以及 p {…}和 p {…}來設置Unicode屬性轉義符。

ES2017 / ES8

1. Object.entries（）：返回給定對象鍵和值對的數組。

1. Object.values（）：返回給定對象的屬性值的數組。

1. padStart（）：用另一個字符串填充當前字符串，直到結果字符串達到長度為止。

1. padEnd（）：從當前字符串的末尾開始，使用給定的字符串填充當前字符串。

1. Object.getOwnPropertyDescriptors（）：返回給定對象的所有自己的屬性描述符。

38.異步功能：在Promises上擴展以進行異步調用。

ES2016 / ES7

1. Array.prototype.includes（）：確定數組在給定值中是否包括某個值。它返回true或false。

40.求冪：返回將第一個操作數提升為第二個操作數的冪的結果。

ES2015 / ES6

41.箭頭函數表達式：在某些情況下可替代傳統函數表達式

42.增強的對象文字：擴展為支持設置對象構造。

43.類：使用class關鍵字創建類。

44.模板文字：可以使用$ {param}在字符串中直接添加參數

45.解構分配：幫助從數組解壓縮值或從對象解壓縮屬性。

46. Default + Rest + Spread：支持默認值，spread參數或數組作為參數。

47. Let + Const：

48. Promises：用于異步操作。

49.模塊：

50. Map + Set + WeakMap + WeakSet：

51.數學+數字+字符串+數組+對象API：

... ...

(本文由聞數起舞翻譯自rajaraodv的文章《34 JavaScript Optimization Techniques to Know in 2021》，轉載請注明出處，原文鏈接：https://medium.com/javascript-in-plain-english/34-javascript-optimization-techniques-to-know-in-2021-d561afdf73c3)

天為大家帶來的是大數據開發基礎的HTML基礎了解，HTML是英文Hyper Text Markup Language的首字母縮寫，又被稱為超文標記語言，是一種標記語言。大家平日里瀏覽的各個網站，就需要HTML技術，想要擁有好看美觀的網站，就不得不需要HTML的幫助。（HTML有多個版本，目前已發展到HTML5)

1. HTML基礎知識

HTML是一種標記語言，但這種語言是比較特殊的叫做超文標記語言，超文本的意思就是不止是文本，還可以包含圖片，鏈接，音樂，甚至程序等非文字元素。

標準的超文本標記語言文件都具有一個基本的整體結構，它的組成結構包括頭（Head）和主體（Body），其中“頭”部用于提供關于網頁的信息，“主體”部分用于提供網頁的具體內容。

標記符<html>,說明該文件是使用超文本標記語言來描述的,是該文件的開頭，相對的，有頭就有尾，</html>,就表示該文件的結尾，它們兩個是超文本標記語言文件的開始標記和結尾標記。當我們看到某個文件有這兩個標記符就可以判定該文件是由超文本標記語言描述的。不僅如此，“頭部”和“主體”也有頭尾之分,<Head>為頭部開始，</Head>為結束；<Body>為開頭</Body>為結束,另外HTML 標簽通常是成對出現的

<html>

<head>

</head>

<body>

<p>my name is linlin</p>

</body>

</html>

這樣一個簡單的網頁源碼的結構就出來了。

注意：寫完代碼記得將格式保存為.html（推薦使用）、.htm、.xhtml

2. HTML特點

(1)簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便。

(2)可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標示符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。

(3)通用性：雖然個人計算機大行其道，但使用MAC等其他機器的人也不占少數，超級文本標記語言可以在廣泛的平臺上使用，這也是萬維網（WWW）盛行的另一個原因。

(4)平臺無關性：另外，HTML是網絡的通用語言，簡單、通用。它的存在使得網頁制作人能夠建立文本與圖片及其他復雜的頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

3. 常用元素

HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼。這里就給大家簡單介紹一些常用的元素。

<head> 定義了文檔的信息

<title> 定義了文檔的標題

<base> 定義了頁面鏈接標簽的默認鏈接地址

如前文所說HTML是能夠幫助你提高網頁上限的語言，對于網頁的制作，不能僅僅是制作出，還要制作的方便，美觀。這樣，大家在瀏覽網頁時才會感到舒服，自己也會頗有成就感。希望大家能有所收獲。

SS有什么好研究的？

很多人覺得很奇怪，CSS有什么好研究的。怎么說呢？就好比，河水流動、蘋果下落，這些雖然看起來都是理所當然的現象，沒什么好研究的，但實際上，一旦深入，就可以從這些簡單現象中發現新的世界。

然而，發現與探索的過程是艱辛的，往往會付出很多，但發現很少，需要有足夠的熱愛以及鉆研精神才能堅持下去并有所收獲。恰好，我就是這種類型的人，我喜愛技術研究，喜歡做這種看起來吃力不討好的事情，但這些年的堅持也讓我有了足夠的積累。本書的內容就是我根據這些年研究總結出來的精華、經驗和技巧，也就是說，大家只要花幾小時捧起這本書，就能學到我花費幾年的時間提煉出來的東西，這些東西就是所謂的“干貨”，它們是技術文檔和技術手冊上沒有的，是稀缺且獨一無二的。

而這些稀缺的“干貨”，就是你和普通CSS開發人員的技術分水嶺，也是你未來的競爭力所在。行業里有一撥兒人，也自稱前端，但是只停留在可以根據設計稿寫出頁面這種水平，這種程度的人沒有技術優勢，一旦年齡和體力跟不上，將很容易被行業淘汰，因此你需要的不是浮于表面的那一點知識，而是更有深度、與用戶體驗走得更近的干貨和技能。這些就是本書能提供給你的。

正確認識本書

這是一本CSS進階書，非常適合有一定CSS基礎的前端人員學習和參考，新手讀起來會有些吃力，因為為了做到內容精練，書中會直接略去過于基礎的知識。

本書融入了大量我的個人理解，這些理解是我多年持之以恒對CSS進行研究和思考后，經過個人情感潤飾和認知提煉獲得的產物。因此，與干巴巴的教條式的技術書相比，本書要顯得更易于理解，有溫度，更有人文關懷。但是，個人的理解并不能保證百分之百正確，因此，本書的個別觀點也可能不對，歡迎讀者提出質疑和挑戰。

由于規范尚未定稿，本書部分比較前沿的知識點在未來會發生某些小的變動，我會實時跟進，并在官方論壇同步更新。

CSS選擇器世界

張鑫旭著

CSS選擇器揭秘，CSS指南
Web前端開發技術教程，”鑫空間-鑫生活”博主及《CSS世界》作者又一力作
全套在線demo，專屬圖書論壇及官方網站

CSS選擇器是CSS世界的支柱，撐起了整個精彩紛呈的CSS世界。本書專門介紹CSS選擇器的相關知識。在本書中，作者結合多年從業經驗，在CSS基礎知識之上，充分考慮前端開發人員的開發需求，以CSS選擇器的基本概念、優先級、命名、*佳實踐以及各偽類選擇器的概述和適用場景為技術主線，為CSS開發人員介紹有競爭力的知識和技能。此外，本書配有專門的網站，用以進行實例展示和問題答疑。

作為一本CSS進階書，本書非常適合有一定CSS基礎的前端開發人員學習和參考。

主體目錄

第1章概述免費
第2章 CSS選擇器的優先級免費
第3章 CSS選擇器的命名
第4章精通CSS選擇符
第5章元素選擇器
第6章屬性選擇器
第7章用戶行為偽類
第8章 URL定位偽類
第9章輸入偽類
第10章樹結構偽類
第11章邏輯組合偽類
第12章其他偽類選擇器

　《CSS選擇器世界》樣章試讀

以下內容截選自《CSS選擇器世界》第2章第２.２節。

2.2 深入CSS選擇器優先級

本節內容將有助于深入理解CSS選擇器的優先級，包括計算規則、實用技巧以及一些奇怪的有趣特性。

2.2.1 CSS選擇器優先級的計算規則

對于CSS選擇器優先級的計算，業界流傳甚廣的是數值計數法。具體如下：每一段CSS語句的選擇器都可以對應一個具體的數值，數值越大優先級越高，其中的CSS語句將被優先渲染。其中，出現一個0級選擇器，優先級數值+0；出現一個1級選擇器，優先級數值+1；出現一個2級選擇器，優先級數值+10；出現一個3級選擇器，優先級數值+100。

于是，有表2-1所示的計算結果。

表2-1選擇器優先級計算值

趁熱打鐵，我出一個小題考考大家，<body>元素的顏色是紅色還是藍色？

<html lang="zh-CN">
 <body class="foo">顏色是？</body>
</html>
body.foo:not([dir]) { color: red; }
html[lang] > .foo { color: blue; }

我們先來計算一下各自的優先級數值。

首先是body.foo:not([dir])，出現了1個標簽選擇器body，1個類名選擇器.foo和1個否定偽類:not，以及屬性選擇器[dir]，計算結果是1+10+0+10，也就是21。

接下來是html[lang] > body.foo，出現了1個標簽選擇器html，1個屬性選擇器[lang]和1個類名選擇器.foo，計算結果是1+10+10，也就是21。

這兩個選擇器的計算值居然是一樣的，那該怎么渲染呢？

這就引出了另外一個重要的規則—“后來居上”。也就是說，當CSS選擇器的優先級數值一樣的時候，后渲染的選擇器的優先級更高。因此，上題的最終顏色是藍色（blue）。

后渲染優先級更高的規則是相對于整個頁面文檔而言的，而不僅僅是在一個單獨的CSS文件中。例如：

<style>body { color: red; }</style>
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="b.css">

其中在a.css中有：

body { color: yellow; }

在``b.css中有：

body { color: blue; }

此時，body的顏色是藍色，如圖2-1所示，因為blue這段CSS語句在文檔中是最后出現的。

圖2-1 瀏覽器中body顏色的優先級

還有一個誤區有必要強調一下，那就是CSS選擇器的優先級與DOM元素的層級位置沒有任何關系。例如：

body .foo { color: red; }
html .foo { color: blue; }

請問.foo的顏色是紅色還是藍色？

答案是藍色。雖然<body>是<html>的子元素，離.foo的距離更近，但是選擇器的優先級并不考慮DOM的位置，所以后面的html.foo{}的優先級更高。

1．增加CSS選擇器優先級的小技巧

實際開發時，難免會遇到需要增加CSS選擇器優先級的場景。例如，希望增加下面.foo類名選擇器的權重：

.foo { color: #333; }

很多人的做法是增加嵌套，例如：

.father .foo {}

或者是增加一個標簽選擇器，例如：

div.foo {}

但這些都不是最好的方法，因為這些方法增加了耦合，降低了可維護性，一旦哪天父元素類名變化了，或者標簽換了，樣式豈不是就失效了？這里給大家介紹一個增加CSS選擇器優先級的小技巧，那就是重復選擇器自身。例如，可以像下面這樣做，既提高了優先級，又不會增加耦合，實在是上上之選：

.foo.foo {}

如果你實在不喜歡這種寫法，借助必然會存在的屬性選擇器也是不錯的方法。例如：

.foo[class] {}
#foo[id] {}

2．對數值計數法的點評

上面提到的CSS選擇器優先級數值的計數法實際上是一個不嚴謹的方法，因為1和10之間的差距實在太小了，這也就意味著連續10個標簽選擇器的優先級就和1個類名選擇器齊平了。然而事實并非如此，不同等級的選擇器之間的差距是無法跨越的存在。但由于在實際開發中，我們是不會連續寫上多達10個選擇器的，因此不會影響我們在實際開發過程中計算選擇器優先級。

而且對于使用CSS選擇器而言，你的書寫習慣遠比知識更重要，就算你理論知識再扎實，如果平時書寫習慣糟糕，也無法避免CSS樣式覆蓋問題、樣式沖突等問題的出現。我將在第3章中深入探討這個問題。因此，對于數值計算法，我的態度是，學一遍即可，沒有必要反復攻讀，做到面面俱到，只要你習慣足夠好，是不會遇到亂七八糟的優先級問題的。

在CSS選擇器這里，等級真的是無法跨越的鴻溝嗎？其實不是，這里有大家不知道的冷知識。

2.2.2 256個選擇器的越級現象

有如下HTML：

<span id="foo" class="f">顏色是？</span>

如下CSS：

#foo { color: #000; background: #eee; }
.f { color: #fff; background: #333; }

很顯然，文字的顏色是#000，即黑色，因為ID選擇器的級別比類名選擇器的級別高一級。但是，如果是下面的CSS呢？256個.f類名合體：

#foo { padding: 10px 20px; color: #000; background: #eee; }
.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f { color: #fff; background: #333; }

在IE瀏覽器下，神奇的事情發生了，文字的顏色表現為白色，背景色表現為深色，如圖2-2所示。

圖2-2 IE瀏覽器中類名的優先級更高

在IE瀏覽器下，讀者可以輸入https://demo.cssworld.cn/selector/2/2-1.php親自體驗與學習。

同樣，256個標簽選擇器的優先級大于類名選擇器的優先級的現象也是存在的。

實際上，在過去，Chrome瀏覽器、Firefox瀏覽器下都出現過這種256個選擇器的優先級大于上一個選擇器級別的現象，后來，大約2015年之后，Chrome瀏覽器和Firefox瀏覽器都修改了策略，使得再多的選擇器的優先級也無法超過上一級，因此，目前越級現象僅在IE瀏覽器中可見。

為什么會有這種有趣的現象呢？早些年查看Firefox瀏覽器的源代碼，發現所有的類名都是以8字節字符串存儲的，8字節所能容納的最大值就是255，因此同時出現256個類名的時候, 勢必會越過其邊緣，溢出到ID區域。而現在采用了16字節的字符串存儲，能容納的類型數量足夠多了，就不會出現這種現象。

當然，這個冷知識并沒有多大的實用價值，大致了解一下即可。

在線咨詢

上一篇：aardio + Ruby 可視化快速開發獨立 EX
下一篇：標題：頭條HTML提取失敗的背后：挑戰

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

2021年要了解的34種JavaScript優化技術

1.如果有多個條件

2.If true … else 簡寫

3.聲明變量

4.空，未定義，空檢查

5.空值檢查和分配默認值

6.未定義值檢查和分配默認值

空位合并運算符

7.給多個變量賦值

8.賦值運算符的簡寫

9.如果存在速記

10.多個條件的AND（&&）運算符

11. foreach循環速記

12.比較返回值

13.箭頭函數

14.短函數調用

15.Switch速記

16.隱式返回速記

17.小數基指數

18.默認參數值

19.點差運算符速記

20.模板文字

21.多行字符串速記

22.對象屬性分配

23.字符串成數字

24.分配速記

25. Array.find的簡寫

26.查找條件速記

27.速記按位索引

28. Object.entries（）

29. Object.values（）

30. Double Bitwise簡寫

31.重復一個字符串多次

32.在數組中查找最大值和最小值

33.從字符串中獲取字符

34.功率速記

ES2021 / ES12

ES2020 / ES11

ES2019 / ES10

ES2018 / ES9

ES2017 / ES8

ES2016 / ES7

ES2015 / ES6

SS有什么好研究的？

正確認識本書

CSS選擇器世界

主體目錄

《CSS選擇器世界》樣章試讀

2.2.1 CSS選擇器優先級的計算規則

2.2.2 256個選擇器的越級現象

您的項目需求

　《CSS選擇器世界》樣章試讀