vue模板编译原理
1.模板编译入口在初始化时，传入的options参数中有el属性，则进行模板渲染。其中主要的渲染函数为$mount()。//将模板挂载在HTML上进行render判断，template判断，什么情况下，最终都是将模板转换为render函数进行渲染。12345678910111213141516171819// 如果有el属性 进行模板渲染 if (vm.$options.el) { vm.$mount(vm.$options.el); }if (!options.render) { // 如果存在template属性 let template = options.template; if (!template && el) { // 如果不存在render和template 但是存在el属性 直接将模板赋值到el所在的外层html结构（就是el本身 并不是父元素） template = el.outerHTML; ...
防抖与节流
防抖含义合并多次函数为一个
思路将目标方法包装在setTimeout里面，然后该方法是一个事件的回调函数，如果一直执行该回调，则通过clearTimeout将连续动作给删除，待不触发该事件时，setTimeout就会执行这个方法
使用场景页面resize需要做页面适配，需要根据页面最终情况做DOM渲染。或者input输入框在进行校验的情况下，只校验输入最后的结果。
简易实现123456789101112131415/** fn [function] 需要防抖的函数* delay [number] 毫秒，防抖期限值*/function debounce(fn,delay){ let timer = null //借助闭包 return function() { if(timer){ clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时 timer = setTimeout(fn,delay) ...
深入原型到原型链
原型是什么每个JS对象(null除外)都有一个属性__proto__，这个属性会指向该对象的原型。每个原型都有一个构造函数(constructor)，构造函数的prototype指向实例原型。
原型链原型与实例通过__proto__串起来的关联结构就是原型链。
Object.create()Object.create()方法该函数从指定原型对象创建一个新的对象。以参数对象(或null)为原型对象创建一个新对象，用常理会报错。
React学习与应用
1.项目搭建1.1 脚手架搭建项目npm正常拉框架
1.2 手动敲打Demo书写声明不同方式的组件function Name(props){ return 代码块}class Name extends React.Component{ render (){ return (代码块)}}可以在class内声明构造函数,construstor(props){super(props);this.state={}}state必须为对象或Null切有对应的声明周期钩子（类似vue）:1.componentWillMount()挂载到DOM前调用，只调用一次2.componentDidMount()挂载到DOM后调用，只调用一次3.shouldComponentUpdate(nextProps)//用于重新render的情况，更新props4.componentWillReceiveProps(nextProps)//用于将props转换成自己的state，此函数下调用setState不会引起二次渲染5.componentWillUpdate(ne ...
RealDom和VirtualDom
1. 是什么RealDom:真实DOM，文档对象模型。VirtualDom:以JS对象形式存在的对DOM的描述虚拟DOM为了将虚拟的节点渲染到页面视图中，虚拟DOM对象的节点与真实DOM的属性一一照应。
2. 区别
虚拟DOM不会进行排版与重绘，真实DOM会频繁触发
虚拟DOM的总损耗是”虚拟DOM增删改”+真实DOM差异增删改+排版与重绘——真实DOM的总损耗是“真实DOM完全增删改”+ 排版与重绘简单说：改真实DOM会全部计算，改虚拟DOM会有缓存和部分计算
3. 优缺点真实DOM优：易用缺：效率低，解析速度慢，内存占用量过高性能差，频繁操作易导致重绘与回流虚拟DOM优：简单方便，性能提高，跨平台缺：个别性能要求极高的应用中虚拟DOM无法进行针对性的机制优化首次渲染大量DOM时，多了一层虚拟DOM计算，速度稍慢
Webpack
1. 背景实现模块化，更高效管理和维护项目的每一个资源。
模块化最早是将功能及其相关状态数据各自单独放到不同的JS文件中，然后分别引入到页面。一个script对应一个模块。但是模块都是在全局中工作，大量模块成员污染了环境，模块与模块之间没有依赖关系、维护困难、没有私有空间等问题。如今流行使用CommonJS、ES Modules
2. 问题
通过模块化的方式来开发
使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+TypeScript开发脚本逻辑，通过sass、less编写样式
监听文件的变化来反映到浏览器上，提高开发效率
JS代码需要模块化，HTML和CSS这些资源文件也会面临需要被模块化的问题
开发完成后将代码进行压缩、合并以及其他相关的优化
3. 是什么？用于现代JS应用程序的静态模块打包工具。将可以被webpack直接引用的资源打包(bundle.js)内部构建一个依赖图，反射到各个模块，生成一个或多个bundle。
编译代码能力，提高效率，解决浏览器兼容问题
模块整合能力，提高性能，可维护性，解决浏览器频繁请求文件的问题
万物皆可模块能力，维护性增强
...
CSS预处理器
1. 是什么？扩充了CSS语言，增加了变量、混合、函数等功能，让CSS更易维护、方便。本质上预处理是CSS的超集，包含一套自己的语法，最后解析成CSS。
2. 有哪些？sass最早最成熟的Css预处理器，全面兼容Css的scss。后缀为.sass与.scss，可以严格按照sass的缩进方式省去大括号和分号。
less比如sass，可编程功能不够，优点是兼容CSS，影响了SASS演变到了Scss时代。
stylusStylus是一个Css的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行预处理支持。新型语言，可以创建健壮的、动态的、富有表现力的Css。
3. 区别常用特性：
变量(variables)@($)red:#c00;strong{color:@red}
作用域(scope)sass无全局变量
代码混合(mixins)
12345678910111213.alert { font-weight: 700;}.highlight(@color: red) { font-size: 1.2em; color: @ ...
设置小于12PX的字体
1. 背景Chrome中默认最小字号是12px，英文版无限制。
2. zoom123456789101112131415<style type="text/css"> .span1{ font-size: 12px; display: inline-block; zoom: 0.8; //使用zoom缩小字体 } .span2{ display: inline-block; font-size: 12px; }</style><body> <span class="span1">测试10px</span> <span class="span2">测试12px</span></body>
zoom的兼容性不高
3. -webkit-transform:scale针对Chrome浏览器，加we ...
CSS视差滚动
1. 视差滚动指多层背景以不同的速度移动，形成立体的运动效果。分三层：悬浮层、内容层、背景层
2. 实现方式css实现：
background-attachment
transform：translate3D
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动
scroll：默认值，背景图像会随着页面其余部分的滚动而滚动
fixed：当页面的其余部分滚动时，背景图像不会移动
inherit：继承父元素background-attachment属性的值123456789div{ height:100vh .a-img1{ background-image:url(...); background-attachment: fixed; background-size: cover; background-position: center center; }}
transform:translate3Dperspective:css3属性，当元素涉及3d变 ...
JS常见考点
JS常见类型有哪些？String,Number,symbol,boolean,bigint,null,undefined
大数相加、相乘算法题可以直接使用bigint，当然再加上字符串的处理会更好NaN如何判断isNaN()
JS类型如何判断除null用typeof，instanceof判断对象，Object.prototype.toString.call
instanceof原理通过原型链查找该对象是否有与另一个对象相同的原型
手写instanceof类型转换[] == ![] //->true![] -> false -> 0[].toString -> ‘’ -> Number(‘’) -> 0
this指向问题123const a = {b:2,foo:function(){console.log(this.b)}}function b(foo){foo()}b(a.foo)
输出函数b
闭包12345for(var i = 0;i < ...