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选择器世界》样章试读