前端面试大纲
2024-06-18 16:58:13 0 举报AI智能生成
登录查看完整内容
前端面试大纲涵盖了面试者所需的核心知识点，包括HTML、CSS、JavaScript等。这份大纲旨在评估面试者的前端开发技能，包括对网页布局、样式设计、动态交互等方面的掌握程度。此外，大纲还可能涉及一些流行的前端框架和库，如React、Angular或Vue，以及测试、性能优化等相关主题。
作者其他创作
大纲/内容
不是HTML标签
web页面使用哪个HTML版本的指令
<!DOCTYPE html>
html5
doctype
HTML
将所有元素表示为一个矩形盒
width = content
box-sizing: content-box
标准
width = content+padding+margin
box-sizing: border-box
IE盒模型用的最多，也是被推荐使用的
IE
两种
盒模型
行内元素水平排列，直到当行被沾满然后换行
块级元素则会被渲染为完整的新行
所有元素都是普通流定位
按照先后位置从上而下布局
Block Formatting Context
是区域：布局过程中生成块级盒子的区域，独立的容器和布局环境
有规则：浮动元素与其他元素的交互限定区域
定义
BFC是一个封闭的大箱子，内部无论如何变化，都不会影响到外部
通俗来讲
根元素 body
overflow 值不为 visible 的块元素
浮动元素 float不为none
position为absolute和fixed
绝对定位元素
inline-block
行内块元素
弹性元素
网格元素
创建
继承了普通流的定位规则
容器里的子元素不会影响到外面的元素
BFC的高度包含了内部的浮动元素
BFC区域不会与外部的浮动元素重叠
垂直方向的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
规则
有的译成外边距塌陷
相邻盒子(可以是兄弟或祖先关系？)的外边距可以结合成一个单独的外边距
规范
属于同一个BFC的块级元素
也就是说绝对定位元素和浮动元素不会发生折叠
在normal flow的布局中
垂直方向相邻
也就是说inline-block不会发生折叠
也就是说水平方向不会发生折叠
块级盒子
发生情况
放在两BFC中
解决
外边距折叠（Margin collapsing）
一个block元素中，包含一个浮动元素，此时block元素会失去高度
场景描述
为block元素加入overflow:hidden属性，触发BFC
那么容器就回包裹着元素
BFC可以包含浮动的元素
阻止被浮动元素覆盖
两列布局
应用
BFC
普通流 normal flow
元素首先按照普通流的位置出现
然后脱离文档流，根据浮动的方向尽可能的向左或右偏移
浮动 float
元素整体脱离普通流
不会影响其兄弟元素
具体坐标由决定定位的坐标决定
绝对定位 absolute positioning
常见定位方案
z-index值只决定同一父元素中的同级子元素的堆叠顺序
z-index只能在position属性值为relative或absolute或fixed
z-index值可以控制定位元素在垂直于显示屏方向（Z 轴）
zindex
position和zindex
head 里，提前加载样式
Style标签放置的最佳位置
行内
canvas，div，dl，footer，form，h1，header，hr，p，pre，section，table，ul，li
块级
常见行内元素和块级元素
text-align: center
行内元素
margin: 0 auto
定宽
flex
inline-block + text-align:center
不定宽
块级元素
水平居中
line-height:height
文本垂直居中
margin + translate
表格
主轴
justify-content
交叉轴
align-center
margin: auto
margin + top
垂直居中布局
居中
vw、vh
calc
transition
很好用的css3技能但可能比较少人知道的点
不会独占一行
多个相邻的行内元素会排列在同一行里，直到一行排列不下
水平margin、padding无效，垂直margin、padding有效
inline
独占一行
默认情况下，block元素宽度自动填满其父元素宽度
可以设置margin和padding属性
margin和padding属性，水平方向产生效果
block
对象呈现为inline对象，但是对象的内容作为block对象呈现
inline和inline-block
水平方向独占一行
auto是自动分配剩余空间的意思
margin: 0 auto水平居中原因
利用overflow清除浮动
利用伪元素（clearfix）
父元素结束标签之前插入清除浮动的块级元素
利用clear样式
clear
清除浮动
*可以继承
从后向前
css *号
!important>行内样式>ID选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 元素选择器
权重
从右向左
https://juejin.im/entry/5a123c55f265da432240cc90
探究 CSS 解析原理
选择器匹配规则
CSS
new XMLHttpRequest()
xhr.open
this.status == 200||this.status == 304
onload
jquery实现Ajax
XMLHttpRequest
document.getElementById
document.querySelector
查
document.createElement
document.createTextNode
appendChild
insertBefore
replaceChild
修改
removeChild
删除
基础
JS交换两个节点如何实现
dom操作
浏览器中很多行为是异步
事件驱动
会创建事件并放入执行队列，等待当前代码执行完成
GUI渲染线程与JS引擎线程互斥
本质
HTML直接绑定
在JavaScript代码中绑定
绑定事件监听函数
绑定
绑定，监听，委托的区别
一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。
减少重复工作
减少内存消耗
好处
事件委托
浏览器有一个内部大消息循环，Event Loop（事件循环），会轮询大的事件队列并处理事件
只有前面的处理完毕了，空闲了才会执行这个事件
异步事件驱动
事件捕获
目标阶段
事件冒泡 （常用）
冒泡
事件流
promise & setTimeout
宏任务&微任务
事件
new 的过程？
无原型的对象
Object.create(null)
new & Object.create
单线程的，每个window包含一个JS线程
JavaScript是单线程还是多线程
子对象
深拷贝和浅拷贝区别
封装
可复用性
在浏览器端，模块需要提前编译打包处理
服务端环境
基于文件
同步加载
首次加载模块后，会缓存
输出的是一个值的拷贝
CommonJS
AMD规范则是非同步加载模块，允许指定回调函数
为浏览器环境设计
回调函数形式
异步
AMD？
输入值的引用
必须被用在其他语句或表达式的外部，而不能使用在if等代码块内部
原因之一是模块语法需要让 JS 能静态判断需要导出什么，正因为此，你只能在模块的顶级作用域使用 export与import
静态分析
ES6 import
CMD规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行
CMD
整合AMD和CMD，自动判断当前环境
UMD
分类
加载时执行
输入已执行部分
commonjs
遇到import不会去执行模块，而是只生成一个引用
而是用到的时候再去取值
动态引用，不存在这个问题
ES6
循环引用问题
模块化
执行一个函数时，在函数内部处理操作，把操作结果以参数形式传入回调函数中
回调地狱
不利于阅读
不利于调整回调顺序
坏处
代码清晰地表达出了执行关系
回调函数
监听事件
宏任务
定时器
Ajax请求确实是异步的，这请求是由浏览器新开一个线程请求，事件回调的时候是放入Event loop单线程事件队列等候处理
ajax
立即执行
微任务
同步的立即执行函数
Promise
交出函数的执行权
调用 Generator 函数，会返回一个内部指针
next 方法的作用是分阶段执行 Generator 函数
流程不方便管理
generator
异步操作的同步写法
好
反设计
容易引起性能问题
坏
async返回一个promise
await让出线程，跳出async函数体
Generator/function* 来实现
await是一个让出线程的标志。await后面的表达式会先执行一遍，将await后面的代码加入到microtask中，然后就会跳出整个async函数来执行后面的代码。
async/await
Observable
执行一个宏任务（栈中没有就从事件队列中获取）
执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）
分支主题
事件循环
js异步操作
arguments
this
局部属性和方法
变量对象
是指向变量对象的指针列表
每个函数都有自己的执行环境
当代码在一个环境中执行时，会创建作用域链
保证对执行环境的所有变量和函数的有序访问
作用
当前代码所在环境的的变量对象
前端
下一个变量，来自外部执行环境
global
node
window
web
作用域链的尽头
最外层为全局执行环境
链
变量搜索
静态作用域
作用域链
函数的形参
this是面向对象的表示
通过对象调用
其它
当执行流进入一个函数时，函数的执行环境就会被推入环境栈中
在函数执行完之后，栈将其环境弹出，该环境被销毁
销毁
每个执行环境都有一个与之关联的变量对象
环境中定义的所有变量和函数都保存在这个对象中
全局执行环境
函数入栈
创建执行环境
创建作用域链
函数调用时时
函数执行环境
执行环境
this引用的是函数据以执行的环境对象
上下文
函数和其相关引用对象组成的实体
从scheme语言借鉴来
词法作用域
函数的变量作用范围可以超越创建的它的环境
在一些语言中，函数可以嵌套函数，当内部函数引用了外部函数的变量时，就有可能会形成闭包
由于有引用，不会被垃圾回收
闭包原理
内存占用过多
弊端
settimeout 拿到正确的值
模仿块级作用域
创建私有变量
jquery
封装相关的功能集
设计单例模式？
惰性求值？
应用场景
闭包
对constructor模式的改善
避免重复定义
不同于面向类，基于原型的语言是对实例友好的
JS的设计思想
实现继承
设计思想
两方面
prototype指向原型对象
constructor指向构Function
构造函数
constructor指向构造函数
prototype指向原型的原型
原型对象
实例
铁三角
组合继承？
先遍历自身的属性，如果没有一层层往上层寻找
读
如果原型存在该属性，则对该实例自身创建属性
写
读写
原型
存在，但是不让使用
所以提前使用会报错
暂时性死区
let
const
块级作用域
=>
解构
引用方式
和CMD的区别
module
Set
map
Object.observer()
不可改变且唯一的
以被用做对象属性的键
对原始数据类型的隐式对象包装器。
可以用来避免被覆盖
symbol
模板字符串
Object.prototype.toString.apply([]) === "[object Array]"
[].constructor === Array
[] instanceof Array === true
Array.isArray([])
数组判断
循环对象&数组
循环只遍历可枚举属性
循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性（更接近原型链中对象的属性覆盖原型属性）。
如果你只要考虑对象本身的属性，而不是它的原型，那么使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属性是否是对象本身的属性（也能使用propertyIsEnumerable)
for-in
循环数组
ES6新特性
不会循环对象的key，只会循环对象的value
遍历实现iterator接口
for-of
for-in for-of
比函数表达书更简洁
没有this和arguments
箭头函数
浅拷贝
object.assign()
方法不能用于复制用户定义的对象方法
不能用于复制循环引用对象。
JSON.parse(JSON.stringify(obj))
展开操作符(…)
自实现
复制对象
Object.prototype.toString.call('')
类型判断
W3C
event.Propagation()
event.cancleBubble()
阻止传播
event.preventDefault()
阻止默认行为
原生JS事件
阻止冒泡
jQuery
W3c
return false
e.returnValue = false
默认事件
事件阻止
遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。
各种数据结构，提供一个统一的、简便的访问接口
数据结构的成员能够按某种次序排列
供for...of消费
iterator接口？
已从Web 标准中删除
对字符串进行编码，让计算机可以读取
ASCII 字母和数字
ASCII 标点符号 - _ . ! ~ * ' ( )
除
编码集合
escape
把字符串作为URI进行编码
目的是对 URI 进行完整的编码
字母 数字 - _ . ! ~ * ' ( )
非转义字符
保留字符
#
数字符号
encodeURI
十六进制的转义序列
encodeURIComponent
encode
docodeURI
decodeURIComponent
decode
编解码
通用的、固定长度的二进制数据缓冲区
类型化数组
必须等待网页中所有内容加载完毕后才能执行
window.load
dom结构绘制完毕后开始执行
封装了ondomcontentready、ondomcontentloaded
$(document).ready
JS开始执行时机
JS
服务器在本地机器上存储的小段文本
只能保管ASCII字符串
受浏览器安全策略限制
而Cookie保管在客户端，不占用服务器资源
cookie
服务器端的机制
任何类型的数据
Session存储在服务器上，对客户端是透明的，不存在敏感信息泄露的风险
Session是保管在服务器端的，每个用户都会产生一个Session。假如并发访问的用户十分多，会产生十分多的Session，耗费大量的内存
session
cookie和session
request header
请求头
response header
响应头
信息响应类
1xx
处理成功响应类
2xx
重定向响应类
3xx
客户端有语法错误，不能被服务器理解
400
401 未授权
403 拒绝提供服务
资源不存在
404
客户端错误类
4xx
服务端错误
5xx
解决了什么问题
状态码
承载多个请求参数的数据
是什么
报文格式
报文
输入网址
根据DNS，将域名解析为IP地址
三次握手
建立TCP连接
客户端发送报文
服务端返回状态码和请求体
服务端应答
关闭TCP连接
一次http完整的过程
基本概念
对body部分进行编码，达到压缩的目的
节省空间
JPEG这类文件用gzip压缩的不够好
gzip
compress
zlib
deflate
编码类型
Accept - Encoding的作用，和性能有关系
TCP链接
底层是TCP/IP
GET和POST能做的事情是一样的
同
Get是向服务器发索取数据的一种请求
get
Post是向服务器提交数据的一种请求
post
但是浏览器会对URL厂区做出限制，2000多个字符
无长度限制
大多数服务器最多处理64K大小的url
长度
ASCII字符
没有限制
字符
application/x-www-form-urlencoded
POST支持多种编码方式
编码
GET参数直接暴露在URL上
POST参数在HTTP消息主体中
不会被保存在浏览器历史
安全
请求会被浏览器主动缓存
POST不会
缓存
GET请求参数会被完整保留在浏览器历史记录里
而POST中的参数不会被保留
浏览器
浏览器会把http header和data一并发送出去，服务器响应200（返回数据）
产生一个TCP数据包
浏览器先发送header，服务器响应100 continue
浏览器再发送data，服务器响应200 ok（返回数据）
产生两个TCP数据包
https://zhuanlan.zhihu.com/p/25028045
建立过程？
不同
https://www.zhihu.com/question/20552352
get和post区别
更新
put
delete
仅仅返回相应的头部，没有具体的响应体。它也不会对服务器造成其他影响
head
TRACE
OPTIONS允许客户端请求一个服务所支持的请求方法。它所对应的响应头是Allow，它非常简洁地列出了支持的方法。下面为服务端成功处理了OPTIONS请求后，响应的内容：
发生时机？
options
connect
用途？
请求类型
请求方式
websocket
并行处理
不等待
异步请求
顺序处理
等待
同步请求
异步请求和同步请求的区别
应用层
传输层
网络层
网络访问层
协议集
等待确认
1 客户端到服务器
2 服务器告诉客户端，收到消息，进入等待状态
3 客户端收到消息，发送确认包
然后，再传递消息
断开连接时服务器和客户端均可以主动发起断开TCP连接的请求
客户端提出分手请求
服务端收到请求，关闭连接
并提出反方向关闭请求
客户端对服务端请求确认，双方向的关闭结束
四次分手
TCP/IP
相同域名请求通过同一个TCP链接并发完成
多路复用
Hpack头压缩
1.x为文本格式
二进制传输
服务端推送
帧
流
解决队头阻塞问题
1.x 串行传输
vs 1.x keep alive
http2
证书颁发机构CA
我信任证书颁发机构我应该信任的
https的信任基于预先安装在浏览器中的证书颁发机构
HTTPS报文中的任何东西都被加密，包括所有报头和荷载。
默认80端口
http
默认443端口
https
端口
和http的差异
对称加密
非对称加密
中心化加密
去中心化加密
加密
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/74
https？
HTTP
用户输入
请求服务端数据
定时事件
数据何时变化
使用zone.js Monkey patch的方式，监听所有异步事件
监听变化
新旧数据对比
变化检测器树
每个组件都有自己的变化检测器
组件树
angular改善的脏检查
高效
相比之下，AngularJS采用的是双向数据流，错综复杂的数据流使得它不得不多次检查，使得数据最终趋向稳定。理论上，数据可能永远不稳定。AngularJS给出的策略是，脏检查超过10次，就认为程序有问题，不再进行检查。这个10，我不知道它的给出依据是什么，也许是个经验值吧。
可预测
数据流自上而下
变化检测对象
定制变化检测
变化检测
脏值检查
降低代码之间的耦合度
每个对象都需要获取与其合作的对象（也就是它所依赖的对象）的引用。如果这个获取过程要靠自身实
控制反转
目标
Injector会自动帮你将需要的依赖注入到类的构造器里，并返回这个类的实例
依赖注入
实现方式
reflect-metadata
typescript
Decorator
使用的三个技术
DI
数组绑定
ngOnChanges
ngOnInit
ngDoCheck
在外来内容被投影到组件中之后/投影组件内容的变更检测之后调用
ngAfterContentInit
ngAfterContentChecked
初始化完/检测变更完组件视图及其子视图之后调用。
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy
生命周期
Angular
数据劫持的方式来做数据绑定
getter
setter
Object.defineProperty()
notify
Observer
Watcher
方法
实现原理
数据绑定
Vue
接口
setState()通知变化
数据变化
本质上就是在 JS 和 DOM 之间做了一个缓存
原理
会跟踪每一个组件的依赖关系
如果你的应用中，交互复杂，需要处理大量的UI变化，那么使用 Virtual DOM 是一个好主意。如果你更新元素并不频繁，那么 Virtual DOM 并不一定适用，性能很可能还不如直接操控 DOM。
diff
抽象
diff算法
virtual DOM
数据更新
react渲染机制、key的用途
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillMount
componentDidMount
componentWillReciveProps
componentWillUnmout
render
state是做为状态管理
而props相当于api，由外界传入
state和props
问题
合并旧state
集齐一批需要更新的组件然后一起更新
放进state队列，等待更新
react-dom
updater
它是异步的
this.updater
setState
没有脏值检查？
React
都以组件化为核心
都利用了MVVM设计模式
都可以完成各式的前端项目，只是方式和灵活度不同
对view层的抽象定义，规范化、接口化
react
以组件化和MVVM为核心，小而轻
vue
利用用先进\b的设计模式和思想，提供系统化的解决方案，大而全
angular
核心思想
最适合抽象和跨端项目
中小型项目vue更合适，只是vue生态不及react
中小型工程
中大型工程
适合工程
极度抽象，跨平台
渐进式增强，对小项目非常友好
系统化、优秀的设计模式和思想
MVC
单例
观察者
数据流
依赖翻转
内置的优化解决方案
CLI
独特的优势
过度自由
太过抽象
学习者的姿态
小项目收益低
学习曲线高、概念多、难以理解
缺点
大三框架的比较
初始渲染：Virtual DOM > 脏检查 >= 依赖收集
小量数据更新：依赖收集 >> Virtual DOM + 优化 > 脏检查（无法优化） > Virtual DOM 无优化
大量数据更新：脏检查 + 优化 >= 依赖收集 + 优化 > Virtual DOM（无法/无需优化）>> MVVM 无优化
MVVM和Virtual Dom比较
框架
首次有效渲染
重要渲染时间
可交互时间
输入响应
度量
选择合适的衡量指标、测试用例、测试环境，找到瓶颈
不要过早优化
忌过度优化
性能优化是持久战
原则
嵌套
合理使用硬件加速
shadow
少用高消耗属性
css
隐藏类
针对JIT的优化
语法
WebWorker
js
语言本身
缓存技术
负载均衡
压缩
CDN
减少HTTP请求为何能优化速度
网络
分包
tree shaking
aot
构建
Wasm
引擎优化
RN
fluter
整体结构优化
Hybrid
小程序
混合应用
容器类优化
方向
性能优化
HTTP请求数量
懒加载
热加载&离线包
资源
首屏处理
外壳处理
拆分过程，并行处理
首屏
页面加载链路优化
WKWebview
内联类
V8
wasm
canvas
webgl
硬件加速
容器
语言层面
框架层面
动画
视觉
避免重排重绘
移动浏览器存在双击缩放或双击放大操作
第一次点击之后，系统需要等待300ms，以判断用户是否再次点击了屏幕
原因
300ms延迟
解决问题
touchstart
touchmove
touchend
click
事件发生顺序
user-scalable=no
但同时也禁用了双指缩放操作
禁用缩放
<meta name="viewport" content="width=device-width"></code>
仍可进行双指缩放操作
更累默认视口宽度
pointerdown事件
是否触摸操作会触发用户代理的默认行为
css touchaction: none
指针事件
document
touch事件
计算时间和位置差
zepto tap
监听touchend
发出自定义click事件
把原来的click事件阻止掉
fastlick
解决方法
fastclick
交互
runtime优化
优化
通过媒体查询
简单、高效
viewport缩放
动态设置根元素font-size，等比缩放元素大小
rem布局
响应式布局
自适应方案
图片先用占位图表示，属性放到data里面
页面加载完成后，监听窗口滚动，
当图片出现在视口内，再赋予真实的地址
lazyimage
方案
DOS攻击
跨站脚本攻击
含义
恶意将未经过滤的代码植入到页面中
URL到页面
反射性
数据库
持久型
& < > " ' /
常见符号编码转换
对诸如<script>、<img>、<a>等标签进行过滤
避免cookie劫持
HttpOnly
避免
HTML 属性、HTML 文字内容、HTML 注释、跳转链接、内联 JavaScript 字符串、内联 CSS 样式表等，所需要的转义规则不一致。 业务 RD 需要选取合适的转义库，并针对不同的上下文调用不同的转义规则。
XSS攻击与防御
攻击者盗用了用户的身份，以用户的名义发送恶意请求
在不同的domain下，攻击者却能为造出”用户本人发出的request“
跨站请求伪造
关键请求使用验证码或者token机制
验证码
在HTTP 头中自定义属性并验证
验证 HTTP Referer 字段
具体来说就是服务器每次返回客户端页面的时候，在页面中埋上一个token字段
Cross Site
SameSite
https://blog.techbridge.cc/2017/02/25/csrf-introduction/
参考
CSRF攻击
HTTP劫持与对策
影响到DOM变化
根据css计算变化后的dom样式
Style
计算每个 DOM 元素最终在屏幕上显示的大小和位置
layout
本质上就是填充像素
一个DOM的所有可是效果
这个绘制过程是在多个层上完成的。
为每个dom填充像素
Paint
在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上
渲染层合并
完成绘制之后，浏览器会按照所有层顺序，合理的合并成一个图层，显示在屏幕上
某些特殊的渲染层会被认为是合成层（Compositing Layers），合成层拥有单独的 GraphicsLayer，
Composite
某些特殊的渲染层会被认为是合成层（Compositing Layers），合成层拥有单独的 GraphicsLayer，而其他不是合成层的渲染层，则和其第一个拥有 GraphicsLayer 父层公用一个。
每个 GraphicsLayer 都有一个 GraphicsContext，GraphicsContext 会负责输出该层的位图，位图是存储在共享内存中，作为纹理上传到 GPU 中，最后由 GPU 将多个位图进行合成，然后 draw 到屏幕上，此时，我们的页面也就展现到了屏幕上。
扩展
http://taobaofed.org/blog/2016/04/25/performance-composite/
JS触发reflow？
大量合成层来，而每个合成层都要消耗 CPU 和内存资源，岂不是严重影响页面性能
层压缩
渲染过程
事件不会传播，即没有事件流的概念
btn.onclick = fun;
DOM0级模型
W3C标准模型
捕获
三个阶段
DOM2级模型
事件模型
兼容问题
WebGL渲染的过程？
DNS缓存
CDN缓存
no-cache
max-age=<seconds>
cache-control
expires
强缓存
Last-Modify
ETag
协商缓存
浏览器缓存
缓存策略
限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制
协议，端口（如果有指定）和域名
同源策略
使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。
web语义化
程序执行中一个单一的顺序控制流程
如果JavaScript是多线程的方式来操作这些UI DOM，则可能出现UI操作的冲突
为什么浏览器是单线程设计
GUI 渲染线程 与 JavaScript引擎线程互斥
界面渲染线程
javascript引擎线程
Http请求线程
定时触发器线程
浏览器事件触发线程
浏览器中的线程
线程
有单独的内存区域
代表CPU所能处理的单个任务
一个进程由一个或多个线程组成
线程是一个进程中代码的不同执行路线
Chrome浏览器使用多个进程来隔离不同的网页
和线程的关系
进程
输入地址，返回HTML
加载并渲染DOM
遇到body标签
浏览器遇到dom元素时，正常顺序加载，边加载边渲染
浏览器继续加载，但渲染被阻塞
生成新的CSS Rule Tree
生成后重新渲染界面
内联CSS
由于JavaScript有可能会更改DOM Tree和Render Tree，因此同时被阻塞
DOM的加载和渲染同时被阻塞
内联Javascript
外联Javascript
加载DOM
render tree
内存
合成一个DOM？
文档碎片？
HTML加载过程？
像C语言一般都有自己的内存管理接口，JS创建变量时分配内存，而不再使用时再释放内存。
概念
从根部开始遍历，找出不再使用的变量
初始阶段
JS会停止运行
标记阶段
清楚阶段
阶段
增量标记
标记清除
算法简单
释放时间快
优势
对计数要求高
不能并行计算
劣势
引用计数
全局变量
对象的引用
定时器
堆内存
动态分配的内存，大小不定也不会自动释放
JS中引用类型占据空间大、大小不固定，栈内存中存放地址指向堆内存中的对象。按引用访问
堆
自动分配的内存空间，由系统自动释放
基本类型占据空间小、大小固定，值保存在栈空间。按值来访问
栈
堆和栈的区别
内存泄漏实例？
内存管理
KHTML
是排版引擎
01年开始苹果
JS Core
webcore
调试工具
Drosera
组件
HTML解释器
CSS解释器
布局
渲染引擎
源代码 –> 抽象语法树 –> 字节码（跨平台） –> JIT –> 本地代码
JS 引擎
JS引擎
组成
Webkit
13年，webkit的分支
blink
Blink
内核
面向GUI编程领域
软件架构模式
软件逻辑和数据逻辑分离开来
视图模型是暴露公共属性和命令的视图的抽象
代表真实状态的数据模型
模型
视图
暴露公共属性和命令的视图的抽象
视图模型
声明性数据和命令绑定
绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图
绑定器
包含
MvvM
控制器
对MVC的变种
Presenter 可以理解为松散的控制器，其中包含了视图的 UI 业务逻辑
MVP
三种软件架构
架构
数据配置平台
项目
主导者
设计者
开发者
身份
数据配置
空间
粒度划分
回滚
权限
用户管理
日志
良好的交互
系统
node.js
mongodb、mysql
php + mysql
技术选型
json
针对每个业务进行可视化开发
策略
配置的表达形式
研发使用json进行数据编辑
业务方使用可视化进行编辑
操作
monaco编辑器
json string
包含注释信息的json
转成comment json
取出数据和标题
解析comment json
转成angular form reactive表达形式
数字
字符串
布尔型
针对每种数据类型做优化
将form reactive转化为视图
正向
json和可视化自动转换方案
解决方案
配置形式
自动化测试脚本
压力测试
每天上亿的流量
php接口逻辑和压力
遇到的问题
理解目标、找到瓶颈
如何解决问题
典型项目
监控和优化案例
实践
根据node的规范封装的模块化
require
模块转换器
loader
自定义打包流程
plugin
名词
加载所有插件
准备
确定入口文件
递归寻找模块依赖
调用loader对模块进行编译
编译
输出chunk文件
资源输出
过程
WebPack打包原理
工程化
未来工作计划
为什么选择前端
平时关注新技术吗？哪些渠道
项目选型
跳
软
Array.from(set)
排序后去重
filter
双层循环
数组去重
高频事件
n秒内只执行一次
如果n秒内再次被触发，则重新触发时间
每次事件触发后，都取消原来的延时处理方法
实现思路
防抖 debounce
在n秒内忽略随后发出的源值
每次触发事件时，都判断当前是否有延时函数
节流 throttle
频率控制
数组扁平化
简单算法
JavaScript 状态容器，提供可预测化的状态管理
服务器数据
路由
state过多，来源复杂
让state的变化可预测
动机
一个action对应了一个完整的应用状态
历史记录功能
reducer是纯函数
易于测试
行为、指令
store的唯一数据来源
action
响应action，并发送到store
reducer
store状态容器
redux
mobx
状态管理
rxjs
高级应用
http://fex.baidu.com/blog/2014/05/what-happen/
Pendding
自由主题
前端面试大纲
0 条评论
回复 删除
下一页
