腾讯云暑期实习前端开发3.23

3.27总结完后 使劲背！把不会的题全总结一遍 坐在走廊上背完

1.自我介绍（稍稍被打断了一下问了项目中的一个问题）

2.问项目，引到为什么不在上一个公司继续做

3.问我硕士专业是干啥的，硕士学nlp为什么以后不做算法，而来从事前端？

4.跨域问题怎么产生的，为什么会有跨域，如何解决，同源策略是为了解决什么问题？而且这个同源策略是浏览器的限制，那你知道APP当中是怎样的吗？客户端和服务端之间又是怎样的呢？

5.提到隐患，前端有哪些影响安全的问题？（提到XSS和CSRF等等）

CSRF：跨站请求伪造 基本概念、攻击方式、防御措施

XSS：跨域脚本攻击 基本概念、攻击方式、防御措施

(1) CSRF的攻击原理

1. 登录受信任网站A，并在本地生成Cookie。（如果用户没有登录网站A，那么网站B在诱导的时候，请求网站A的api接口时，会提示你登录）

2. 在不登出A的情况下，访问危险网站B（其实是利用了网站A的漏洞）。

（2）CSRF如何防御

1. Token验证（用得最多）

服务器发送给客户端一个token

客户端提交的表单中带着这个token

如果这个token不合法，那么服务器拒绝这个请求

2. 隐藏令牌

把 token 隐藏在 http 的 head 头中。

3. Referer验证：

Referer：页面请求来源。只接受本站的请求，服务器才做响应；如果不是，就拦截。

XSS：跨域脚本攻击

核心原理：不需要做任何登录认证，它会通过合法的操作（比如在url中输入、在评论框中输入），向你的页面注入脚本（可能是js、html代码块等）

最后导致的结果：

• 盗用Cookie

• 破坏页面的正常结构，插入恶意内容

• D-doss 攻击

XSS的攻击方式：反射型、存储型

1. 反射型：发出请求时，xss代码出现在url中，作为输入提交到服务器端，服务器端解析后响应，xss 代码随响应内容一起传回给浏览器，最后浏览器解析执行xss代码。

2. 存储型：存储型xss和反射型xss的差别在于：提交的代码会存储在服务器端（数据库、内存、文件系统等），下次请求目标页面时不同再提交xss代码。

XSS的防范措施主要有三个：编码、过滤、校正

CSRF 和 XSS的区别

区别一：

· CSRF：需要用户先登录网站A，获取cookie

· XSS：不需要登录、

区别二：（原理的区别）

· CSRF：是利用网站A本身的漏洞，去请求网站A的api。

· XSS：是向网站A注入JS代码，然后执行JS里的代码，篡改网站A的内容。

6.HTTPS加密的过程

• 对称加密

• 非对称加密

• 混合加密

(1) 客户端向服务端发送自己支持的SSL协议版本，支持的加密算法，和一个随机生成的随机数1。

(2) 服务端向客户端发送选择的SSL协议版本、加密算法，和一个随机生成的随机数2。

(3) 服务端向客户端发送自己的证书。（证书是由CA机构的私钥加密服务端的公钥得到的） 。

(4) 客户端用CA机构的公钥解密得到服务端额公钥，并验证证书。

(5) 客户端将前两次传输的随机数用一种hash算法计算的到xx传给服务端，并随机生成一个随机数3发送给服务端。

(6) 服务端采用同样的hash算法计算随机数1和随机数2，看结果是否和xx相等，相等则验证了客户端的身份，并采用协商的算法通过随机数1,2,3得到加密的秘钥k。

(7) 服务端采用hash算法计算随机数1,2,3得到zz发送给客户端。

(8) 客户端采用同样的hash算法计算随机数1,2,3，看结果是否和zz相等，如果相等则验证了服务端的身份，并采用协商的算法通过随机数1,2,3得到加密秘钥k，至此协商秘钥的过程完成，之后通信采用此加密秘钥k进行加密传输。

7.看到我有用vue-cli搭建项目，问了不了解一些解决前端性能的脚手架配置？可以解决项目过于复杂的一些瓶颈问题？

8.从上一个问题扩展到了webpack的性能优化

优化webpack的构建速度：

• 使用高版本的Webpack和Node.js

• 多进程/多实例构建：HappyPack（不维护了）、thread-loader

• 压缩代码

• webpack-parallel-uglify-plugin

• uglifyjs-webpack-plugin开启parallel参数

• terser-webpack-plugin 开启 parallel 参数

• 多进程并行压缩

• 通过 mini-css-extract-plugin 提取 Chunk 中的 CSS 代码到单独文件，通过 css-loader 的minimize 选项开启 cssnano 压缩 CSS。

• 图片压缩

• 使用基于Node库的imagemin（很多定制选项、可以处理多种图片格式）

• 配置image-webpack-loader

• 缩小打包作用域 ：

• exclude/include (确定 loader 规则范围)

• resolve.modules 指明第三方模块的绝对路径 (减少不必要的查找)

• noParse ：在配置模块相关时，module:{}，对完全不需要解析的库进行忽略 (不去解析但仍会打包到bundle 中，注意被忽略掉的文件里不应该包含 import、require、define 等模块化语句)

• resolve.mainFields 只采用 main 字段作为入口文件描述字段 (减少搜索步骤，需要考虑到所有运行时依赖的第三方模块的入口文件描述字段)

• resolve.extensions 尽可能减少后缀尝试的可能性

• IgnorePlugin (完全排除模块)

• 合理使用alias

• 提取页面公共资源 ：

• 使用 html-webpack-externals-plugin，将基础包通过 CDN 引入，不打入 bundle 中

• 使用 SplitChunksPlugin 进行(公共脚本、基础包、页面公共文件)分离(Webpack4内置) ，替代了 CommonsChunkPlugin 插件

• 基础包分离：

• DLL ：

• 使用 DllPlugin 进行分包，使用 DllReferencePlugin(索引链接) 对 manifest.json 引用，让一些基本不会改动的代码先打包成静态资源，避免反复编译浪费时间。

• HashedModuleIdsPlugin 可以解决模块数字id问题

• 充分利用缓存提升二次构建速度 ：

• babel-loader 开启缓存

• terser-webpack-plugin 开启缓存

• 使用 cache-loader 或者 hard-source-webpack-plugin

• Tree shaking

• 可以用来剔除 JavaScript 中用不上的死代码。

• purgecss-webpack-plugin 和 mini-css-extract-plugin配合使用(建议)打包过程中检测工程中没有引用过的模标记，在资源压缩时将它们从最终的bundle中去掉(只

• 能对ES6 Modlue生效) 开发中尽可能使用ES6 Module的模块，提高tree shaking效率

• 禁用 babel-loader 的模块依赖解析，否则 Webpack 接收到的就都是转换过的 CommonJS 形式的模块，无法进行 tree-shaking

• 使用 PurifyCSS(不在维护) 或者 uncss 去除无用 CSS 代码

• Scope hoisting 作用域提升

• 构建后的代码会存在大量闭包，造成体积增大，运行代码时创建的函数作用域变多，内存开销

• 变大。Scope hoisting 将所有模块的代码按照引用顺序放在一个函数作用域里，然后适当的重命名一些变量以防止变量名冲突

• 必须是ES6的语法，因为有很多第三方库仍采用 CommonJS 语法，为了充分发挥 Scope hoisting 的作用，需要配置 mainFields 对第三方模块优先采用 jsnext:main 中指向的ES6模块化语法

• 动态Polyfill

• 建议采用 polyfill-service 只给用户返回需要的polyfill，社区维护。(部分国内奇葩浏览器UA可能无法识别，但可以降级返回所需全部polyfill)

9.webpack把ES6转换成ES5的过程，我忘记了，讲了一下AST

如果希望将ES6的语法转成ES5，那么就需要使用babel。

而在webpack中，直接使用babel对应的loader就可以了。

　npm install --save-dev babel-loader@7 babel-gore babel-preset-es2015

配置webpack.config.js文件

{ test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',Options: { presets: ['es2015']}}  
}

重新打包，查看bundle.js文件，发现其中的内容变成了 ES5 的语法。

10.面试官去接了个电话，我还松了一口气以为他能忘了这个问题，结果他回来又让我接着说，我只能按自己的理解从ES6与ES5的区别讲了一下，他说我看起来只是知道一些碎片化的和转换相关的东西，而没有系统的了解过

ES6和ES5的区别：

① ES6新增了箭头函数，ES5没有；

② ES6新增了块级作用域，ES5没有；

③ ES6引入Class概念，不再像ES5一样使用原型链实现继承；

④ ES6中可以设置默认函数参数，ES5不行；

⑤ ES6中新增promise特性；

11.bundle打包，十几个包和一个包的区别，我没太懂他说什么，然后他又问了HTTP1/2/3的区别，才明白他是要问HTTP2的多路复用，这十几个包可以并发传输，还问我知不知道现在HTTP2一次可以传输几个并发请求

HTTP1.0、HTTP2.0、HTTP3.0的区别

http1.0 定义了三种请求方法：GET、POST和HEAD方法

http2.0 在不改动HTTP语义、方法、状态码、URI及首部字段的情况下，大幅度提高了web性能。

二进制传输、多路复用、服务器推送、数据压缩、安全性更好。

http3.0 基于UDP多路复用 加密报文

1. 实现了类似TCP的流量控制、传输可靠性功能；

2. 集成了TLS加密功能；

3. 实现了HTTP/2中的多路复用功能；

4. 实现了快速握手功能；

12.浏览器输入URL之后发生了什么

① 用户在浏览器中输入url地址

② 浏览器解析域名会得到服务器ip地址

③ tcp三次握手建立客户端和服务器的连接

④ 客户端发送http请求获取服务器的静态资源

⑤ 服务器发送http响应报文给客户端，客户端获取页面的静态资源

⑥ tcp四次挥手关闭客户端和服务器的连接

⑦ 浏览器解析文档资源并渲染页面

13.进一步到了DOM和CSSOM渲染的问题，和他讨论了半天CSS和JS先加载后加载还是并发加载的事情，不知道他想问啥，结果最后他说其实是想和我说回流重绘X_X

回流 和 重绘

重绘：当渲染树中的元素外观（如：颜色）发送改变，不影响布局时，产生重绘。

回流：当渲染树中的元素布局（如：尺寸、位置、隐藏/状态）发生改变时，产生重绘回流。

回流必将引起重绘，而重绘不一定会引起回流。

引起回流的几个主要原因：

（1）网页初始化

（2）JS操作DOM树（增加、删除元素等）

（3）某些元素尺寸改变

（4）CSS属性的改变

如何避免重绘重排？

（1）样式集中改变：通过class改变样式

（2）缓存布局信息

（3）position属性设置成absolute或fixed

14.讲一下你的项目是怎么做IE浏览器兼容的？

1、在开始菜单或者是桌面上找到IE，然后打开它。

2、打开之后，它会默认打开IE浏览器设置或者是默认打开的网页。

3、然后点击页面右上角的 工具 图标，在出现的菜单选项中点击 兼容性视图设置 选项。

4、然后会弹出一个 兼容性视图设置 的小窗口页面。

5、然后在输入框中输入要兼容的网址，输入好之后，点击后面的 添加 ，添加好之后，点击 关闭 。

一般网站实现pc端与移动端适配的需求，方案有两个：

1、一套页面，从设计时就考虑到跨设备适配，响应式的一步到位；

2、开发两套页面，根据设备尺寸加载加载不同的资源，目前已经不常见了；

15.讲一下CDN？如果我的项目部署在CDN上，那么我的请求还需要带cookie吗？涉及到跨域？（没太懂啊。。。）

CDN：内容分发网络，基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。

CDN作用：使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

CDN原理：工作流程

访问URL=> CNAME执行的CDN专用DNS服务器对URL解析=>负载均衡设备根据解析的ip地址和内容选择一台缓存服务器=>返回缓存服务器ip地址给用户

如何捕获CDN上js运行时导致的详细错误信息？

当CDN设置了 Access-Control-Allow-Origin 响应投运行跨域时，我们可以给script标签添加crossOrigin属性，从而可以使用window.onerror捕获CDN上js运行时导致的详细错误信息，包括堆栈等。

16.CSS外边距重叠的现象和解决方案

BFC 边距重叠解决方案

BFC(Block Formatting Context) 块级格式化上下文

BFC的原理：

1. BFC内部的子元素，在垂直方向，边距会发生重叠。

2. BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。

3. BFC区域不与旁边float box 区域重叠。

4. 计算BFC 的高度时，浮动的子元素也参与计算。

如何生成BFC，有以下几种方法：

方法1：overflow：不为visible，可以让属性是 hidden、auto。

方法2：浮动中：float 的属性值不为none。

方法3：定位中：只要position的值是 static 或者是 relative 即可，可以是 absolute 或 fixed，也就生成了一个BFC。

方法4：display 为 inline-block，table-cell, table-caption, flex, inline-flex

17.ES6当中map和set对象，还提到了weakMap，另外问了一下js的垃圾清理机制

map和set对象 https://www.jianshu.com/p/89ba62ea6fda/

Map： Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。构造函数 Map 可以接受一个数组作为参数。

Map和Object的区别

• 一个 Object 的键只能是字符串或者 Symbols ，但一个 Map 的键可以是任意值。

• Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。

• Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。

• Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

Map对象的属性

• size：返回Map对象中所包含的键值对个数

Map对象的方法

• set(key, val): 向Map中添加新元素

• get(key): 通过键值查找特定的数值并返回

• has(key): 判断Map对象中是否有Key所对应的值，有返回true,否则返回false

• delete(key): 通过键值从Map中移除对应的数据

• clear(): 将这个Map中的所有元素删除

Set： Set 对象允许你存储任何类型的值，无论是原始值或者是对象引用。它类似于数组，但是成员的

值都是唯一的，没有重复的值。

Set中的特殊值

Set 对象存储的值总是唯一的，所以需要判断两个值是否恒等。有几个特殊值需要特殊对待：

• +0 与 -0 在存储判断唯一性的时候是恒等的，所以不能重复

• undefined 与 undefined 是恒等的，所以不能重复

• 虽然NaN 与 NaN 是不恒等的，但是在 Set 中认为NaN与NaN相等，所有只能存在一个，不能重复。

Set实例对象的属性

• size：返回Set实例的成员总数。

Set实例对象的方法

• add(value) ：添加某个值，返回 Set 结构本身(可以链式调用)。

• delete(value) ：删除某个值，删除成功返回 true ，否则返回 false 。

• has(value) ：返回一个布尔值，表示该值是否为Set的成员。

• clear() ：清除所有成员，没有返回值。

相同点：都能通过迭代器进行for...of遍历；

区别：

1.Map是键值对，Set是值的集合，当然键和值可以是任何的值；

2.Map可以通过get方法获取值，而set不能，因为它只有值；

3.Set的值是唯一的可以做数组去重，Map由于没有格式限制，可以做数据存储

---

js垃圾回收机制

目的：间歇不定期的寻找不再使用的变量，并释放掉它们所指向的内存。

1、定义和用法：垃圾回收机制(GC:Garbage Collection)；执行环境：负责管理代码执行过程中使用的

内存。

2、原理：垃圾收集器会定期(周期性)找出那些不在继续使用的变量，然后释放其内存。但是这个过程不

是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。

JS垃圾回收有两种方式：标记清除（mark and sweep）、引用计数(reference counting)。

标记清除（mark and sweep）

垃圾收集器给内存中的所有变量都加上标记，然后去掉环境中的变量以及被环境中的变量引用的变量的标记。在此之后再被加上的标记的变量即为需要回收的变量，因为环境中的变量已经无法访问到这些变量。

引用计数(reference counting) 容易引起内存泄漏

该方式会引起内存泄漏的原因是它不能解决循环引用的问题：

var arr = $.makeArray(arguments);这种情况下每次调用sample()函数，a和b的引用计数都是2，会使这部分内存永远不会被释放，即内存泄漏。

低版本IE中有一部分对象并不是原生JS对象。例如，其BOM和DOM中的对象就是使用C++ COM(Component Object Model)对象的形式实现的，而COM对象的垃圾收集机制采用的就是引用计数策略。

因此即使IE的js引擎是用的标记清除来实现的，但是js访问COM对象如BOM,DOM还是基于引用计数的策略的，也就是说只要在IE中设计到COM对象，也就会存在循环引用的问题。

18.display:none；与 visibility:hidden; 的区别

联系：它们都能让元素不可见

区别：

· display:none; 会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility:hidden;不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见。

· display:none; 是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden; 是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible; 可以让子孙节点显示；

· 修改常规流中元素的display 通常会造成文档重排。修改visibility 属性只会造成元素的重绘。

· 读屏器不会读取 display: none; 元素内容； 会读取 visibility: hidden；元素内容

18.最近接触哪些前沿的技术？我提到说看了点qiankun的文章

19.说一下模块联邦？没了解过啊。。。

https://zhuanlan.zhihu.com/p/485148715

21.反问技术栈，他说公司主要是用react，问学习建议，他说今天答得还挺不错的，但是你既然学过算法，我觉得你去做算法类的工作可能比前端开发会更好哈哈哈哈哈哈哈

总时长：1h左右

CSS盒模型：

1. 基本概念：content、padding、border、margin;

2. 标准盒模型 和 IE盒模型的区别

在标准盒子模型中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

在IE盒子模型中，width和height指的是内容区域+border+padding的宽度和高度。

3. CSS如何设置 标准盒模型 和 IE盒模型

// 设置当前盒子为 标准盒模型
box-sizing: content-box;
// 设置当前盒子为 IE盒模型
box-sizing: border-box;

4. JS 如何设置、获取盒模型对应的宽和高

① 通过DOM节点的style样式获取；

缺点：通过这种方式，只能获取 行内样式，不能获取内嵌的样式 和 外链的样式。

element.style.width/height;

② 通用型，能兼容Chrme、火狐。

window.getComputedStyle(element).width/height;

③ IE都有的。和方式二相同，但这种方式只有IE都有。获取到的即时运行完之后的宽高。

element.currentStyle.width/height

④ 获取一个元素的绝对位置。绝对位置是视窗 viewport 左上角的绝对位置。此api可以拿到四个属性： left、top、width、height。

element.getBoundingClientRect().width/height;

5. BFC边距重叠解决方案

其他问题：

一面：

1. SEO相关（相关代表一系列连环问题）

2. canvas 相关

3. web worker相关

4. vue2响应式原理

5. 垂直居中怎么实现 https://blog.csdn.net/c_x_m/article/details/123274543

① 设定行高line-height

② 设置伪元素::before

③ absolute+transform

④ 设置绝对定位

⑤ 设置display:flex

⑥ absolute+calc

⑦ display: table-cell实现css垂直居中

---

① 设定行高line-height

{ line-height: 200px; text-align: center; }

② 设置伪元素::before

.parent ::before{ display: inline-block; vertical-align:middle; }

③ absolute+transform

.parent { position: relative; }

.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

④ 设置绝对定位

.child { position: absolute; top:0; left:0; margin: auto; }

⑤ 设置display:flex

.parent { display: flex; justify-content: center; align-item: center }

⑥ absolute+calc

父元素position 定位为:relative,子元素position定位为absolute.

⑦ display: table-cell实现css垂直居中

6. flex布局和grid布局的区别

7. 事件循环解释以及一道输出代码题

8. 手写 发布订阅模式

二面：

react和vue优缺点：

jquery、vue、react的区别 框架的区别

jquery它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

1、jquery和vue、react的区别

vue和react：数据和视图分离，以数据驱动视图，只关心数据变化，dom操作被封装（数据驱动）

jquery： 依靠dom操作去组合业务逻辑（事件驱动）

2、React和Vue对比（都是基于js前端框架）

区别：

两者本质区别

1、Vue本质是MVVM框架，由MVC框架发展而来

2、React本质是前端组件化框架，由后端组件化发展而来

模板的区别

1、Vue—使用模板（最初由Angular提出）

2、React—使用JSX

3、模板语法上更倾向于JSX

4、模板分离上更倾向于Vue（React模板与JS混在一起，未分离）

组件化的区别

1、React本身就是组件化，没有组件化就不是React

2、Vue也支持组件化，不过是在MVVM上的扩展

3、对于组件化，更倾向于React，做得彻底而清新

相同点:

1、都支持组件化

2、都是数据驱动视图

什么时候用react，什么时候用vue，什么时候用jquery

1. react灵活性比较大，处理复杂业务时有更多技术方案的选择 。

2. vue提供了更丰富的api，实现功能简单，但也因api多会对灵活性有一定的限制。

3. 做复杂度比较高的项目时使用react，面向用户端复杂度不高的使用vue

4. 希望直接操作DOM时，可选择jQuery

节流和防抖、回流和重绘

20.本地写了个快排，期间问了我一些问题，比如意向城市，是否用过chatGPT等等

快速排序：

在一堆数中找abc

中序遍历

var inorderTraversal = function(root){if(root === null) return [];const res = [];const traversal = (node)=>{if(node === null) return;res.push(node.val);traversal(node.left);traversal(node.right);}traversal(root);return res;
}