2021 腾讯CSIG 在线教育部 一面面试题目

HTML

1、HTTP有几种请求方式？put的作用，put跟post的区别，options的作用

GET ⽅法
发送⼀个请求来取得服务器上的某⼀资源
POST ⽅法
向 URL 指定的资源提交数据或附加新的数据
PUT ⽅法
跟 POST ⽅法很像，也是向服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，⽽ POST 没有
HEAD ⽅法
只请求⻚⾯的⾸部
DELETE ⽅法
删除服务器上的某资源
OPTIONS ⽅法
它⽤于获取当前 URL 所⽀持的⽅法。如果请求成功，会有⼀个 Allow 的包含类似 “GET,POST” 这样的信息
TRACE ⽅法
TRACE ⽅法被⽤于激发⼀个远程的，应⽤层的请求消息回路
CONNECT ⽅法
把请求连接转换到透明的 TCP/IP 通道

2、从浏览器地址栏输⼊url到显示⻚⾯的步骤 、DNS是怎么解析IP地址的？

基础版本：
浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ，向服务器发请求；
服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等）；
浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建⽴相应的内部数据结构（如 HTML 的 DOM ）；
载⼊解析到的资源⽂件，渲染⻚⾯，完成。

DNS （Domin name system 域名系统）通过主机名，最终得到该主机对应的IP地址的过程叫域名解析

3、HTTP状态码，问到2, 3，301，302, 4，403, 404

1XX ：信息状态码
100 Continue 继续，⼀般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息

2XX ：成功状态码
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理

3XX ：重定向
301 Moved Permanently 请求的⽹⻚已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使⽤ GET 请求新的 URI 。
304 Not Modified ⾃从上次请求后，请求的⽹⻚未修改过。

4XX ：客户端错误
400 Bad Request 服务器⽆法理解请求的格式，客户端不应当尝试再次使⽤相同的内
容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁⽌访问。
404 Not Found 找不到如何与 URI 相匹配的资源。

5XX: 服务器错误
500 Internal Server Error 最常⻅的服务器端错误。
503 Service Unavailable 服务器端暂时⽆法处理请求（可能是过载或维护）。

4、HTTP请求头信息

请求头信息
Accept:浏览器能够处理的内容类型
Accept-Charset:浏览器能够显示的字符集
Accept-Encoding：浏览器能够处理的压缩编码
Accept-Language：浏览器当前设置的语言
Connection：浏览器与服务器之间连接的类型
Cookie：当前页面设置的任何
Cookie Host：发出请求的页面所在的域
Referer：发出请求的页面的URL
User-Agent：浏览器的用户代理字符串

响应头信息
Date：表示消息发送的时间，时间的描述格式由rfc822定义
server:服务器名字。
Connection：浏览器与服务器之间连接的类型
content-type:表示后面的文档属于什么MIME类型
Cache-Control：控制HTTP缓存

(https://blog.csdn.net/It_BeeCoder/article/details/79941211)
(https://blog.csdn.net/weixin_30735745/article/details/95918403)

5、token 跟session 的区别与联系

    1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
    2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗。考虑到安全应当使用session。
    3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能。考虑到减轻服务器性能方面，应当使用COOKIE。
    4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。 
    5、所以个人建议：
     将登陆信息等重要信息存放为SESSION
     其他信息如果需要保留，可以放在COOKIE中

session、cookie和token值的区别：
（1）由于http是无状态的，服务端记录用户的状态时，需要用session识别用户，session是服务端保存的一个数据结构，跟踪用户状态；
服务器就要给每个客户端分配不同的“身份标识”，然后客户端每次向服务器发请求的时候，都带上这个“身份标识”，
服务器就知道这个请求来自于谁了。至于客户端怎么保存这个“身份标识”，可以有很多种方式，对于浏览器客户端，大家都默认采用 cookie 的方式。

（2）cookie是客户端保存用户信息一种机制，用来记录用户的一些信息，为了防止被篡改，加了一些限制，数量有限；
（3）服务器返回给客户端的一个token值，客户端存储token值，并在每次请求时附送上token值，服务端验证token值并返回数据，安全机制；

6、CSRF 和 XSS
XSS
全称Cross Site Scripting，名为跨站脚本攻击，黑客将恶意脚本代码植入到页面中从而实现盗取用户信息等操作。

常见的攻击情景：

   1、用户A访问安全网站B，然后用户C发现B网站存在XSS漏洞，此时用户C向A发送了一封邮件，里面有包含恶意脚本的URL地址（此URL地址还是网站B的地址，只是路径上有恶意脚本），当用户点击访问时，因为网站B中cookie含有用户的敏感信息，此时用户C就可以利用脚本在受信任的情况下获取用户A的cookie信息，以及进行一些恶意操作。

  这种攻击叫做反射性XSS

  2、假设网站B是一个博客网站，恶意用户C在存在XSS漏洞的网站B发布了一篇文章，文章中存在一些恶意脚本，例如img标签、script标签等，这篇博客必然会存入数据库中，当其他用户访问该文章时恶意脚本就会执行，然后进行恶意操作。

  这种攻击方式叫做持久性XSS，将携带脚本的数据存入数据库，之后又由后台返回。

预防措施：

 1、对输入、输出结果进行过滤和必要的转义

 2、尽量使用post，使用get方式时对路径长度进行限制

 3、使用httponly禁止黑客通过脚本获取用户cookie数据，但这样无法完全阻止xss攻击，因为发送http请求并不需要主动获取cookie

CSRF
全称cross-site request forgery，名为跨站请求伪造，顾名思义就是黑客伪装成用户身份来执行一些非用户自愿的恶意以及非法操作

常见攻击情景：

    用户A经常访问博客网站B，用户C发现网站B存在CSRF漏洞，想尽了各种办法勾引用户A访问了C写好的危险网站D，而此时用户A的cookie信息还没有失效，危险网站D中有向网站B求请求的非法操作，这样用户在不知情的情况下就被操控了。

   这个时候就会有一个疑问，浏览器本身有同源策略啊，为什么在网站D还可以请求网站B的api，要记住浏览器对img、iframe和script的src是没有同源限制的！所以黑客完全可以利用动态添加这些标签的方法来实现跨站请求。

预防措施：

   1、验证码

   2、tokenId令牌

   3、判断请求的Referer是否正确

CSRF和XSS的区别：
1、CSRF需要登陆后操作，XSS不需要

2、CSRF是请求页面api来实现非法操作，XSS是向当前页面植入js脚本来修改页面内容。

原文链接：https://blog.csdn.net/weixin_39327883/article/details/89512217

7、优化DOM树， 10000个DOM节点，如何快速遍历DOM树

CSS

1、CSS样式优先级
CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。
CSS 优先规则2："直接样式"比"祖先样式"优先级高。
CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
CSS 优先规则5：属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级。

(https://www.runoob.com/w3cnote/css-style-priority.html)

2、解释CSS盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

(https://www.runoob.com/css/css-boxmodel.html)

3、什么是BFC
BFC(Block formatting Context) 块级格式化上下文，布局规则如下：
1.内部的盒子会在垂直方向，一个一个地放置；
2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
4.BFC的区域不会与float重叠；
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此；
6.计算BFC的高度时，浮动元素也参与计算。

    怎样会触发BFC？
    1.根元素；
    2.float的属性部位none；
    3.position为absolute或fixed；
    4.display为inline-block，table-cell，table-caption，flex；
    5.overflow不为visible

BFC的作用
1、利用BFC避免margin重叠
2、自适应两栏布局
3、清除浮动
（https://blog.csdn.net/sinat_36422236/article/details/88763187?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase）

4、CSS有哪些布局？（流式布局、Flex布局）
圣杯布局、双飞翼布局、流式布局
移动端：流式布局、flex布局、rem布局、响应式布局

JS

1、如何判断一个对象是不是数组类型
obj instanceof Array 测试一个对象在原型链的构造函数下是否存在一个prototype属性
Array.isArray
Array.prototype.isPrototypeOf(obj) 判断Array在不在obj的原型链中
(https://blog.csdn.net/qzt1204/article/details/80468024)

2、跨域？解决跨域的方法？用 token 解决跨域
浏览器的同源策略 同源策略 /SOP（Same origin policy） 是⼀种约定，由Netscape公司1995年引⼊浏览器，它是浏览器最核⼼也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS 、 CSFR 等攻击。所谓同源是指"协议+域名+端⼝"三者相同，即便两个不同的域名指向同⼀个IP地址，也非同源

解决跨域问题的方法：
1、通过jsonp跨域

var script = document.createElement('script');
	script.type = 'text/javascript';
	// 传参并指定回调执⾏函数为onBack
	script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
	document.head.appendChild(script);
	// 回调执⾏函数
	function onBack(res) {
		alert(JSON.stringify(res));
	}

2、document.domain + iframe跨域
1.）⽗窗⼝：(http://www.domain.com/a.html)
2.）⼦窗⼝：(http://child.domain.com/b.html)

nginx代理跨域
nodejs中间件代理跨域
后端在头部信息⾥⾯设置安全域名

3、apply、call、bind的区别
1、call和apply
call 和 apply 的功能相同，都是改变 this 的指向，并立即执行函数。区别在于传参方式不同。
func.call(thisArg, arg1, arg2, …)：第一个参数是 this 指向的对象，其它参数依次传入。
func.apply(thisArg, [argsArray])：第一个参数是 this 指向的对象，第二个参数是数组或类数组。

2、bind的实现原理
bind 和 call/apply 有一个很重要的区别，一个函数被 call/apply 的时候，会直接调用，但是 bind 会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。

4、快速排序

var quickSort = function(arr) {
　　if (arr.length <= 1) {//如果数组长度小于等于1无需判断直接返回即可 
        return arr;
    }
　　var pivotIndex = Math.floor(arr.length / 2);//取基准点 
　　var pivot = arr.splice(pivotIndex, 1)[0];//取基准点的值,splice(index,1)函数可以返回数组中被删除的那个数
　　var left = [];//存放比基准点小的数组
　　var right = [];//存放比基准点大的数组 
　　for (var i = 0; i < arr.length; i++){ //遍历数组，进行判断分配 
　　　　if (arr[i] < pivot) {
　　　　　　left.push(arr[i]);//比基准点小的放在左边数组 
　　　　} else {
　　　　　　right.push(arr[i]);//比基准点大的放在右边数组 
　　　　}
　　}
         //递归执行以上操作,对左右两个数组进行操作，直到数组长度为<=1； 
　　return quickSort(left).concat([pivot], quickSort(right));
};

function quick(arr){
    if(arr.length<=1){
        return arr;
    }
    var left = [],
        right = [],
        k = arr.splice(0, 1)[0];
        for(var i = 0;i<arr.length;i++){
            if(arr[i]>k){
                right.push(arr[i]);
            }else{
                left.push(arr[i]);
            }
        }
        return quick(left).concat([k],quick(right));
}

5、解释promise，同时调用resolve（）跟reject（），.then 和 .catch如何执行？
promise是一个对象，他可以获取异步操作的消息。
Promise对象有两个特点：
一、对象的状态不受外界影响。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
二、一旦状态发生改变就不会再变，任何时候都可以得到这个结果。

调用resolve（）跟reject（），先调用resolve（），此时状态已经改变为resolve，就不会再改变。因此只执行then方法。catch方法只有在then方法执行时报错才会执行。

6、除了VUE，是否了解其他框架？

7、箭头函数跟普通函数的区别？
一.外形不同：
箭头函数使用箭头定义，普通函数中没有。

二.箭头函数全都是匿名函数：
普通函数可以有匿名函数，也可以有具名函数。

三.箭头函数不能用于构造函数：
普通函数可以用于构造函数，以此创建对象实例。也就是说，不能使用 new 命令，否则会抛出一个错误。

四.箭头函数中this的指向不同：
this一直是让初学者比较头疼的概念。
在普通函数中，this总是指向调用它的对象或者，如果用作构造函数，它指向创建的对象实例。
在箭头函数中，并没有自己的this，所以箭头函数中的this是固定的，它指向定义该函数时所在的对象

五.箭头函数不具有arguments对象：
每一个普通函数调用后都具有一个arguments对象，用来存储实际传递的参数。
但是箭头函数并没有此对象。如果要用，可以用rest参数替代。

六.其他区别：
（1）.箭头函数不能Generator函数。
（2）.箭头函数不具有prototype原型对象。
（3）.箭头函数不具有super。
（4）.箭头函数不具有new.target。

(https://www.softwhy.com/article-9330-1.html)

8、（逻辑题）分析 7:15 ，计算时针跟分针之间的角度