2021前端面试随笔
一、HTML、CSS部分
1、html5新特性、语义化
语义化标签：header、nav、main、article、section、aside、footer
语义化：合理正确地使用标签来创建页面结构，如header、footer、nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div
语义化的优点：
a、代码结构清晰，易于阅读，利于开发和维护
b、方便其他设备解析（如屏幕阅读器）根据语义渲染页面
c、有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重
2、浏览器渲染机制、重绘、重排
网页生成过程：
a、HTML被HTML解析器解析成dom树
b、css则呗css解析器解析承CSSOM树
c、结合DOM树和CSSOM树，生成一颗渲染树（Render Tree）
d、生成布局（flow），即将所有渲染树的所有节点进行平面合成
e、将布局绘制（paint）在屏幕上
重排（也称回流）：当DOM‘’的变化影响了元素的几何信息（DOM对象的位置和尺寸大小），浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。触发：
a、添加或者删除可见的DOM元素
b、元素尺寸改变——边距、填充、边框、宽度和高度
重绘：当一个元素的外观发生改变，但没有改变布局，重新把元素的外观绘制出来的过程名叫做重绘，触发：
a、改变元素的color、background、box-shadow等属性
重排的优化建议：
a、分离读写操作
b、样式集中修改
c、缓存需要修改的DOM元素
e、尽量之修改position: absolute或fixed元素，对其他元素的影响不大
3、CSS盒子模型
所有HTML元素可以看作盒子，在css中，“box-shadow”这一术语是用来设计和布局使用的。css盒模型本质上是一个盒子，封装周围的html元素，他包括：边距、边框、填充和实际内容。盒模型允许我们在其他元素和周围元素边框之间的空间放置元素。
4、CSS样式优先级
!important > style > id > class
5、什么是BFC？BFC布局规则是什么？如何创建BFC？BFC应用？
BFC是Block Formating Context的缩写，即块状格式化山下文。BFC是CSS布局放入一个概念，是一个环境，里面的元素不会影响外面的元素。布局规则：Box是CSS布局的对象和基本单位，页面是由若干个box组成的。元素的类型和display属性，决定了这个box的类型。不同的类型的box回参与不同的Formatting Context。
创建：浮动元素display: inline-block；position: absoulate
应用：a、分属于不同的BFC时，可以防止margin重叠；b、清除内部浮动；c、自适应多栏布局
二、DOM、BOM对象
1、BOM（Broswer Object Model）
浏览器对象模型，可以对浏览器窗口进行访问和操作。使用BOM，开发者可以移动窗口、改变状态栏中国呢的文本以及执行其他与页面内容不想干的动作。 使js有能力与浏览器“对话”。
2、DOM（Document Object Model）
文档对象模型，通过它，可以访问HTML文档的所有元素。DOM是W3C（万维网）的标准。DOM定义了访问HTML和XML文档的标准：W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容、结构和样式。
3、W3C DOM标准被分为3哥不同的部分
a、核心DOM —— 针对任何结构化文档的标准模型
b、XML DOM —— 针对XML文档的标准模型
c、HTML DOM —— 针对HTML文档的标准模型
XML DOM：定义了所有XML元素的对象和属性，以及访问他们的方法
HTML DOM：定义了所有HTML元素的对象和属性，以及访问他们的方法
三、JS相关
1、js数据类型、typeof、instanceof、类型转换
a、string、number、boolean、null、undefined、object（function、array）、symbol
b、typeof主要用来判断数据类型，返回值有string、boolean、number、function、object、undefined
c、instanceof判断该对象事谁的实例
d、null表示空对象undefined表示已在作用域中声明但未赋值的变量
2、闭包
闭包是指有权访问另一个函数作用域中的变量的函数 —— 《javascript高级程序设计》
当函数可以记住并访问所在的词法作用域时，就产生了闭包
即使函数是在当前词法作用域之外执行 —— 《你不知道的javascript》
闭包的用途：
a、能够访问函数定义时所在的词法作用域（组织其被回收）
b、私有化变量
c、模拟块级作用域
d、创建模块
闭包的缺点：会导致函数的变量一直保存在内存中，过多的闭包可能会发哦只内存泄露
3、原型、原型链
原型：对象中固有的__proto__属性，该属性指向该对象的prototype原型属性
原型链：当我们访问一个对象 的属性是，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一只找下去，也就是原型链的概念。原型链的尽头一般来说都是Object.prorotype所以这就是我们新建的对象为什么能够使用toString()等方法的原因。
特点：js对象是通过饮用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
4、this指向、new关键字
this
this对象是执行上下文中的一个属性，它指向最后一次调用这个方法的对象，在全局函数中，this等于window，而当函数被作为某个对象调用时，this等于那个对象。在实际开发中，this的指向可以通过一下四种调试模式来判断：
a、函数调用，当一个函数不是一个对象的属性时，直接作为函数来调用时，this指向全局对象。
b、方法调用，如果一个函数作为一个对象的方法来调用时，this指向这个对象。
c、构造函数调用，this指向这个new新创建的对象。
d、第四种是apply、call和bind调用模式，这三个方法都可以显示的指定调用函数的this指向。apply接受的参数是数组，call接受参数列表，bind方法通过传入一个对象，返回一个this绑定了传入对象的心函数。这个函数的this指向除了使用new时会被改变，其他情况下都不会改变。
new
a、首先创建了一个新的空对象
b、设置原型，将对象的原型设置为函数的prototype对象
c、让函数的this指向这个对象，执行构造函数的代码（为这个新对象添加属性）
d、判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象
例子：
function _new(ctx, ...args) {
let obj = new Object();
obj._proto_ = ctx.prototype
let res = ctx.call(obj, ...args)
return res instanceof Object ? res : obj
}
5、作用域、作用域链、变量提升
作用域负责收集和维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。（全局作用域、函数作用域、块级作用域）。作用域链就是从当前作用域开始一层一层向上寻找某个变量，直到找到全局作用域还是没找到，就宣布放弃。这种一层一层的关系，就是作用域链。
