深入原型到原型链
原型是什么 每个JS对象(null除外)都有一个属性 proto ，这个属性会指向该对象的原型。 每个原型都有一个构造函数(constructor)，构造函数的prototype指向实例原型。 原型链 原型与实例通过 proto 串起来的关联结构就是原型链。 Object.create() Obje…
React学习与应用
1.项目搭建 1.1 脚手架搭建项目 npm正常拉框架 1.2 手动敲打Demo 书写声明不同方式的组件 function Name(props){ return 代码块} class Name extends React.Component{ render (){ return (代码块)}} 可…
RealDom和VirtualDom
1. 是什么 RealDom:真实DOM，文档对象模型。 VirtualDom:以JS对象形式存在的对DOM的描述 虚拟DOM为了将虚拟的节点渲染到页面视图中，虚拟DOM对象的节点与真实DOM的属性一一照应。 2. 区别 1. 虚拟DOM不会进行排版与重绘，真实DOM会频繁触发 2. 虚拟DOM的总…
Webpack
1. 背景 实现模块化，更高效管理和维护项目的每一个资源。 模块化 最早是将功能及其相关状态数据各自单独放到不同的JS文件中，然后分别引入到页面。一个script对应一个模块。但是模块都是在全局中工作，大量模块成员污染了环境，模块与模块之间没有依赖关系、维护困难、没有私有空间等问题。 如今流行使用C…
CSS预处理器
1. 是什么？ 扩充了CSS语言，增加了变量、混合、函数等功能，让CSS更易维护、方便。 本质上预处理是CSS的超集，包含一套自己的语法，最后解析成CSS。 2. 有哪些？ sass 最早最成熟的Css预处理器，全面兼容Css的scss。 后缀为.sass与.scss，可以严格按照sass的缩进方式…
设置小于12PX的字体
1. 背景 Chrome中默认最小字号是12px，英文版无限制。 2. zoom zoom的兼容性不高 3. webkit transform:scale 针对Chrome浏览器，加webkit前缀，使用transform：scale进行缩放 scale属性只对可以定义宽高的元素生效。 4. web…
CSS视差滚动
1. 视差滚动 指多层背景以不同的速度移动，形成立体的运动效果。 分三层：悬浮层、内容层、背景层 2. 实现方式 css实现： background attachment transform：translate3D background attachment 设置背景图像是否固定或者随着页面的其余部…
JS常见考点
JS常见类型有哪些？ String,Number,symbol,boolean,bigint,null,undefined 大数相加、相乘算法题可以直接使用bigint，当然再加上字符串的处理会更好 NaN如何判断 isNaN() JS类型如何判断 除null用typeof，instanceof判断…
CSS性能优化
1. 实现方式 内联首屏关键CSS 异步加载CSS 资源压缩 合理使用选择器 减少使用昂贵的属性 不要使用@import 2. 细节 内联首屏关键CSS 内联的CSS代码渲染提前，较大的CSS代码不合适，会阻塞，无缓存。 关键CSS代码采用内联，其余代码采用外部引用。 异步加载CSS 使用JavaS…
LW2.0开发模式
1. 项目结构 项目分node区和静态资源区，node区需要执行node index(入口文件)启动项目 静态资源区需要build打包出dist用于node区访问，并且需要run dev启动webpack dev server。 2. 开发事项 添加新页面需要新建HTML文件于node区，然后在no…