CSS、HTML
垂直居中布局
什么BFC？作用有哪些 怎么实现
BFC的规则
- 内部的Box会在垂直方向，从顶部一个接一个地放置
- 垂直方向上的距离由margin决定（防止margin重叠）
- 计算高度时浮动也参与计算（清除浮动）
- BFC的区域不会与float的元素区域重叠（防止文字环绕）
如何创建BFC
- 根元素
- 绝对定位：absolute、fixed
- float不为none
- overflow不为visible
- display为flex、inline-block、table-cell
position有哪些值，是怎么定位的
- static 默认定位布局
- relative 相对自身定位
- fixed 相对于浏览器窗口或当元素祖先的
transform,perspective或filter属性非none时，容器由视口改为该祖先。 - absolute 相对于最近非static定位祖先元素偏移
- sticky 粘性布局 当根据最近滚动的祖先元素进行定位
CSS的权重和优先级算法
- 权重记忆口诀：优先级关系：!important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
- 权重的进制是并不是十进制，CSS 权重进制在 IE6 为 256，后来扩大到了 65536，现代浏览器则采用更大的数量
20个ID选择器累加优先级小于内联样式
盒模型
- 盒子模型概念
盒子由margin、border、padding、content构成
- 正常盒模型
box-sizing: box-content;
width/height = content
- IE怪异盒模型
box-sizing: border-box;
width/height = border + padding + content
行内标签和块标签的区别
伪类和伪元素的区别
移动端1px像素问题，如何实现1px像素
伪元素 + transform scaleY(.5)border-imagebackground-imagebox-shadow
一般来说，在PC端浏览器中，设备像素比（dpr）等于1，1个css像素就代表1个物理像素；但是在
retina屏幕中，dpr普遍是2或3，1个css像素不再等于1个物理像素，因此比实际设计稿看起来粗不少
实现隐藏元素有哪些方式？
display：noneopacity: 0visibility: hiddenheight: 0或width: 0
CSS层叠的顺序
- 推荐看张鑫旭的 深入理解CSS中的层叠上下文和层叠顺序
新增部分中 CSS3对层叠上下文的影响（摘抄自张鑫旭博客）
z-index值不为auto的flex项(父元素display:flex|inline-flex).- 元素的
opacity值不是1.- 元素的
transform值不是none.- 元素
mix-blend-mode值不是normal.- 元素的
filter值不是none.- 元素的
isolation值是isolate.will-change指定的属性值为上面任意一个。- 元素的
-webkit-overflow-scrolling设为touch.
JS
纯函数和柯理化
节流和防抖
闭包
v8垃圾回收的机制
事件循环
宏任务、微任务、requestAnimationFrame
this指向
箭头函数与普通函数的区别
原型和原型链
递归和尾调用优化
require和import的区别
判断数据类型有哪些方式
JavaScript有数据类型
类型转换
内存泄漏
浏览器
事件委托、事件冒泡、事件捕获
- 事件模型
事件捕获--事件处理--事件冒泡
- 事件委托
利用事件冒泡将子元素事件交给祖先元素处理
从输入URL到页面展现 整个过程
重绘和回流（重排）是什么？如何避免？
浏览器的渲染流程
构建 DOM 树、构建渲染树、布局、绘制、渲染层合成
- 构建 DOM 树：浏览器将 HTML 解析成树形结构的 DOM 树，一般来说，这个过程发生在页面初次加载，或页面 JavaScript 修改了节点结构的时候。
- 构建渲染树：浏览器将 CSS 解析成树形结构的 CSSOM 树，再和 DOM 树合并成渲染树。
- 布局（Layout）：浏览器根据渲染树所体现的节点、各个节点的CSS定义以及它们的从属关系，计算出每个节点在屏幕中的位置。Web 页面中元素的布局是相对的，在页面元素位置、大小发生变化，往往会导致其他节点联动，需要重新计算布局，这时候的布局过程一般被称为回流（Reflow）。
- 绘制（Paint）：遍历渲染树，调用渲染器的
paint()方法在屏幕上绘制出节点内容，本质上是一个像素填充的过程。这个过程也出现于回流或一些不影响布局的 CSS 修改引起的屏幕局部重画，这时候它被称为重绘（Repaint）。实际上，绘制过程是在多个层上完成的，这些层我们称为渲染层（RenderLayer）。- 渲染层合成（Composite）：多个绘制后的渲染层按照恰当的重叠顺序进行合并，而后生成位图，最终通过显卡展示到屏幕上。
- 基于渲染流程实现的优化方式
- 动画使用transform
- 减少隐式合成
- 减少合成层的尺寸大小
- 推荐看
浏览器层合成与页面渲染优化
cookie、sessionStorage、localStorage区别
token、session区别
什么是跨域？如何实现跨域？
浏览器打开一个窗口开启多少进程
强缓存和协商缓存
node
Vue
diff算法
computed的实现原理
keep-alive的实现原理
nextTick的原理
vue2.0和vue3.0的区别
React
对虚拟DOM的理解
react-hooks有啥好处
diff算法
setState同异步问题
算法
排序
滑动窗口
手写实现
promise
bind、call、apply实现
new语法实现
instanceof实现
compose实现
发布订阅实现
千分位分隔符
深拷贝
寄生组合继承的实现
webpack
webpack优化手段
babel实现的原理
webpack中loader和plugin的区别
如何实现一个plugin
前端优化方式有哪些
打包优化
cdn加速
http请求
服务端渲染
启用GPU硬件加速渲染
图片懒加载
虚拟列表
其他
Session 、Cookie和Token三者的关系和区别
CSS隔离方案有哪些
TCP和UDP的区别
TCP的三次握手和四次挥手
http和https的区别
https的优缺点以及https的握手过程
对称加密和非对称加密
DNS的工作原理
SSL和TSL
SSL安全套接层（Secure Sockets Layer）
TSL传输安全层（Transport Layer Security）TLS1.0和TLS1.1都是不安全的。主流版本TLS2.0
区别
XSS和CSRF
XSS Cross-site scripting
- 类型
- 反射型
将用户输入的数据反射给浏览器。
- 存储型
将用户输入的数据存储到服务器。例如输入的评论或者文章。所有访问改评论或文章都会执行恶意js
- 基于DOM
通过恶意脚本修改dom结构,仅在客户端完成攻击
- 防范
- 输入检查
检查用户的输入，将用户输入转义
- 输出检查
检查渲染到dom上的内容,将输出的内容转义后再显示
- httpOnly
防止恶意脚本读取cookie。
`Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly- Content Security Policy（内容安全策略）
严格的 CSP 在 XSS 的防范中可以起到以下的作用：
- 禁止加载外域代码，防止复杂的攻击逻辑。
- 禁止外域提交，网站被攻击后，用户的数据不会泄露到外域。
- 禁止内联脚本执行（规则较严格，目前发现 GitHub 使用）。
- 禁止未授权的脚本执行（新特性，Google Map 移动版在使用）。
- 合理使用上报可以及时发现 XSS，利于尽快修复问题。
CSRF Cross-site request forgery
跨站请求伪造：劫持受信用账户向服务器发送请求的攻击方式。
- 与xss的区别
CSRF一般基于xss实现攻击。获取用户cookie，伪装成用户发送请求。
- 防范
- 使用token。
- 同源策略
- Referer Header
