导图社区 JavaScript知识点梳理
本章思维导图的内容是JavaScript知识点梳理,JavaScript是世界上最流行的脚本语言,推荐大家点击参考学习。
编辑于2022-01-12 16:38:15前端技术栈
框架
移动App
WebApp
React
Vue
Angular
NativeApp
Android
IOS
BridgeApp
React Native
Weex
HybridApp
Cordova
ProgressiveApp
PWA
Taro
OwndrawApp
Flutter
CrossApp
客户端
Electron
服务器端
Node
Express.js
Koa
Socket.io
Web前端
JQuery
Vue
React
Angular
...
打包
Webpack
子主题
Gulp
Grunt
Vite
测试
Jest
性能监控&分析
Web Core
JS
DOM API
Query Elements
document.body
document.getElementById()
document.getElementsByClassName()
document.getElementsByName()
document.getElementsByTagNameNS()
document.getElementsByTagName()
document.querySelector()
docuemnt.querySelectorAll()
获取DOM元素API
query 操作selector如果是id必须要加'#id'
query selector id 不能是纯数字
辅助操作
document.cookie
get
set
Location
window.location
document.location
对比
都能获取URL
都实现Location
document.location 只实现包含有文档的 URL 相关的信息
window.location常用的路由、地址、改变地址
document.domain
Document 接口的 domain 属性获取/设置当前文档的原始域部分,常用于同源策略。
常见面试问题
Node
Node.insertBefore()
Node.nextSibling
返回与该节点同级的下一个节点 Node,如果没有返回null。
常用来设计考点,实现insertAfter
Node.nodeType
常用来进行节点对比
Node.parentNode
返回一个当前节点 Node的父节点
Node.childNodes
返回包含指定节点的子节点的集合,该集合为即时更新的集合
常用节点属性
Node.isEqualNode()
Node.appendChild()
Node.cloneNode()
document.append()
注意此API
用来实现节点复制
create 常用API
createElement()
createAttribute()
createEvent()
createDocumentFragment()
fragment文档碎片常用来性能优化
BOM API - 标准内置对象
Math
random
伪随机数
abs
ceil
floor
常用来实现取整|取余
反射
Reflect
Proxy
扩展加分点&Vue3考点
值属性
Infinity
NaN
undefined
常用来作为考点对比
globalThis
Js Core
数据类型
原始类型
Symbol :typeof instance === "symbol"
undefined:typeof instance === "undefined"
Boolean:typeof instance === "boolean"
Number:typeof instance === "number"
String:typeof instance === "string
BigInt:typeof instance === "bigint"
NULL
typeof instance === "object"
Object
typeof instance === "object"。任何 constructed 对象实例的特殊非数据结构类型,也用做数据结构:new Object,new Array,new Map,new Set,new WeakMap,new WeakSet,new Date,和几乎所有通过 new keyword 创建的东西
其他
日期 Date
有序集: 数组和类型数组
键控集: Maps, Sets, WeakMaps, WeakSets
结构化数据: JSON
数据类型 & 常用方法
Array.prototype
String.prototype
Number.prototype
prototype
继承
constructor
__proto__
new 操作符
class | function | object
重点
prototype 和 __proto__ & constructor关系是什么
如何理解继承
任何对象都有一个prototype属性,prototype属性指向他的父级对象,可以通过此特性实现对象的父级查询,直到最后找到null
所有对象都是来自于object的扩展
object的父级为null
如何实现继承
prototype实现
class实现
function 变量提升 & 作用域
new class || new function原理
这两块一般会结合来理解,可以加上constructor & prototype的理解
事件循环机制
宏任务
微任务
常见问题
promise & then、setTimeout、async & await、main执行顺序
settimeout & setinterval对比
理解
CSS
Selector
Animation
Css 3
Position
HTML
Block element
Inline element
Command
HTML渲染


性能优化
重绘
当页面元素样式改变不影响元素在文档流中的位置时(如background-color,border-color,visibility),浏览器只会将新样式赋予元素并进行重新绘制操作。
重排(回流)
回流当render tree中的一部分或全部因为元素的规模尺寸、布局、隐藏等改变时,浏览器重新渲染部分DOM或全部DOM的过程。回流也被称为重排,其实从字面上来看,重排更容易让人形象易懂(即重新排版整个页面)。
什么时候会触发回流或重绘?
添加或者删除可见的DOM元素;
元素位置改变;
元素尺寸改变——边距、填充、边框、宽度和高度;
内容变化,比如用户在input框中输入文字,文本或者图片大小改变而引起的计算值宽度和高度改变;
页面渲染初始化;
浏览器窗口尺寸改变,resize事件发生时;
计算offsetWidth和offsetHeight属性;
设置style属性的值;
有大量的用户行为以及潜在的DHTML改变会触发回流。例如,改变浏览器窗口的大小,使用一些JavaScript方法,包括计算样式,对DOM进行元素的添加或删除,或是改变元素的class等。【改变元素大小 & 计算位置】
如何减少回流、重绘?
1.尽可能在DOM树的最末端改变class
2.避免设置多层内联样式
3.动画效果应用到position属性为absolute或fixed的元素上
4.避免使用table布局
5.使用css3硬件加速,可以让transform、opacity、filters等动画效果不会引起回流重绘
CSS中避免回流、重绘
1.避免使用JS一个样式修改完接着改下一个样式,最好一次性更改CSS样式,或者将样式列表定义为class的名称
2.避免频繁操作DOM,使用文档片段创建一个子树,然后再拷贝到文档中
3.先隐藏元素,进行修改后再显示该元素,因为display:none上的DOM操作不会引发回流和重绘
4.避免循环读取offsetLeft等属性,在循环之前把它们存起来
5.对于复杂动画效果,使用绝对定位让其脱离文档流,否则会引起父元素及后续元素大量的回流
JS操作避免回流、重绘
Performance(性能优化)
减少重排、重绘
首屏渲染
图片懒加载
按需加载
压缩包大小
webpack 拆包
Script标签优化
async
defer
diff
浏览器不会因 async 脚本而阻塞(与 defer 类似)。
其他脚本不会等待 async 脚本加载完成,同样,async 脚本也不会等待其他脚本。
DOMContentLoaded 和异步脚本不会彼此等待:
DOMContentLoaded 可能会发生在异步脚本之前(如果异步脚本在页面完成后才加载完成)
DOMContentLoaded 也可能发生在异步脚本之后(如果异步脚本很短,或者是从 HTTP 缓存中加载的)
现代的网站中,脚本往往比 HTML 更“重”:它们的大小通常更大,处理时间也更长。 当浏览器加载 HTML 时遇到 <script>...</script> 标签,浏览器就不能继续构建 DOM。它必须立刻执行此脚本。对于外部脚本 <script src="..."></script> 也是一样的:浏览器必须等脚本下载完,并执行结束,之后才能继续处理剩余的页面。
js 、图片、css缓存
合并Http请求
浏览器并发请求个数6-10个
Cache
浏览器缓存
cookie
localstorage
sessionstorage
indexDB
cache
很少用们可以忽略
http 缓存
协商缓存(需要跟服务器交互)
强制缓存
HTTP
Option
Request
Response
三次握手
发出Option,询问服务器端此次请求是否可行,服务器根据配置,返回对应的状态码,告诉浏览器是否可以进行下次请求 (Option)
浏览器接收到请求,根据返回状态码确定是否发起具体请求,发出请求,带有具体参数(Request)
浏览器处理请求,返回处理后的数据(Response )
http缓存用于处理这些请求的缓存
SetCookie
Cache
代码管理
Git
SVN
TFS
初始化-Entry
编译 Compiler
根据entry配置文件,递归分析依赖,对每个依赖进行编译(通过Babel 提供的@babel/traverse(遍历) 返回AST 抽象语法树进行递归分析,处理require依赖)
输出-Output