春招之路-JS+CSS+HTML

2333陆陆陆

已于 2022-10-11 10:55:52 修改

阅读量300

点赞数

分类专栏：春招秋招文章标签： javascript 前端 css html

于 2022-08-29 08:21:21 首次发布

本文链接：https://blog.csdn.net/Grandylu/article/details/126577434

版权

春招秋招专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JS

1.闭包

方法里返回一个方法
作用：延长变量生命周期：scope作用域链中先看到自己AO，再看到外部的GO，返回函数中能拿到私有变量，会常驻内存中，不会被js垃圾回收机制清除
创造私有环境：创建不同的实体时，每个实体有各自的环境，调用返回的函数不会改变原本的变量，例如Vue2中的data，每个组件有自己的私有data作用域，互不干扰

2.var,let,const,不可修改对象

不使用声明变量，在任何地方都是全局变量的一个属性，严格模式报错
var：全局作用域，存在声明提升，可以覆盖声明，块外可以访问，函数外不能访问
let：es6新增，块级作用域，块外部不能访问
const：es6新增，块级作用域，常量，不能重新赋值，复杂类型可以修改属性
暂时性死区：使用let和const声明之前调用会报错
es6定义class内部函数时，外部的属性存在变量提升
Object.freeze只能冻结一层，可以通过递归使用Object.freeze，或者proxy的set方法监听修改

4.作用域与作用域链

作用域：变量的生命周期，分为全局作用域，块级作用域，函数作用域，词法作用域(由声明时位置决定)，动态作用域(this)
作用域链：scope，当一个函数创建之后，先访问到内部的属性和方法AO，再访问到外部上下文的属性和方法GO，函数创建的时候保存

3.原型与原型链

原型prototype：函数所特有的，每个函数都有一个原型对象，
原型对象的constructor指向他的构造函数，构造函数的prototype指向原型对象，相互指向，
new构造函数创建一个实例,每个对象都有一个_proto_,实例的_proto_指向函数的原型对象
实例对象被创造时会从原型中继承公共的属性和方法
原型链：当调用属性方法时，找不到就去原型上找，再去原型的原型上找，直到object.prototype.proto=null，
这种层级关系叫做原型链
f().proto=Function.prototype
Function.prototype.proto=Object.prototype
Object.proto=Function.prototype
Function.proto=Function.prototype
Function.prototype=Function.prototype

4.this指向

this指向：全局环境调用this指向window，nodejs中指向module.export函数中指向global全局对象
作为对象方法被调用指向该对象
通过call、apply和bind方法更改this指向
作为构造函数调用指向创建的对象实例

5.箭头函数与普通函数

箭头函数不绑定this，this永远指向上下文的this，不能改变指向，
是匿名函数，不能作为构造函数，不能使用new
不能使用argument获取参数，只能用…rest获取参数
没有prototype，有构造函数

6.数据类型判断数据类型

基本数据类型：String,Number,null,undefined,symbol(es6,独一无二的值,不能计算,对象属性用[])
引用数据类型：Array,object,set(es6),map(es6)
判断数据类型方法：
typeof判断基本类型和方法，引用类型都是object，null返回object
instanceof判断引用类型,自定义对象,方法，不能判断基本类型
Object.prototype.toString.call()无法判断自定义对象,返回[object xxx]
constructor查看构造函数,不能判断undefined和null

7.浅拷贝深拷贝

基本数据类型存在栈中
引用数据类型地址存在栈中，值存在堆中
赋值：基本类型不影响原值，引用类型影响原值
浅拷贝：创建新对象，对象中的基本类型拷贝值，复杂类型拷贝地址
Array.concat(),Array.slice(),Array.from(),Object.assign(),…扩展运算符
深拷贝：开辟新的栈地址，不会改变原对象属性
JSON.parse(JSON.stringify()),jQuery $.extend(),lodash.cloneDeep()
如果对象中存在循环引用，使用Map的存储key和value一样的对象，如果存在直接返回引用

8.防抖与节流

防抖：事件每次执行后重新计时，计时结束后触发事件，逐字联想
节流：固定时间内只能执行一次，提交表单

9.事件传播

捕获阶段：事件对象从目标的祖先节点Window开始传播直至目标
目标阶段：事件对象传递到事件目标。如果事件的type属性表明后面不会进行冒泡操作，那么事件到此就结束了
冒泡阶段：事件对象向上传播，到Window对象结束
cancelBubble阻止事件冒泡
事件委托：利用事件冒泡传播特性，将子元素的事件委托给父元素，利用event对象，改善性能

10.ts与js区别，静态类型与动态类型

js是动态类型，一个变量可以用作不同的类型
ts增加静态类型，静态类型检查可以earlyfail，在编译时报错，增强可读性
包容性好，ts是js的超集，js可以改为ts，ts报错生成js，兼容第三方库
有活跃的社区

11.V8引擎执行过程，GC机制

生成抽象语法树AST：词法分析将源码拆解成token，语法分析将token转为AST
生成字节码：解释器根据AST生成字节码，解释器执行字节码(字节码是介于AST和机器码之间,通过解释器将其转换为机器码后执行)
执行代码：发现重复执行的热点代码HotSpot，优化编译器TurboFan转换为优化机器码，优化了执行速度
为什么要生成AST?
代码错误检查，格式化，方便代码打包，不依赖于文法和语言细节，ts，jsx转成js
垃圾回收机制?
基于分代回收机制，新生代容易早死，老生代活得更久
新创建的对象或只经历一次垃圾回收的称为新生代，64位64MB，32位32MB
经历过多次垃圾回收的对象称为老生代，64位1400MB，32位700MB
新生代分为from和to两个空间，to一般是闲置的，新对象放入from空间满时执行scanvenge进行垃圾回收，
首先检查from空间存活的对象，如果满足条件晋升老生代，不满足条件移动到to空间，
如果对象不存活，释放对象的空间，将to和from进行交换
晋升条件：对象是否经历过回收，to空间内存占比是否超过25%限制，因为to和from交换to太小影响内存分配
scavenge牺牲空间换取时间，无法大规模应用到所有垃圾回收中，新生代生命周期短
老生代
标记清除法：遍历堆中所有的对象，标记活着的对象(可以从根对象访问到的对象，如局部变量，全局对象，DOM元素)，
清除阶段清除没有被标记的对象，回收内存
缺点：会造成很多内存碎片，不便于内存分配，所以引入标记压缩法
标记压缩法：对象被标记为死亡后，在整理过程中活着的对象往一端移动，移动完成后直接清理掉外部内存
V8增量式标记回收：避免不一致情况，垃圾回收时执行逻辑必须暂停，新生代内存小停顿时间短，老生代回收时间长，停顿影响大，
将一次停顿分成多步，每次执行完一会让逻辑执行一会，交替并发运行

12.es6

let,const,set,map,class,symbol,箭头函数,for…of,Promise,Proxy,es module

13.0.1+0.2=0.3

数字以双精度64位浮点数来储存，s * m * 2^e,最大值是1*(2⁵³-1)*(2⁹⁷¹)，最小值1 * 1 * (2^-1074)
小数二进制是无限循环小数，js在某个精度点直接舍弃，产生误差，可以精确表示位数有限且分母为2的小数
先转成整数再转成小数，toFixed指定保留位数，bignumber

14.弱引用

如果持有对象的强引用，就不会被垃圾回收机制回收，如果对象被弱引用，会被认为是不可访问的，可能在任何时刻被回收
weakset:只能存储对象，不能存值，存储弱引用对象，无法遍历，没有其他引用会回收
weakmap:键名弱引用，不可枚举，值是强引用任意

15.异常

Error开发者抛出的异常，SyntaxError语法错误，构建AST时语法分析和词法分析时抛出，TypeError类型错误，
ReferenceError引用错误undefined，RangeError边界错误,URIError url错误
通过window.onError全局异常捕获，但是加载跨域脚本不显示错误细节，在CDN或静态资源服务器允许CORS跨域，借助AST对全部目标添加try/catch
try/catch能捕获到的异常必须是已经进入try/catch但是未执行完时抛出的，异步方法，外部调用，promise异常不能捕获

16.隐式转换

减，乘，除：先转换为number再计算，
加：一侧为string另一侧转成string，一侧为Number，另一侧转成Number，
一侧为Number另一侧为引用，转成字符串拼接，优先级从高到低
== NaN返回false，Boolean比较转成Number，String和Number比较转成数字，
null == undefined,undefined == undefined,基本和引用比较先valueOf后toString
基本类型先比较类型再比较值，引用类型比较地址

17.eventloop

js的eventloop
事件循环机制：js是单线程，js引擎遇到异步事件会将其挂起，执行执行栈的其他内容，
异步事件返回结果后加入事件队列，等待执行站中任务执行完毕，执行任务队列中任务
执行栈为空，检查微任务队列，没有就拿出宏任务队列中的任务放到执行栈，有就清空微任务
宏任务：setTimeout,setInterval
微任务：promise.then,await后面的语句,object.observe
nodejs的eventloop
如果需要长时间完成，分配一个工作线程处理，工作完成触发回调将响应结果返回主线程
一次只能执行一个回调，不会造成死锁
1.执行setTimeout和setInterval的回调
2.执行系统操作的回调
3.系统内部调用
4.检查新的IO事件，执行IO相关回调
5.执行setImmediate回调
6.执行准备关闭的回调函数socket.on(close)
宏任务：setTimeout,setInterval,setImmediate
微任务：process.nextTick
为什么区分宏任务和微任务？
为了方便插队，如果不区分，新任务等到下一个宏任务完成之后才能进行，状态无法在下一个宏任务中同步

18.js继承

1.原型链继承：继承父类型原型中方法，不能继承属性，实例可以互相修改属性值
2.构造函数继承：子类内部调用父类，通过call改变this指向，无法继承原型中方法
3.组合继承：原型链继承+构造函数继承，先通过call改变this指向调用构造函数，再让原型等于另一个实例
function sub(){
Person.call(this,name);
}
sub.prototype=new Person();
结合二者优点，可继承原型属性，属性私有，调用两次构造函数耗内存
4.原型式继承：用函数包装对象，返回函数调用，函数变为可以增添属性的对象，object.create就是这个道理，
新实例属性都是后面添加的，无法复用
function content(obj){
function F(){};
F.prototype=obj;
return new F();
}
5.寄生式继承：原型式继承外面套一层函数传参
6.寄生组合式继承：寄生式+组合式，父类实例改为指向父类原型每减少一次构造函数执行

css+html

1.回流(重排)，重绘

重绘：当页面元素改变不影响元素在文档流中位置，浏览器赋予新样式重新绘制
更改颜色，背景
回流：当渲染树中的元素尺寸，布局改变，浏览器重新渲染DOM
添加/删除DOM，尺寸改变，内容变化，激活css伪类
回流一定引起重绘，重绘不一定引起回流
减少：避免多层内联样式
动画position设置为absolute或fixed脱离文档流
在DOM最内层改变class
尽量一次性更改样式
先display：none隐藏不占用空间，再显示
使用css硬件加速，transform，opacity，filters不会回流重绘

2.position属性

absolute：绝对定位，相对于position不为static的第一个父元素定位  
fixed：绝对定位，相对于浏览器窗口定位  
relative：相对定位，相对于正常位置  
static：默认值  
sticky：粘性定位，先和static一样，页面滚动到特定位置变为fixed
inherit：父元素继承

2.BFC:块级格式化环境，独立布局区域，不受外部元素影响

脱离文档流方式：
overflow:hidden/auto
display:inline-block/flex
position:absolute/fixed
float:left/right

3.选择器

元素选择器，id选择器(#id)，交集选择器(写在一起)，并集选择器(逗号隔开)，关系选择器(父>子，空格后代，+紧挨，~后面所有兄弟)，属性选择器([])
权重：内联样式>id选择器>类和伪类>元素>通配>继承，!important最高优先级
伪类：:first-child,:last-child,:nth-child,:not,:hover鼠标悬浮,:focus焦点,active松开
伪元素：::before,::after,::first-letter第一个字,::first-line第一行,::selection拖动鼠标选中

4.布局

弹性盒子display:flex，flex-direction默认row，flex:1会得到剩余的宽度，全部flex:1等宽
网格布局display:grid，元素按行和列排列，子元素可以设置grid-column和grid-row开始和结束位置
表格布局display:table，子元素display:table-cell，不能设置间距(通过margin负值和border-collapse:collapse去除边框重叠)
多列布局：设置column-width
浮动float
定位position

5.flex=1

flex=1等价于1 1 0，第一个参数flex-grow放大比例，flex-shrink缩小比例，flex-basis计算是否有多余空间(auto会根据内容多少分配)
flex=0最小内容宽度
content>wifth>flex-basis，没有设置flex-basis，就是width大小
没有设置width，flex就是content大小，min-width和max-width是flex-basis上限和下限

6.em,rem,%,vm

em相对于父元素，rem相对于根元素，二者适于响应式布局
%width，height，padding，margin父元素，font-size父元素fontsize，line-height自身font-size，transform自身
vm相对于视口

7.盒模型

每个盒模型包括content，padding，border，margin，子元素盒模型宽度和=父元素宽度，如果不成立根据过渡约束自动调整0和auto的值
分为标准盒模型(宽度为content宽度)和IE盒模型(宽度为border宽度)，几乎都是标准盒模型，设置IE盒模型box-sizing:border-box

8.less与sass：预处理语言

less支持@定义变量，调用和运算
sass支持$定义变量，监听文件和文件夹，计算，继承，函数(安装ruby)

9.实现居中

元素水平垂直居中：绝对定位+margin:auto，绝对定位+left:50%+right:50%+margin:负一半/transform:translate(-50%,-50%)
flex布局align-items:center;justify-content:center; /margin:auto;
grid布局align-items:center;justify-items:center;
display:table-cell;vertical-align:middle;text-align:center;
table布局display:table-cell;vertical-align:middle;

10.页面解析和渲染

解析html文件，遇到script标签阻塞后续内容解析，下载后执行，遇到link标签，不会阻塞解析，遇到DOM标签添加到DOM树
body中第一个script下载完成之前，浏览器首次渲染，DOM和CSSOM合并成渲染树，css不会阻塞DOM构建，但是会阻塞渲染，
解析完毕，重新渲染，js同步代码执行完毕触发DOMContentLoaded，所有资源和异步代码执行完毕触发load

11.DOM:document object model和BOM:browser object model

DOM树形结构，window.document，包括文档节点，元素节点，属性节点，文本节点
BOM浏览器信息，window，可以获取location地址栏信息进行跳转，history访问历史，screen屏幕信息，navigator浏览器信息

12.行内标签，块级标签，行内块

行内：不设宽高，多个左右排列：

<a><span><br>换行<em>强调<b>加粗<i>斜体  
块级：独占一行，可设置宽高，默认是父元素高度，内容撑开<div><form><h1><ul><li><p><table>  
行内块：可设宽高，不独占一行，左右排列，一些组件：<img><input><label><select><textarea>