2022前端高频面试题（持续更新中）

一、HTML部分

1. html5的新特性(*)
   H5相关资源链接

2. HTML语义化

   1、易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
   2、有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
   3、方便其他设备解析，如盲人阅读器根据语义渲染网页 
   4、有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐
   

3. 页面渲染HTML的过程(*)

   1. 浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。
   2. 浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。
   3. DOM Tree + CSSOM --> 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。
      DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性
   4. 一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。
      注意： 以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。

二、CSS部分

1. 盒子模型 (*)

   盒模型的组成，由里向外content,padding,border,margin。
   在IE盒子模型中，width表示content+padding+border这三个部分的宽度。
   在标准的盒子模型中，width指content部分的宽度。

  box-sizing: content-box 是W3C盒子模型
  box-sizing: border-box 是IE盒子模型

2. 画一个三角形

.a{
    
    
     width: 0;
     height: 0;
     border-width: 100px;
     border-style: solid;
     border-color: transparent #0099CC transparent transparent;
     transform: rotate(90deg); /*顺时针旋转90°*/
 }
<div class="a"></div>

3. 清除浮动的几种方式
   相关链接

三、javascript部分

1. js原型与原型链

   相关资源链接

2. js数组常用方法
   相关链接

3. this的理解

   • this 总是指向函数的直接调用者
   • 如果有 new 关键字，this 指向 new 出来的实例对象
   • 在事件中，this 指向触发这个事件的对象
   • 箭头函数中，函数体内的this对象，就是定义时所在作用域的对象，而不是使用时所在的作用域的对象。

   一.普通函数

   function foo() {
         
         
     console.log(this.a)
   }
   var a = 1
   foo()  //1
   const obj = {
         
         
     a: 2,
     foo: foo
   }
   obj.foo()      //2
   const c = new foo()   //undefined
   

   二. 箭头函数

   function a() {
         
         
     return () => {
         
         
       return () => {
         
         
         console.log(this)
       }
     }
   }
   a()()()        //Window
   

   首先箭头函数其实是没有 this 的，箭头函数中的 this 只取决包裹箭头函数的第一个普通函数的 this。在这个例子中，因为包裹箭头函数的第一个普通函数是 a，所以此时的 this 是 window。另外对箭头函数使用 bind这类函数是无效的。

4. apply, bind, call 方法的用法以及区别
   相关链接