导图社区 前端知识体系
- 175
- 4
- 1
- 举报
前端知识体系
前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。本思维导图涉及前端常用知识，内容包括：API浏览器环境，Node环境，Electron环境，小程序环境，HTML,Javascript,Css，适用于学习指导与面试巩固，希望对你有帮助！
编辑于2021-04-11 11:46:52- 知识管理
- 前端知识
- 知识学习
- 浏览器环境
- 相似推荐
- 大纲
前端知识体系
API
浏览器环境
BOM 跟DOM 是什么关系
API
DOM
创建节点
createElement
createTextNode
createDocumentFragment
createAttribute
查询节点
querySelector
querySelectorAll
更新节点
innerHTML
innerText
textContent
style
添加节点
innerHTML
appendChild
insertBefore
setAttribute
删除节点
removeChild
CSSOM
事件
BOM
如何分类: https://dom.spec.whatwg.org/
window
location
navigator
screen
history
Nodes
跟HTML的语法是一一对应的关系
Document
对应 html文档本身
DocumentFragment
永远不会挂载到BOM 树上
Element
DocumentType
对应 DTD
Text
ProcessingInstruction
对应 问号标签 <? key value>
Commont
<!-- -->
Ranges
Events
实现原理
解析
构建DOM树
计算CSS
渲染，合成，绘制
Node环境
Electron环境
小程序环境
HTML
html当做 通用的计算机语言
语法
html怎么写 例子： html里面用引号括起来内容，还有加引号括内容怎么做 语法：https://html.spec.whatwg.org/#tree-construction 词法： https://html.spec.whatwg.org/#tokenization
词法
当在html的某个位置，遇到什么对应的token会有什么反应
Tokenization-做词法分析的一个过程
html继承自SGML的部分
SGML给HTML带来了什么特点
DTD
HTML5的DTD 是什么 <!DOCTYPE html> 最原始的DTD是什么 html头部的DTD的URL地址中包含的内容是什么: 一份HTML规范，定义了当前HTML版本允许有哪些属性，标签，实体(Entity)
混杂模式
How
不设置doctype
对于CSS/JS有什么影响
标准模式
How
```html <!-- HTML 4.01 Strict --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- XHTML 1.0 Strict --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- HTML5 --> 1 2 3 <!DOCTYPE html> ```
对于CSS/JS有什么影响
Entity
点击链接后，搜索 `Character mnemonic entities` 即可找到 这下面的一些文件地址就是实体的定义 https://www.w3.org/TR/xhtml1/DTD/xhtml-lat1.ent https://www.w3.org/TR/xhtml1/DTD/xhtml-symbol.ent https://www.w3.org/TR/xhtml1/DTD/xhtml-special.ent
nbsp(空格)
lt(小于号)
gt(大于号)
amp(符号)
copy(版权符号)
超过200种.....
html继承自XML的部分
Namespace
在XML中允许出现的namespace有哪些
SVG
mathml
ARIA
在html标签有个 role属性， role的值 就有一些 aria的值， 比如想让盲人软件识别html标签，就需要在标签中加上对应的 aria-role
MDN文档
HTML标准文档
Tag
点击链接后 获得所有的标签 var a =document.getElementById('toc-semantics') Array.from(a.querySelectorAll('code')).map((item)=>item.innerText).join('\n') 删除一些非标签东西，总共110多个标签
html
html里面有哪些属性，怎么用
script
属性
async
表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其 他脚本加载。只对外部脚本文件有效
defer
表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效
src
type
module
代表ES6模块
text/javascript
其他标签
headtitlebaselinkmetastylebodyarticlesectionnavasideh1h2h3h4h5h6hgroupheaderfooteraddressphrpreblockquoteolulmenulidldtddfigurefigcaptionmaindivaemstrongsmallsciteqdfnabbrrubyrtrpdatatimecodevarsampkbdsubsupibumarkbdibdospanbrwbrinsdelinsdelpicturesourceimgiframeembedobjectparamvideoaudiotrackmapareatablecaptioncolgroupcoltbodytheadtfoottrtdthformlabelbuttonselectdatalistoptgroupoptiontextareaoutputprogressmeterfieldsetlegenddetailssummarybuttoninputoptiondialogscriptnoscripttemplateslotcanvas
文档元信息
语义相关内容
链接
替换型元素
表单
表格
总集
JavaScript
文法(Grammar)
规定了一些输入的基本元素
词法(Lexical)
ECMA-262.PDF中搜索 "Grammar Summary "即可定位到词法这一章节 规定了一些输入的基本元素 InputElementDiv:{下面有哪些}
空格(WhiteSpace)
TAB
// 制表符 TAB键产生的空格 <TAB> // js代码表示 `\t`; // 制表符的unicode是 9 '\t'.codePointAt() ===9 "\u0009" http://www.fileformat.info/info/unicode/block/basic_latin/list.htm 下面可以找到 // U+0009 CHARACTER TABULATION (U+0009)
VT
// 纵向制表符 <VT> 纵向制表符的unicode是 11 '\v'.codePointAt() ===11 "\u0011".codePointAt() ===17 http://www.fileformat.info/info/unicode/block/basic_latin/list.htm 下面可以找到 U+0011 DEVICE CONTROL ONE (U+0011)
FF
"\u000c".codePointAt() ===12 http://www.fileformat.info/info/unicode/block/basic_latin/list.htm 下面可以找到 U+000C FORM FEED (FF) (U+000C)
SP
<SP> "\u0020".codePointAt()===32 http://www.fileformat.info/info/unicode/block/basic_latin/list.htm 下面可以找到 U+0020 SPACE (U+0020) 在代码编写中建议强制使用这个空格
NBSP
<NBSP> "\u00a0" https://www.fileformat.info/info/unicode/char/00a0/index.htm 可以找到 在html中如果想要一个单词中间有空格，但是又不让他换行断开 可以加入 ； i leanrn Java Script tody.i leanrn Java Script tody.i leanrn Java Script tody.
ZWNBSP
U+FEFF ZERO WIDTH NO-BREAK SPACE <ZWNBSP> WhiteSpace
USP
Unicode的空格 <USP>
换行符/回车(LineTerminator0
LF
在代码编写中建议强制使用这个换行 \n
CR
回车 \r
LS
分行符
PS
分段符
注释(Comment）
单行注释
多行注释
Token
有效的输入元素 在JavaScript代码中， 会被执编译执行的代码就是token， 其他被忽略就是如 WhiteSpace--空格 LineTerminator--换行符 Comment--注释
符号(Punctuator)
符号 如+,-,*,/，括号， 小于号 等等
IdentifierName
ECMA-262 章节:11.6 Names and Keywords 标识符： 例如变量就是标识符 必须以英文字母开头
标识符/变量名(Identifier)
标识符(变量名、函数名，属性名)
变量名
不能与关键字重复 // 下面这个变量是例外 // undefined不在全局时可以修改 function testUndefiend() { var undefined = 5; undefined = 6; console.log(undefined) } testUndefiend();
属性
可以与关键字重复 如: class与className document.body.setAttribute('class','a') document.body.className
关键字(KeyWords)
What
关键字有特殊用途，比如表示控制语句的开始和结束， 或者执行特定的操作。按照规定，<font color="#c41230">保留的关键字不能用作标识符或属性名</font></b>
分类
var
变量提升的问题
function
函数声明提升的问题
new
如何工作
创建一个空的简单JavaScript对象（即{}）
链接该对象（设置该对象的constructor）到另一个对象
将步骤1新创建的对象作为this的上下文
如果该函数没有返回对象，则返回this
this
this在各种场景的指向问题
bind
call
apply
new
箭头函数
....
Future reserved Keywords --将来可能会用的
let
自动生成块级作用域
如何通过代码模拟块级作用域
const
......
.........
Literal-- 直接量
NumericLiteral
数字直接量(2.3,0.1,...) ECMA-262 章节: 11.8.3 Numeric Literals IEEE 754 双精度浮点数规则， 小数比较可能不会相等，最好转换为整数比较 组成部分: 1. 符号位(占一位) 2. Exponent(科学计数法乘上去的部分-占11位) 3. Fraction(值部分 占52位)
IEEE 754 Double Float 标准
语法
建议使用 二进制 十进制 八进制 十六进制的标准写法， 禁止使用parseInt的第二个转换，为了避免混乱
二进制语法
0b 开头
八进制语法
0o 开头表示八进制
十进制语法
科学计数法
如: 1.3e10 === 13000000000
小数写法
十六进制语法
0x开头
最佳实践
安全的整数范围
Number.MAX_SAFE_INTEGER.toString(16)
浮点数比较
因为采用的 浮点数计算规则，导致 浮点数比较不可能精确相等。 // 方式一 const res = Math.abs(0.1 + 0.2 - 0.3) <= Number.EPSILON // true console.log(res) // 方式二 ---建议 转换为整数比较
parInt() 的问题
map(parseInt)
解析为 ```js ["1", "2", "3"].map(function(item,idx){ return parseInt(item,idx); }) ``` parseInt第二个 参数 是2-36之间的整数 --------------------- 表示要解析的数字的基数。 --------------------- 如果第二个参数为 0且第一个参数是数字 则数字将以 10 为基础来解析。 --------------------- 如果它以 “0x” 或 “0X” 开头，将以 16 为基数。 --------------------- 如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。
StringLiteral
字符串直接量
Character--字符
String(字符串)数据类型表示零或多个 16 位 Unicode 字符序列
Code Point--代码点
What
是 Unicode 中一个字符的完整标识在 Unicode 代码空间中的一个值，取值 0x0 至 0x10FFFF，代表一个字符某个字符在Unicode编码表中对应的代码值
比如，"c"的码点是 0x0063， 而 "☺"的码点是 0x1F60A。 码点可能是 16 位，也可能是 32 位，而 codePointAt()方法可以从指定码元 位置识别完整的码点。
How-如何获取字符的码点
"a".codePointAt().toString(16)返回Unicode码点
JS中如何表示
"\u0061表示a
"\u0067表示g
....
Code Unit--代码单元
What
在具体编码形式中的最小单位。 UTF-16 中一个 code unit 为 16 bits， UTF-8 中一个 code unit 为 8 bits。 一个 code point 可能由一个或多个 code unit(s) 表示。 在 U+10000 之前的 code point 可以由一个 UTF-16 code unit 表示， U+10000 及之后的 code point 要由两个 UTF-16 code units 表示
在计算机中用来表示码点的，大部分码点只需要一个代码单元表示，但是有一些是需要两个代码单元表示的
Encodeing --编码方式(编程代码转换为机器码)
UTF
UTF8
UTF16
JavaScript 中以UTF-16 进行存储 不承认BMP 之外的字符 如果字符长度非常大的时候！ `String.fromCharCode()` 以及 `"a".charCodeAt()` 的性能好于 `"a".codePointAt()`
UTF32
字符集
ASCII
范围: 0-128 个字符
Unicode
最流行 。存在世界各国所有的字符， JavaScript 使用的字符集
UCS
unicode 的 BMP 范围 包含范围: U+0000(0x0000--0) 到 U+FFFF(0xffff--65535)
GB
收录 中文和 ASCII字符
GB2312
GBK(GB13000)
GB18030
ISO-8859
欧洲国家的 字符
BIG5
台湾 繁体字符
语法
单引号语法
'a' ECMA-262 : SingleStringCharacter
双引号语法
"a" ECMA-262 ： DoubleStringCharacter 支持任何非双引号或反斜杠的字符 反斜杠后面接转义字符 ```支持的其他字符 ' " \ b f n r t v ``` // 可查询 ECMA-262 :Table 34: String Single Character Escape Sequences 如： ```js "\u000A" "\x10" "\"" "\\" // "\b" // "\f" // "\f" // "\f" ```
反引号语法
`a` 即字符串模板
通过代码如何实现字符串模板
Boolean
Object
Array
创建数组
let arr = let arr = new Array()</li><li>let arr= [1,2,3]
arr.split字符串转数组
arr.join数组转字符串
arr.toString()
arr.indexOf()
arr.lastIndexOf()
arr.concat()
会修改原来的数组
arr.push()
arr.unshift()
arr.shift()
arr.pop()
arr.splice(a,b,c)
arr.sort()
arr.reverse()
迭代器
会修改原数组
map
filter
不会修改原数组
forEach
every
some
reduce
Null
typeof null === Object
Undefined
Symbol
RegularExpressionLiteral
正则表达式直接量 两个 双斜杠之间的内容 如： 一个匹配a的正则表达式 ``` /a/g ``` ``` a /a/g ``` 上面的结果是 g分之一
Template
模板字符串
语法(Syntax)
ECMA-262.pdf中的 A2-A5章节 简单来说就是 语法树结构 一个从小到的过程 从小的词法结构组成表达式结构， 然后往上组合成语句结构 再往上就是 function class 再往上 script module
Atom-原子
原子层面 对应的就是 词法（Token）层面的东西
Expression-表达式
Statement-语句
普通语句
声明类语句
let 声明
var 声明
const 声明
函数声明
类声明
表达式语句
空语句
with语句
debugger语句
语句块
控制型语句
if
switch
for
while
continue
break
return
throw
try
带标签语句
Structure-结构
语法 ECMA-262.pdf中的 A2-A5章节 简单来说就是 语法树结构 一个从小到的过程 从小的词法结构组成表达式结构， 然后往上组合成语句结构 再往上就是 function class 再往上 script module
Script/programModule-程序/模块
语义(Semantics)
语法和 语义是对应的，相辅相成的 因为只能用一定的语法才能表达一定的语义
运行时(Runtime)
数据结构
Type
原始对象类型
参考文档: ECMA-262 第六章- ECMAScript Data Types and Values
Boolean
Number
String
Undefined
Null
Object
几乎所有的对象都是Object类型的实例，它们都会从Object.prototype继承属性和方法。Object 构造函数为给定值创建一个对象包装器。Object构造函数，会根据给定的参数创建对象
属性
prototype
__proto__
constructor
方法
Object这个构造函数上的方法
defineProperties()
defineProperty()修改属性的默认特性
getOwnPropertyNames()
setPrototypeOf()
Object的原型(Object.prototype)上的方法
hasOwnProperty()
isPrototypeOf()
Symbol
内部对象类型
ECMA-262:ECMAScript Specification Types
List Record
Set Relation
Completion Record
Reference
参考文档: https://www.zhihu.com/question/31911373 永远无法得到一个 Refernce类型 解释: // 合理 a.b= 3 // 不合理 delete 3 a.b 并不完全等于 3 因为 a.b执行的结果是一个Refernce类型
Property Descriptor
Lexical Environment Environment Record
Data Blocks
实例
应用和机制
执行过程
ECMA-262 中搜索 "RunJobs ( )" "Jobs and Job Queues" --------------------------------- 整个JavaScript执行的过程是一个 任务队列 一级一级得往下执行 Job Script/Module Promise Function Statement Expression Literal Identifier
执行过程(算法)简介
事件循环
微任务的执行
函数的执行
语句级的执行
Job
ECMA-262 中搜索 "RunJobs ( )" "Jobs and Job Queues" --------------------------------- 整个JavaScript执行的过程是一个 任务队列 一级一级得从大到小执行 Job Script/Module Promise Function Statement Expression Literal Identifier
Script/Module
Promise
Function
Statement
Expression
Literal
Identifier
CSS
任何一个计算机语言都有 语法和词法 W3C标准的状态 PR状态: 建议推荐使用的 REC(Recommendation):正式使用 retired:已退休的标准
语法/词法
普通规则
选择器
简单选择器
.class
#id
tagname
*
属性选择器: [attr=v]
复合选择器
复杂选择器
有子孙的关系
选择器列表
属性(Property)
Value
单位
机制
排版布局
正常流
弹性布局
....
伪元素
动画
优先级