最近在准备2022年的春招实习，但是最近的互联网氛围不是很好，hc感觉都在缩减挺多的，希望可以在这一段时间中好好积累自己，努力提高自己的自我竞争力~

初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。万不可投机取巧，临时抱佛脚只求面试侥幸混过关是错误的！也是不可能的！不可能的！不可能的！

一：HTML，CSS

Doctype作用？标准模式与兼容模式各有什么区别?

  （1）、<!DOCTYPE>声明位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
  
  （2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

页面导入样式时，使用link和@import有什么区别？

  （1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

  （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

  （3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
   
   (4)link支持使用js控制DOM去改变样式，而@import不支持;
   
   (5)优先级 link > @import

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

  * HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
            绘画 canvas;
            用于媒介回放的 video 和 audio 元素;
            本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
        sessionStorage 的数据在浏览器关闭后自动删除;
            语意化更好的内容元素，比如 article、footer、header、nav、section;
            表单控件，calendar、date、time、email、url、search;
            新的技术webworker, websocket, Geolocation;

    移除的元素：
            纯表现的元素：basefont，big，center，font, s，strike，tt，u;
            对可用性产生负面影响的元素：frame，frameset，noframes；

  * 支持HTML5新标签：
           IE8/IE7/IE6支持通过document.createElement方法产生的标签，
             可以利用这一特性让这些浏览器支持HTML5新标签，
             浏览器支持新标签后，还需要添加标签默认的样式。

       当然也可以直接使用成熟的框架、比如html5shim;
           <!--[if lt IE 9]>
                  <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
           <![endif]-->

  * 如何区分HTML5： DOCTYPE声明\新增的结构元素\功能元素

简述一下你对HTML语义化的理解？

  用正确的标签做正确的事情。
  html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
  即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
  搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
  使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

CSS 盒模型

  （1）有两种， 标准模型（W3C模型）和 IE 模型
  （2）盒模型： 内容(content)、填充(padding)、 边框(border)，边界(margin)、 
  （3）区  别： 标准模型：计算元素的宽高只算 content 的宽高 
               IE模型：计算元素的宽高包含 content 、padding、border
可以使用css中的box-sizing属性进行盒子宽度模型的计算（box-sizing 的默认值是content-box）
  div {
  // 设置标准模型
  box-sizing: content-box;
  // 设置IE模型
  box-sizing: border-box;
}

CSS选择符有哪些？哪些属性可以继承？优先级是如何计算的？

  *   1.id选择器（ # myid）
          2.类选择器（.myclassname）
          3.标签选择器（div, h1, p）
          4.相邻选择器（h1 + p）
          5.子选择器（ul > li）
          6.后代选择器（li a）
          7.通配符选择器（ * ）
          8.属性选择器（a[rel = "external"]）
          9.伪类选择器（a:hover, li:nth-child）

  *   可继承的样式： font-size font-family color, UL LI DL DD DT;

  *   不可继承的样式：border padding margin width height ;
  
  优先级：
  *   优先级就近原则，同权重情况下样式定义最近者为准;
  *   载入样式以最后载入的定位为准;

  优先级为:
          同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
          !important >  id > class > tag
          important 比 内联优先级高

对BFC规范(块级格式化上下文：block formatting context)的理解？

BFC | 前端随笔 FE-Essay (i-want-offer.github.io)

  （W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）
   一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
   不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

请解释一下为什么需要清除浮动？清除浮动的方式

  1、父级div定义height；
  2、父级div 也一起浮动；
  3、常规的使用一个class；
          .clearfix::before, .clearfix::after {
              content: " ";
              display: table;
          }
          .clearfix::after {
              clear: both;
          }
          .clearfix {
              *zoom: 1;
          }

  4、SASS编译的时候，浮动元素的父级div定义伪类:after
          &::after,&::before{
              content: " ";
          visibility: hidden;
          display: block;
          height: 0;
          clear: both;
          }
  5. 创建BFC

  解析原理：
  1) display:block 使生成的元素以块级元素显示,占满剩余空间;
  2) height:0 避免生成内容破坏原有布局的高度。
  3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
  4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:".",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
  5）zoom：1 触发IE hasLayout。

  通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。

Node和Element 的区别

浅析Node与Element的区别 - 知乎 (zhihu.com)

移动端1px解决方案

移动端1px解决方案 - 掘金 (juejin.cn)

二：JS

数值转换

需要去理解字符串，数值，对象，数组进行+-运算的时候的转换规则，理解字符串比较是使用unicode逐个字符进行比较的 etc: "12" < "8" 因为 “1” < “8”,在逐个字符比较的时候发现第一个字符在unicode编码时小于另外一个所以判断结束为小于的结果。

JavaScript字符串间的比较 - 云+社区 - 腾讯云 (tencent.com)

JavaScript原型，原型链 ? 有什么特点？

原型(prototype): 一个简单的对象，用于实现对象的 属性继承。可以简单的理解成对象的爹。在 Firefox 和 Chrome 中，每个JavaScript对象中都包含一个__proto__ (非标准)的属性指向它爹(该对象的原型)，可obj.__proto__进行访问。
构造函数: 可以通过new来 新建一个对象 的函数。
实例: 通过构造函数和new创建出来的对象，便是实例。 实例通过**__proto__**指向原型，通过**constructor**指向构造函数。

每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。关系：instance.constructor.prototype = instance.proto

特点： JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性，如果没有的话，就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。 function Func(){} Func.prototype.name = "Sean"; Func.prototype.getInfo = function() { return this.name; } var person = new Func();//现在可以参考var person = Object.create(oldObject); console.log(person.getInfo());//它拥有了Func的属性和方法 //"Sean" console.log(Func.prototype); // Func { name="Sean", getInfo=function()}

Javascript如何实现继承？

[译] 为什么原型继承很重要 - SegmentFault 思否

JavaScript 继承的八种方式 - 云+社区 - 腾讯云 (tencent.com)

JavaScript有几种类型的值？，你能画一下他们的内存图吗？

面试官：JavaScript 原始数据类型 Symbol 有什么用？ - 掘金 (juejin.cn)

 栈：原始数据类型（Undefined，Null，Boolean，Number、String， Bigint, Symbol）
 堆：引用数据类型（对象、数组和函数）
Symbol类型是为了解决属性名冲突的问题，顺带还具备模拟私有属性的功能。

 两种类型的区别是：存储位置不同；
 原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
 引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体

Javascript作用链域?

想要理解作用域链，首先需要了解什么是执行上下文，作用域链为什么在上下文中，它又在其中发挥勒一个什么样的作用。

.1 执行上下文(EC)

执行上下文可以简单理解为一个对象:

它包含三个部分:
- 变量对象(VO)
作用域链(词法作用域)
this指向
它的类型:
- 全局执行上下文
函数执行上下文
eval执行上下文

代码执行过程:
- 创建 全局上下文 (global EC)
全局执行上下文 (caller) 逐行 自上而下 执行。遇到函数时，函数执行上下文 (callee) 被push到执行栈顶层
函数执行上下文被激活，成为 active EC, 开始执行函数中的代码，caller 被挂起
函数执行完后，callee 被pop移除出执行栈，控制权交还全局上下文 (caller)，继续执行

变量对象

变量对象，是执行上下文中的一部分，可以抽象为一种 数据作用域，其实也可以理解为就是一个简单的对象，它存储着该执行上下文中的所有 变量和函数声明(不包含函数表达式)。

活动对象 (AO): 当变量对象所处的上下文为 active EC 时，称为活动对象。

作用域

执行上下文中还包含作用域链。理解作用域之前，先介绍下作用域。作用域其实可理解为该上下文中声明的 变量和声明的作用范围。可分为 块级作用域 和 函数作用域

特性:

声明提前: 一个声明在函数体内都是可见的, 函数优先于变量
非匿名自执行函数，函数变量为只读状态，无法修改

let foo = function() { console.log(1) }; (function foo() { foo = 10 // 由于foo在函数中只为可读，因此赋值无效 console.log(foo) }())

// 结果打印： ƒ foo() { foo = 10 ; console.log(foo) } 复制代码

作用域链

我们知道，我们可以在执行上下文中访问到父级甚至全局的变量，这便是作用域链的功劳。作用域链可以理解为一组对象列表，包含 父级和自身的变量对象，因此我们便能通过作用域链访问到父级里声明的变量或者函数。

由两部分组成:
- [[scope]]属性: 指向父级变量对象和作用域链，也就是包含了父级的[[scope]]和AO
AO: 自身活动对象

如此 [[scopr]]包含[[scope]]，便自上而下形成一条 链式作用域。

["1", "2", "3"].map(parseInt) 答案是多少？

 parseInt() 函数能解析一个字符串，并返回一个整数，需要两个参数 (val, radix)，
 其中 radix 表示要解析的数字的基数。【该值介于 2 ~ 36 之间，并且字符串中的数字不能大于radix才能正确返回数字结果值】;
 但此处 map 传了 3 个 (element, index, array),我们重写parseInt函数测试一下是否符合上面的规则。

 function parseInt(str, radix) {
     return str+'-'+radix;
 };
 var a=["1", "2", "3"];
 a.map(parseInt);  // ["1-0", "2-1", "3-2"] 不能大于radix

 因为二进制里面，没有数字3,导致出现超范围的radix赋值和不合法的进制解析，才会返回NaN
 所以["1", "2", "3"].map(parseInt) 答案也就是：[1, NaN, NaN]

 详细解析：http://blog.csdn.net/justjavac/article/details/19473199

什么是闭包（closure），为什么要用它？

 闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

 闭包的特性：

 1.函数内再嵌套函数
 2.内部函数可以引用外层的参数和变量
 3.参数和变量不会被垃圾回收机制回收

new操作符具体干了什么呢?

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

 var obj  = {};
 obj.__proto__ = Base.prototype;
 Base.call(obj);

三：浏览器

介绍一下你对浏览器内核的理解？

浏览器内核的解析和对比 - 依水间 - 博客园 (cnblogs.com)

  主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
  渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

  JS引擎则：解析和执行javascript来实现网页的动态效果。

  最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

如何实现浏览器内多个标签页之间的通信? (阿里)

  WebSocket、SharedWorker；
  也可以调用localstorge、cookies等本地存储方式；
  也可以调用postmesage的方式进行不同window对象的通信

  localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
  我们通过监听事件，控制它的值来进行页面信息通信；
  注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；

跨域问题及CORS解决跨域问题方法

跨域问题及CORS解决跨域问题方法 - 云+社区 - 腾讯云 (tencent.com)

network瀑布图解析

谷歌chrome浏览器network中Stalled分析和优化 - 扰晨 - 博客园 (cnblogs.com)

资源请求加载的优先级

当我们在请求一个域名，得到相应的html文件中，浏览器该是如何去处理（link, script, image, import）请求的发送顺序的，

浏览器页面资源加载过程与优化 - 掘金 (juejin.cn)

XSS和CSRF两种攻击方式

我其实挺有疑惑的，csrf攻击是通过cookie进行发送匿名请求导致能够触达到服务端，但是现在浏览器采用的cookie机制是大部分情况都不会发送到第三域的网站中（lax）,那么这一种攻击还存在嘛？

XSS 和 CSRF简述及预防措施_我的博客-CSDN博客_csrf xss

cookie的属性降级

Cookie的所有属性详解_风吹过的博客-CSDN博客_cookie属性

浏览器渲染

挺好的一篇文章讲述的是一个layout_tree如何绘制到屏幕上的这一个过程。

浏览器缓存 -> dns -> tcp -> tls -> dom tree and cssom tree -> reder tree -> reder layer -> composite layer（合成层） -> graphiclayer -> graphics_context 将位图给到gpu进行合成上屏

浏览器渲染流程&Composite（渲染层合并）简单总结 - SegmentFault 思否

网络篇 | 前端随笔 FE-Essay (i-want-offer.github.io)

settimeout不准时的讲解

为什么都说定时器 setTimeout 不能准时执行呢？ - 掘金 (juejin.cn)

事件循环

先去讲宏微任务，讲为什么会出现微任务，再从整一个脚本的执行流开始讲起，讲每一个任务的插入运行流程。（script -> nextick -> promise -> settimeout）

浏览器知识点整理（十二）事件循环机制（Event Loop） - 掘金 (juejin.cn)

浏览器内存管理

V8 | 前端随笔 FE-Essay (i-want-offer.github.io)

垃圾回收: 将内存中不再使用的数据进行清理，释放出内存空间。V8 将内存分成 新生代空间 和 老生代空间。

新生代空间: 用于存活较短的对象
- 又分成两个空间: from 空间与 to 空间
Scavenge GC算法: 当 from 空间被占满时，启动 GC 算法
- 存活的对象从 from space 转移到 to space
清空 from space
from space 与 to space 互换
完成一次新生代GC
老生代空间: 用于存活时间较长的对象
- 从新生代空间转移到老生代空间的条件
  - 经历过一次以上 Scavenge GC 的对象
当 to space 体积超过25%
标记清除算法: 标记存活的对象，未被标记的则被释放
- 增量标记: 小模块标记，在代码执行间隙执，GC 会影响性能
并发标记(最新技术): 不阻塞 js 执行
压缩算法: 将内存中清除后导致的碎片化对象往内存堆的一端移动，解决 内存的碎片化

内存泄露

意外的全局变量: 无法被回收
定时器: 未被正确关闭，导致所引用的外部变量无法被释放
事件监听: 没有正确销毁 (低版本浏览器可能出现)
闭包: 会导致父级中的变量无法被释放
dom 引用: dom 元素被删除时，内存中的引用未被正确清空

可用 chrome 中的 timeline 进行内存标记，可视化查看内存的变化情况，找出异常点。

四：前端其他

五：计算机网路

HTTP3.0

使用HTTP3可以让我们使用更短的时间来进行有效数据的传输与验证。解决了{【TCP 协议存在队头阻塞和建立连接延迟等缺点】等tcp存在的问题。

HTTP/3：甩掉TCP、TLS 的包袱，构建高效网络 (daimajiaoliu.com)

HTTP2

HTTP2主要解决勒四个问题。1. TCP通道的多路复用 2. 使用二进制帧的形式使解析起来更快 3. header复用，减少重复数据的发送 4. server_push 顺带将网页中相对的图片等asset资源携带过来

Http系列(二) Http2中的多路复用 - 掘金 (juejin.cn)

HTTP/2之服务器推送(Server Push)最佳实践 - 腾讯WeTest - 博客园 (cnblogs.com)

请求缓存

简述：可以总体分为强缓存和协商缓存，首先通过（expires和cache-control）进行强缓存判断，如果过期的话再发起请求进行协商缓存验证（if-none-match 和 if-mondified-since）如果判断击中之后就会返回304，浏览器从缓存中获得响应资源。

浏览器缓存看这一篇就够了 - 知乎 (zhihu.com)

HTTP-CODE

1xx 消息响应

2xx 成功响应

3xx 重定向

4xx 客户端错误

5xx 服务端错误

信息响应 | 前端随笔 FE-Essay (i-want-offer.github.io)

HTTP-METHOD

GET

请求指定的页面信息，并返回实体主体

HEAD

类似于 get 请求，只不过返回的响应中没有具体的内容，用于获取报文头部

POST

想指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。

PUT

从客户端想服务器传送的数据取代指定的文档内容

DELETE

请求服务器删除指定的页面

CONNECT

HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器

OPTIONS

允许客户端查看服务器性能 (cors用于发起复杂请求中除（（get,post）外的请求）进行预探测操作，检测服务前是否支持该方法。

TRACE

会先服务器收到的请求，主要用于测试或诊断

HTTPS的握手过程

刨根问底系列之https详细握手过程 - 掘金 (juejin.cn)

六：数据结构

七：技术视野

八：项目归总

九：文章整理

My-blog/Front-end-Developer-Questions/Questions-and-Answers at master · markyun/My-blog (github.com) 一个大杂烩形式的前端面试题总结
前端随笔 FE-Essay | 前端随笔 FE-Essay (i-want-offer.github.io) 一个对前端面试题分门别类的汇总，同时有一些真实面经例子在里面
中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(上) - 掘金 (juejin.cn) 一个较为齐全的面经，建议每次面试前多刷几遍，形成自己的知识链路

🗡斩金三银四之前端基础篇（八股文合集）