面试记录专刊：第一天

前端扫地增
407 阅读6分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

今天复习计划，主要是是以自己简历上的知识点作为扩散。有些内容会有偏向基础。

一.前端知识

1.HTML语义化

1.1）什么是HTML语义化，HTML语义化有什么优点？

html语义化可以清楚表达元素的含义，即元素本身传达了关于元素内容的一些信息。

非语义化标签： div、span、p等

语义化标签：table、form、iamge、video等

HTML的语义化优点：

  • SEO：爬虫依赖标签抓取关键内容，提高SEO。
  • 提高代码可维护。
  • 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

推荐文章： juejin.cn/post/684490…

2.关于Node.JS

笔者对于nodeJS的了解并不深，仅仅局限于使用nodeJS写过自己项目的后台服务、node服务作为前端静态资源中间层服务以解决代理问题、使用node写过全局插件（生成代码模板、自动部署插件）。

附上自己关于node插件的文章：

juejin.cn/post/684490…

juejin.cn/post/689895…

3.HTTP，HTTPS，TCP/IP以及前端安全

3.1）HTPP与HTTPS的区别

HTTPS是基于HTTP的基础上，使用SSL/TLS协议进行加密。IOS中，客户端会存放着CA证书，当发起HTTPS请求时，客户端会向服务端索取公钥，并使用CA证书对公钥进行验证，验证正确后使用公钥对发送信息就行加密处理。服务端则使用对应的私钥进行解密。

3.2）常见状态码
  • 2xx：成功
    1. 200： 客户端请求被服务端正确处理
  • 3xx：重定向
  • 4xx：客户端错误
    1. 401：unauthorized，无权限。
    2. 403 forbidden，表示对请求资源的访问被服务器拒绝
    3. 404：not found，表示在服务器上没有找到请求的资源
  • 5xx：服务端错误
    1. 500： internal sever error，表示服务器端在执行请求时发生了错误
    2. 503： service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求
3.3）跨域

问：跨域的原因是什么？怎么解决跨域问题？

答：跨域问题是因为同源策略，同源策略可以很好的保护浏览器避免收到XSS、CSRF等攻击。同源是指：协议+域名+端口。

image.png

受同源限制的内容：

  • cookie、localstoragee、IndexedDB等存储内容
  • AJAX请求
  • DOM节点

不受同源限制的标签：

  • <image src='xxxx'></iamge>
  • <script src='xxxx'></script>
  • <link href='xxxx'></link>

解决跨域问题方法：

常见的方法：

  1. JSONP：利用<script>标签不受同源限制进行跨域请求。较老的做法，不推荐。
  2. Cors：服务端设置：access-control-allow-origin 即开启cors。
  3. NodeJS中间件代理：同源策略是浏览器的限制策略，如果是服务器与服务器之间是不会存在跨域限制。在前端项目起一个node层代理服务，通过node层服务转发请求至服务器，绕开同源限制。
  4. Nginx反向代理： 与Node中间件代理类型。Nginx通过配置一个代理服务做跳板机，反向代理访问请求接口。是较为主流的做法。
3.4）Cors的简单请求与复杂请求

1. 简单请求：

同时满足一下条件，即为简单请求

  1. 请求方法为：GET、POST、Head。
  2. content-type的值为： text/plain、multipart/form-data、application/x-www-form-urlencoded
    cors发送简单请求时会在头信息中加入： Orign： http：xxxx用来说明本次请求的服务源，服务器根据配置来决定是否允许本次跨域请求。Cors请求的简单请求信息头：
Origin: htttp://xxxx
Accept: */*

如果Origin并不在服务器配置的允许范围内，则服务器会返回正常的http请求。浏览器在检测到返回的请求头中没有包含Access-Control—Allow-Origin，则判断跨域请求失败并进行错误抛出。

2.复杂请求：
不满足简单请求条件的请求为复杂请求，当进行复杂请求的Cors请求时，浏览器器会先进行预请求。预请求的请求方法是：otpions。
预请求的请求头如下：

Origin：http：//XXXXX
Access-Control-Allow-Method: Put // 请求方式。询问服务端是否允许该类型请求
Access-Control-Request-Headers: X-Custom-Header // 客户端自定义请求头
Content-Type: application/json

服务端在验证Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后， 如果浏览器否定了"预检"请求，会返回一个正常的HTTP回应,但是没有任何CORS的头相关信息，这时浏览器就认定服务器不允许此次访问,从而抛出错误。
如果服务器器允许了本次跨域请求，就会与简单请求一样，在请求的请求头信息中加入Origin：http：//XXXX发送至服务器。

3.5）TCP/IP

问：TCP与UDP的区别
答：

  • 是否连接：TCP面向连接，UDP无连接；

  • 是否可靠：TCP是可靠的，使用流量控制和拥塞控制；UDP是不可靠的，不使用流量控制和拥塞控制；

  • 连接对象个数：TCP只能是一对一通信；UDP支持一对一，一对多，多对一和多对多交互通信；

  • 传输方式：TCP面向字节流；UDP面向报文；

  • 首部开销：TCP首部最小20字节，最大60字节；UDP首部开销小，仅8字节；

  • 适用场景：TCP适用于要求可靠传输的，比如文件传输；UDP适用于实时应用，比如IP电话，视频会议，直播等。

TCP3次握手、四次挥手:
juejin.cn/post/684490…

3.6）前端安全

XSS（Cross-site-script）跨站脚本

XSS的攻击类型有：存储型、反射型和 DOM 型三种。

存储类型存储区存储区
存储型后端数据库HTML
反射型URLHTML
DOM型后端数据库/前端存储/URLJavaScript

DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。
防范措施：

  1. 对输入内容的：/、<、"" 进行转义
  2. 对于富文本，则可以使用js-xss进行配置白名单。

juejin.cn/post/684490…

CSRF（Cross-site request forgery）跨站请求伪造

CSRF是利用用户登录状态发起伪造请求。用户登录过A网站并保持了登录状态，攻击者通过伪装链接
常见攻击类型：

防范 CSRF 可以遵循以下几种规则：

  1. Get 请求不对数据进行修改
  2. 不让第三方网站访问到用户 Cookie
  3. 阻止第三方网站请求接口
  4. 请求时附带验证信息，比如验证码或者 token

juejin.cn/post/684490…

二.算法

两数之和

本题较为简单，关键在于使用Map来进行判断，完成时间复杂度小于 O(n2)。

爬楼梯

斐波那契数列 dp[n] = dp[n-1] + dp[n-2]

三.面经

暂无

四.其他

健身打卡：

62aab0177d5db6bfc55086ed3fe3601.jpg

英语打卡：

bddb2e9ae2f4bb7c4f20992ece5b3ee.jpg 附上肖申克的救赎Red最后的假释：

there`s not a day gose by i dont feel regret 
not because i am here or beacause you think i should 
i am look back on the way i was then  
a young 
stupid kid who committed the terrible crime
i want to talk to him 
i want to try to talk some sense to him 
tell him the way thinghs are 
but i cant
that kid`s long gone 
and this old man is all that`s left 
i got to live with that
avatar
文章
阅读
粉丝