【无标题】

vue模版编译原理

https://segmentfault.com/a/1190000013763590

1. 第一步是将 模板字符串 转换成 element ASTs（解析器）
2. 第二步是对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化（优化器）

优化器的目标是找出那些静态节点并打上标记，而静态节点指的是 DOM 不需要发生变化的节点

什么是静态根节点？ 答：子节点全是静态节点的节点就是静态根节点

整体逻辑其实就是递归 AST 这颗树，然后将 静态节点 和 静态根节点 找到并打上标记。

3. 第三步是 使用 element ASTs 生成 render 函数代码字符串（代码生成器）

http缓存机制

https://www.cnblogs.com/chenqf/p/6386163.html

实现一个eventBus

html是怎么在页面画出来的

v-html 怎么防止xss攻击
https://www.cnblogs.com/chenqf/p/5200713.html

盒子模型

BFC盒模型 Block Formatting Context 块级格式化上下文

一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素

触发BFC的条件

• body根元素
• 设置浮动，不包括none
• 设置定位，absoulte或者fixed
• 行内块显示模式，inline-block
• 设置overflow，即hidden，auto，scroll
• 表格单元格，table-cell 弹性布局，flex

• 在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
• IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

flex实现相关布局问题

flex-direction: column; 可以设置主轴的方向 默认应该是row
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
设置交叉轴对齐方式，可以垂直移动主轴。

如果主轴是默认的（横轴）
/* 对齐方式 /
justify-content: center; / 居中排列 /
justify-content: start; / 从行首开始排列 /
justify-content: end; / 从行尾开始排列 /
justify-content: flex-start; / 从行首起始位置开始排列 /
justify-content: flex-end; / 从行尾位置开始排列 /
justify-content: left; / 一个挨一个在对齐容器得左边缘 /
justify-content: right; / 元素以容器右边缘为基准，一个挨着一个对齐, */

/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* 分配弹性元素方式 /
justify-content: space-between; / 均匀排列每个元素
首个元素放置于起点，末尾元素放置于终点 /
justify-content: space-around; / 均匀排列每个元素
每个元素周围分配相同的空间 /
justify-content: space-evenly; / 均匀排列每个元素
每个元素之间的间隔相等 /
justify-content: stretch; / 均匀排列每个元素
‘auto’-sized 的元素会被拉伸以适应容器的大小 */

移动端适配以及rem的具体计算
typeof与instanceof判断数据类型
typeof虽然对原始值很有用，但它对引用值的用处不大。我们通常不关心一个值是不是对象，而是想知道它是什么类型的对象。为了解决这个问题，ECMAScript 提供了 instanceof 操作符。使用如下：

    function f1() { console.log(111); }
    console.log(f1 instanceof Object);//true
    console.log(f1 instanceof Function);//true
    console.log(f1 instanceof RegExp);//false

instanceof实现原理

事件循环机制（宏任务、微任务）以及相应代码写执行顺序
js循环引用
深拷贝用js如何去实现

webpack常用loader、plugin

当 webpack 碰到不识别的模块的时候，webpack 会在配置的 module 中进行该文件解析规则的查找

rules 就是我们为不同类型的文件定义的解析规则对应的 loader，它是一个数组
通过 test 选项来匹配需要处理的文件，通常通过正则的方式来匹配文件后缀类型
use 针对匹配到文件类型，调用对应的 loader 进行处理

module.exports = {
    module: {
        rules: [
            {
                test: /\.xxx$/,
                use: {
                    loader: 'xxx-loader'
                }
            }
        ]
    }
}

css-loader、style-loader、image-webpack-loader(压缩图片）、file-loader、vue-loader
把识别出的资源模块，移动到指定的输出⽬目录，并且返回这个资源在输出目录的地址(字符串)

Plugins 扩展 webpack 本身的一些功能，它们会运行在 webpack 的不同阶段（钩子 / 生命周期）。

例如：clean-webpack-plugin 在新一轮构建时，把之前的包都清理掉
HtmlWebpackPlugin 在打包结束后，⾃动生成⼀个 html 文件，并把打包生成的 js 模块引⼊到该 html 中

webpack执行流程与实现原理

linux常用操作命令 直接说不会
CI/CD的一些问题
前端攻击 XSS，CSRF ？避免方法？
说一下http缓存机制