深入原型到原型链
原型是什么每个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 < ...
CSS性能优化
1. 实现方式
内联首屏关键CSS
异步加载CSS
资源压缩
合理使用选择器
减少使用昂贵的属性
不要使用@import
2. 细节
内联首屏关键CSS内联的CSS代码渲染提前，较大的CSS代码不合适，会阻塞，无缓存。关键CSS代码采用内联，其余代码采用外部引用。
异步加载CSS使用JavaScript将link标签插到head标签最后，1234const myCSS = document.createElement("link");myCSS.rel = "stylesheet";myCSS.href = "mystyles.css";document.head.insertBefore(myCSS,document.head.childNodes[document.head.childNodes.length-1].nextSibling);
设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，在不阻塞页面渲染的情况下再进行下载。加载完后将media的值设为screen或all。1< ...
LW2.0开发模式
1. 项目结构项目分node区和静态资源区，node区需要执行node index(入口文件)启动项目静态资源区需要build打包出dist用于node区访问，并且需要run dev启动webpack-dev-server。
2. 开发事项添加新页面需要新建HTML文件于node区，然后在node区路由处注册html外层路由，需要引入一些内部模块。在contorller内需要调用回调将方法引入HTML页面中。然后在静态资源区进行页面开发，vue或逻辑交互写在静态资源区，然后将这些函数与页面引入html当中。
3. 报错看控制层和静态层，调用位置。报错看控制台。
4. 失误
浏览器缓存
路径配置
断点，运行
路由渲染
官方组件的使用