鸭题-05-综合

前端工程化工具

gulp（流程化 ）& webpack （模块化）

gulp -src=>pipe(scss翻译).pipe(css 合并).pipe(css压缩)=>dist
gulp -src=>pipe(模块化编译).pipe(js压缩)=>dist
	流程化
webpack
    模块化 默认支持的commonjs规范

所有js模块打包生成一个js文件
编译解析浏览器不能识别的语言 （scss ,.vue, jsx, ts, ES6） 

配置？
 入口
 出口
 devserver 启动 自动刷新，热更新， 反向代理
 sourcemap-调试代码 .map （地图）

 loaders: sass-loader css-loader file-loader  babel-loader vue-loader postcss-loader

 plugin:  压缩, 提取公共库

// 问是否配置过webpack
// 在之前的一个项目中配置过(见过) ，当时的业务并不复杂，所以做了一些配置，从入口到出口，再深的就没有做过了

团队协作工具 版本控制工具， 代码管理工具

svn&git

svn 集中式代码管理
git 分布式代码管理
   
(1)git pull (同步，更新代码) => git fetch git merge
(2)git add . 暂存区
(3)git commit 提交到本地仓库。
(4)git push origin master:kerwin

代码冲突怎么解决？
两个人修改同一个文件造成 

a.js 111111 => github(gitlab, gitee)
a.js 222222 =>失败，提示git pull ,自动合并失败。

手动合并(借助可视化工具 ，小乌龟)
>>>>>>>>>>>>>head>>>>>>>>>>>>>

>>>>>>>>>>>43fdea4wadwad>>>>>>>>
git add. git commit git push 远程仓库就是合并完的代码

git reset  
git revert 生成一个新的log记录

​

jquery

jquery:
	$.fn === $.prototype = jQuery.prototype
	$.fn.kerwin = function(){this.attr("name","kerwin"); return this}

	$(".box").kerwin().css().kerwin()

	$.extend({
		kerwin:function(){

		}
	})

	$.kerwin();
	
	prop vs attr?

	$(".box").prop("disbaled"，true)
	$(".box").attr("myname",2222)

事件循环

（1）所有同步任务在主线程上执行，形成一个执行栈 

（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务(setInterval,setTimeout，i/o...)有了结果，就在"任务队列"之中放置一个事件。

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，拿到队列的第一个任务，进入执行栈，开始执行。

（4）主线程不断重复上面的(3)。

主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WX0ML431-1623681079435)(05-综合.assets/15586502-25e3b2d71281a70b.webp)]

微任务和宏任务

Promise的出现让问题变复杂了, 它跟setTimeout 优先级？ 上面的事件循环解释不够用了。

console.log('script start') // 宏任务

setTimeout(function() { // 调用 setTimeout  ,方法 都是宏任务
    console.log('timer over')
}, 0)

Promise.resolve().then(function() { //  方法 红任务
    console.log('promise1') // 微任务
}).then(function() {
    console.log('promise2') // 微任务
})

console.log('script end') // 宏任务 

// 执行顺序：
代码从上到下执行，先执行宏任务(console.log 、setTimeout 、Promise.resolve()、console.log )，
遇到微任务执行所有的微任务，然后重新开始执行宏任务。每次开始宏任务之前都会先清空微任务，把微任务先解决了
// script start
// script end
// promise1
// promise2
// timer over

所有任务分为宏任务（macrotask ）和微任务（microtask ） 两种。
MacroTask（宏任务）：* script全部代码、setTimeout、setInterval、I/O、UI Rendering。
MicroTask（微任务）：* Process.nextTick（Node独有）、Promise...

// 微任务的优先级要高于宏任务

在挂起任务时，JS 引擎会将所有任务按照类别分到这两个队列中，首先在 宏任务 的队列中取出第一个任务，执行完毕后取出 微任务 队列中的所有任务顺序执行；之后新的事件循环开始，取宏任务的第一个，周而复始，直至两个队列的任务都取完。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-23Tu4wmb-1623681079437)(05-综合.assets/15586502-4f2d3f71a94a4a00.webp)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NN1ZgwoW-1623681079438)(05-综合.assets/15586502-30ee422b0922669e.webp)]

http相关

http状态码有那些？分别代表是什么意思？

    [
        100  Continue   继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
        200  OK         正常返回信息
        201  Created    请求成功并且服务器创建了新的资源
        202  Accepted   服务器已接受请求，但尚未处理
        
        301  Moved Permanently  请求的网页已永久移动到新位置。
        302 Found       临时性重定向。
        307 Internal Redirect  内部重定向
        
        304  Not Modified 自从上次请求后，请求的网页未修改过。 协商缓存 
		200  memory cache  强缓存

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

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

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

• 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
• 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）【dom 、cssom、渲染树、调用Gpu绘制 】；
• 浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
• 载入解析到的资源文件，渲染页面，完成。

说说TCP传输的三次握手四次挥手策略

• 为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送 后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志：SYN和ACK
• 发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。 最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。 若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包

Ip 相当于高速公路 ；TCP 相当于跑在高速公路上车；http 相当于车上的货物

TCP （双向通信）和 http（单向通信） 的区别就是双向和单向的区别

TCP 三次握手，完完整整，不能丢任何一个包。

UDP 可以丢包

断开一个TCP连接则需要“四次挥手”：

• 第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据

• 第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）

• 第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了

• 第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手

TCP和UDP的区别

• TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来

• UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去！ UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境

HTTP和HTTPS

• HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS
• 默认HTTP的端口号为80，HTTPS的端口号为443

为什么HTTPS安全

• 因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

• 01.浏览器查找域名对应的IP地址(DNS 查询：浏览器缓存->系统缓存->路由器缓存->ISP DNS 缓存->根域名服务器)
• 02.浏览器向 Web 服务器发送一个 HTTP 请求（TCP三次握手）
• 03.服务器 301 重定向（从 http://example.com 重定向到 http://www.example.com）
• 04.浏览器跟踪重定向地址，请求另一个带 www 的网址
• 05.服务器处理请求（通过路由读取资源）
• 06.服务器返回一个 HTTP 响应（报头中把 Content-type 设置为 ‘text/html’）
• 07.浏览器进 DOM 树构建
• 08.浏览器发送请求获取嵌在 HTML 中的资源（如图片、音频、视频、CSS、JS等）
• 09.浏览器显示完成页面
• 10.浏览器发送异步请求

前端攻击

1. CSRF的基本概念、缩写、全称（伪造的自己）

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

PS：中文名一定要记住。英文全称，如果记不住也拉倒。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DGVk398M-1623681079440)(http://img.smyhvae.com/20180307_1735.png)]

用户是网站A的注册用户，且登录进去，于是网站A就给用户下发cookie。

从上图可以看出，要完成一次CSRF攻击，受害者必须满足两个必要的条件：

1. 登录受信任网站A，并在本地生成Cookie。（如果用户没有登录网站A，那么网站B在诱导的时候，请求网站A的api接口时，会提示你登录）
2. 在不登出A的情况下，访问危险网站B（其实是利用了网站A的漏洞）。

我们在讲CSRF时，一定要把上面的两点说清楚。

温馨提示一下，cookie保证了用户可以处于登录状态，但网站B其实拿不到 cookie。

举个例子，前段时间里，微博网站有个api接口有漏洞，导致很多用户的粉丝暴增。

CSRF的防范措施

方法一、Token 验证：（用的最多）

1. 服务器发送给客户端一个token；
2. 客户端提交的表单中带着这个token。
3. 如果这个 token 不合法，那么服务器拒绝这个请求。

方法二：隐藏令牌：

• 把 token 隐藏在 http 的 head头中。

方法二和方法一有点像，本质上没有太大区别，只是使用方式上有区别。

方法三、Referer 验证：

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

2. XSS的攻击原理（潜入对方系统中）

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

最后导致的结果可能是：

• 盗用Cookie
• 破坏页面的正常结构，插入广告等恶意内容
• D-doss攻击

XSS的防范措施主要有三个：

1. 编码：

对用户输入的数据进行HTML Entity编码。

如上图所示，把字符转换成 转义字符。

Encode的作用是将$var等一些字符进行转化，使得浏览器在最终输出结果上是一样的。

比如说这段代码：

<script>alert(1)</script>

若不进行任何处理，则浏览器会执行alert的js操作，实现XSS注入。

进行编码处理之后，L在浏览器中的显示结果就是<script>alert(1)</script>，实现了将``$var作为纯文本进行输出，且不引起JavaScript`的执行。

2、过滤：

• 移除用户输入的和事件相关的属性。如onerror可以自动触发攻击，还有onclick等。（总而言是，过滤掉一些不安全的内容）
• 移除用户输入的Style节点、Script节点、Iframe节点。（尤其是Script节点，它可是支持跨域的呀，一定要移除）。

3、校正

• 避免直接对HTML Entity进行解码。
• 使用DOM Parse转换，校正不配对的DOM标签。

备注：我们应该去了解一下DOM Parse这个概念，它的作用是把文本解析成DOM结构。

比较常用的做法是，通过第一步的编码转成文本，然后第三步转成DOM对象，然后经过第二步的过滤。

3 CSRF 和 XSS 的区别💥

面试官还可能喜欢问二者的区别。

区别一：

• CSRF：需要用户先登录网站A，获取 cookie
• XSS：不需要登录。

区别二：（原理的区别）

• CSRF：是利用网站A本身的漏洞，去请求网站A的api。
• XSS：是向网站 A 注入 JS代码，然后执行 JS 里的代码，篡改网站A的内容。