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、作用域、作用域链、变量提升

  作用域负责收集和维护由所有声明的标识符(变量)组成的一系列查询,并实施一套非常严格的规则,确定当前执行的代码对这些标识符的访问权限。(全局作用域、函数作用域、块级作用域)。作用域链就是从当前作用域开始一层一层向上寻找某个变量,直到找到全局作用域还是没找到,就宣布放弃。这种一层一层的关系,就是作用域链。

6、继承(含es6)、多种继承方式

7、EventLoop

原文地址:https://www.cnblogs.com/huangfeihong/p/15185696.html