2021年前端面试官面试题总结1、JavaScript的运行阶段包括哪些部分：编译器：将源代码编译成抽象语法树解释器

前端面试必须掌握的技术总结：

vue原理
原型链
前端优化
Promise
事件循环机制
网络协议
模块化
算法：二分法、动态规划(斐波那契、爬梯子、最小编辑距离、背包、凑零钱)、防抖、节流
H5
css3布局
ES6

3、前端优化

(1)打包优化：webpack
   主要分为缓存、多核、抽离、拆分四个方向。
   1.缓存：cache-loader，以及UglyfiPlugin配置cache：true。
   2.多核：happyPack配置，requre(happypack)，然后启动happyPack.threadPool线程池。默认3。配置的          注意点是base.js里的module里的rule配置user：id=xxx，对应prod.js里的plugins的new HappyPack里的id。
   3.抽离：webpackDllPlugin和Externals。
     webpackDllPlugin的核心思想是将第三方模块抽离，打包成一个个单独的链接库。当需要的模块在动态链接库中时就从中获取，通过DllReferencePlugin插件使用打包的链接库。配置一个webpack_dll.config.js文件
     Externals：resolve.externals是用与配置尝试后缀列表，是因为webpack是通过带入后缀来访问文件是否存在，一个file可能是js文件或json文件，这样就需要多次尝试。externals：[.js, .json, .vue]
    4.拆分：集群编译，利用webpack的entry
   
(2)网络优化：dns、cdn、preload/prefetch/懒加载、缓存、ssr
   
   1.预加载和预读取：
     link标签里的preload配合as告诉浏览器当前页面必须要加载的资源，prefetch将来页面需要加载的资源
     <link rel="preload/prefetch" href="" as="script/style/font">
     preload和prefetch混用会导致资源重复加载
     
     
   



(3)代码优化：loading、web worker、虚拟列表、懒加载、dom/style批量更新

12.Get和Post的区别：

简单总结：四个方面 <语义化、安全、幂等、可缓存>
1.GET用于获取数据，是幂等的，可缓存，安全性差。
2.POST提交创建资源，修改服务器数据，非幂等，不可缓存。

深入理解：
get和post方法都是HTTP协议中的两种请求方法。
HTTP1.0就定义了，HTTP是应用层协议。TCP/IP协议是传输层协议。网络七层协议(自上而下顺序为：7应用层、6表示层、5会话层、4传输层、3网络层、2数据链路层、1物理层) 应表会传网数物。
 
1.报文格式不同，第一行报文是GET或POST报文字符不同。
2.GET用于获取数据，post用于修改数据是HTTP协议的规范，幂等性，缓存，安全性，2KB的url长度限制是浏览器的规范。
3.POST将header和data分开传输属于部门浏览器行为。safari和chrome，fireFox没有。
4.get和post都是明文传输，抓包就能获取完整数据报文，安全性一样低，想要安全传输，就要加密，改为HTTPS。

13.CDN(内容分发网络)

目的是用户就近取得所需内容，解决Internet网络拥堵的情况，提高用户访问网站的响应速度。
CDN关键技术：缓存算法squid、分发能力、负载均衡Nginx、支持协议。
适用于内容更新周期长，访问量大的网站，如政府网站。
缺点：实时性差

14、模块化：CommonJS、AMD、CMD

前端模块规范有三种：CommonJS、AMD、CMD、ES6
CommonJs:服务器端，同步加载，一个单独的文件就是一个模块，通过export导出，require引入。
AMD: 浏览器端，异步加载，RequereJs是主要的实现，提前加载，依赖前置。
CMD：浏览器端，异步加载，SeaJs，用到时加载，依赖就近。依赖SPM打包。
AMD和CMD的最大区别就是模块定义方式和加载时机不同。
ES6： 浏览器端，设计思想尽量静态化，编译时就确定模块的依赖关系，AMD运行时才能确定。
ES6在语言标准上实现了模块化

CommonJs和ES6的区别是：
1.CommonJs输出的是一个值的拷贝，ES6输出的是一个值的引用
2.COmmonJS运行时加载，ES6编译时输出接口。

AMD默认推荐的是
define(['./a','./b']),function(a,b){  //依赖一开始就写好
    a.doSomeThings()
    ...
    b.doSomeThings()
    ...
}

CMD默认推荐的是
define(fucntion(require,export,module){
    let a = require('./a')
    a.doSomeThings
    ...
    let 吧= require('./b')
    b.doSomeThings
    ...
})

1、JavaScript的运行阶段包括哪些部分：

1. 编译器：将源代码编译成抽象语法树
2. 解释器：接受字节码，解释这个字节码
3. JIT工具：将字节码或抽象语法树转换成本地代码
4. 垃圾回收器和分析工具(Profiler)：负责垃圾回收和收集引擎中的信息，帮助改善引擎性能

2、v8引擎的编译：

将源代码编译成抽象语法树=>通过JIT编译器的全代码生成器从抽象语法树直接生成本地代码

3、JavaScript是一种动态类型的脚本语言，动态性是指编译的时候不知道变量的类型，运行的时候才能确定，而且在运行时能够动态修改对象的属性，不像静态语言，变量的类型在编译的时候就已经确定，静态语言即强类型语言。动态语言即弱类型语言。

4、自我总结：JavaScript是一种动态的弱类型的解释型语言。这需要对比解释，java或C++，他们是强类型语言，必须声明变量的类型，即强类型=静态型。而且他们又编译和执行的阶段。JavaScript是解释型语言，无需编译，在程序运行中即可逐行解释执行。而且运行的时候能动态修改变量的类型，通过属性名-属性值的方式保存，最后通过属性值的类型来确定变量的类型。即弱语言=动态性。