2022年前端面试必须学会的知识点-网络与浏览器篇（持续更新中...）

蜗牛ha

已于 2022-02-20 17:27:32 修改

阅读量353

点赞数 1

分类专栏：前端基础前端面试文章标签：前端面试网络

于 2022-01-13 21:25:56 首次发布

本文链接：https://blog.csdn.net/tan9374/article/details/122483102

版权

前端基础同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

前端面试

8 篇文章 1 订阅

订阅专栏

一，部分请求中使用encodeURL转码？

URL只能用数字，英文和某些标点符号，不能用其他，需要

encodeURI:整个URL编码

encodeURIComponent:对URL组成部分进行编码

二，HTTP与HTTPS？

HTTP：是一个TCP的超文本传输协议，是明文

HTTPS：在HTTP 基础上升级，在SSL传输层实现了数字证书加密传输，缺点就是https 握手阶段比较费时，耗能更多，也花钱

三，强缓存和协商缓存？

浏览器缓存优点：减少数据请求，提升性能，加快网页加载速度

缓存类型

就浏览器而言，一般缓存我们分为四类，按浏览器读取优先级顺序依次为：Memory Cache、Service Worker Cache、HTTP Cache、Push Cache。

浏览器缓存 == HTTP Cache 分为强缓存和协商缓存

强缓存：expires,cache-control不需要向服务端发送请求，200，更优先

no-cache：不使用本地缓存。需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务端验证，如果资源更未被改，则可以避免重新下载。
no-store：直接禁止游览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源。
public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器。
private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存。

协商缓存：last-modified最终由服务端来决定是否使用缓存，304，Etag

HTTP缓存？

第一次请求返回的response header里回传缓存策略，第二次请求，先判断强缓存，再判断服务器协商缓存

四，从输入网址到页面显示发生了什么？

1.过程如下：

输入 url 后，浏览器进行DNS 解析，得到对应IP地址

与对应IP地址TCP 连接

发送 HTTP 请求

服务器处理请求并返回 html

浏览器根据这个 html 来构建 DOM 树，加载资源，然后渲染页面

连接结束

2.DNS 解析是什么？

DNS 即域名系统，作用就是将主机名转换成 IP 地址。

具体过程包括：本地 DNS 服务器发送DNS 查询到根DNS服务器，顶级DNS服务器，权威DNS服务器，最终返回对应IP地址

五，跨域？

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

1.websocket如何实现跨域通信?

Websocket 是 HTML5 的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket 和 HTTP 都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的服务器与客户端都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。
可以使用socket.io这个库，这个库做了兼容处理

2.jsonp

link,script,img等标签都可以实现跨域

3.CORS跨域资源共享

响应头设置Access-Control-Allow-Origin

4.服务端实现代理转发，Nginx反向代理

5.像用vue-cli脚手架搭建项目，可以通过webpack起一个本地服务器作为请求的代理对象，本地用proxy实现跨域

devServer: {
        port: 8080,
        proxy: {
            "/api": {
              target: "http://192.168.25.20:8088" // 后端接口
            }
        }

跨网页传值方法？

document.domain

因为浏览器是通过document.domain属性来检查两个页面是否同源，因此只要通过设置相同的document.domain，两个页面就可以共享Cookie（此方案仅限主域相同，子域不同的跨域应用场景。）

postMessage

A页面通过window.open获取B页面的句柄。通过otherWindow.postMessage传递数据，在B页面通过onmessage获取A页面传递的参数，也可以通过e.source.postMessage传递信息给A页面。

BroadCast channel

它的出现，是为了解决postMessage只能点对点通信的问题，广播形式能够在同域的页面下进行一对多的通信。

六，前端安全措施，常见的安全问题，XSS？CSRF

xss 跨站脚本攻击

简单来说，就是攻击者想办法将可执行的代码注入页面。

如何防御？

转义字符
function escape(str) {
   str = str.replace(/&/g, '&');
   str = str.replace(/</g, '<');
   str = str.replace(/>/g, '>');
   str = str.replace(/"/g, '&quto;');
   str = str.replace(/'/g, "'");
   str = str.replace(/`/g, '`');
   str = str.replace(/\//g, '/');
   str = str.replace(/<\/script>/,'')
   return str;
}
CSP (Content Security Policy,即内容安全策略)

CSP本质上就是建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截是由浏览器自己实现的。我们可以通过这种方式来尽量减少XSS 攻击。

通常可以通过两种方式来开启 CSP：

设置 HTTP Header 中的 Content-Security-Policy
设置 meta 标签的方式 < meta http-equiv=“Content-Security-Policy”>

CSRF 跨站请求伪造

攻击者构造出一个后端请求地址，诱导用户点击或者通过某些途径自动发起请求。如果用户是在登录状态下的话，后端就以为是用户在操作，从而进行相应的逻辑。

如何防御？
防范 CSRF 攻击可以遵循以下几种规则：
Get 请求不对数据进行修改
不让第三方网站访问到用户 Cookie
阻止第三方网站请求接口
请求时附带验证信息，比如验证码或者 Token

七，计算机基础

进程与线程的区别

进程是系统进行资源分配和调度的一个独立单位
线程是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位
一个进程至少有一个线程组成

线程自己基本上不拥有系统资源,只拥有一点在运行中必不可少的资源(如程序计数器,一组寄存器和栈)，但是它可与同属一个进程的其他的线程共享进程所拥有的全部资源

进程间通信方式

管道通信
消息队列通信
信号量通信
共享内存通信
套接字通信

二叉树

二叉树每一个节点不能多于两个孩子
没有孩子的节点就是叶子节点
一个节点有左右两个指针，若无则指向null
深度为h的二叉树最多有2^h-1个结点(h>=1)，最少有h个结点
二叉树的遍历三种方式，如下：（1）前序遍历（DLR），首先访问根结点，然后遍历左子树，最后遍历右子树。简记根-左-右。（2）中序遍历（LDR），首先遍历左子树，然后访问根结点，最后遍历右子树。简记左-根-右。（3）后序遍历（LRD），首先遍历左子树，然后遍历右子树，最后访问根结点。简记左-右-根

八，Cookie、sessionStorage、localStorage 的区别

共同点：都是保存在浏览器端，并且是同源的

Cookie：cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器

和服务器间来回传递。而 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅

在本地保存。cookie只有大约 4K 左右

sessionStorage：仅在当前浏览器窗口关闭前有效

localStorage：localStorage 在所有同源窗口中都是共享的；cookie 也是在所有同源窗口中

都是共享的。