前端面试2022

常用函数：https://blog.csdn.net/mus123/article/details/106499506

这一次我应聘的岗位是前端开发工程师。成为一名优秀的程序员是我的追求，为此在研究生阶段我很早就结合岗位要求进行了准备。今年6月到8月份，我在武汉金山办公软件有限公司实习，在这期间参与了小组内的代码开发，并且重新系统的学习了前端的相关知识，包括：前端基础知识，React框架，以及相关的网络协议，能够熟练使用git进行团队合作开发。同时作为一名研究生，在读研期间我成功发表了2篇EI论文，2篇软著。

1）html，http，web基础篇

1. 进程和线程的区别？

   做个简单的比喻：进程=火车，线程=车厢
   线程在进程下行进（单纯的车厢无法运行）
   一个进程可以包含多个线程（一辆火车可以有多个车厢）
   不同进程间数据很难共享（一辆火车上的乘客很难换到另外一辆火车，比如站点换乘）
   同一进程下不同线程间数据很易共享（A车厢换到B车厢很容易）
   进程要比线程消耗更多的计算机资源（采用多列火车相比多个车厢更耗资源）进程间不会相互影响，一个线程挂掉将导致整个进程挂掉（一列火车不会影响到另外一列火车，但是如果一列火车上中间的一节车厢着火了，将影响到所有车厢）进程可以拓展到多机，进程最多适合多核（不同火车可以开在多个轨道上，同一火车的车厢不能在行进的不同的轨道上）进程使用的内存地址可以上锁，即一个线程使用某些共享内存时，其他线程必须等它结束，才能使用这一块内存。（比如火车上的洗手间）－"互斥锁"进程使用的内存地址可以限定使用量（比如火车上的餐厅，最多只允许多少人进入，如果满了需要在门口等，等有人出来了才能进去）－“信号量”
   
   

2. 如何理解html语义化？用过哪些html标签？

   html语义化是说用正确的标签做正确的事。
   html标签可以分为：块级标签，行内标签，内联块状标签
   行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。
   
   块级标签：标签独占一行，宽度与高度撑满父元素。
   <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
   
   行内标签：标签在一行内，宽度与高度由内容决定，只有在内容超过HTML的宽度时，才会换行。
   <a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
   
   内联块状标签：内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，
   代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签
   

3. h5新特性

   1. HTML语义化,有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重.
   2. 本地存储，h5提供了sessionStorage、localStorage和cookie，使用之前应该先判断支持情况。注意：localStorage存储的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。
   3. 离线web应用
   4.表单新增功能。以往input中的name和value要随着form表单一起提交，form表单必须包裹input , 而现在可以通过input的form属性綁定.
   5.地理定位，h5提供了Geolocation API访问地理位置，即通过window.navigator.geolocation来实现访问。这个对象有三个方法:
   getCurrentPosition()、watchPosition()、clearWatch()
   页面第一次使用这个api需要获得用户许可, watchPosition可以对位置变化事件进行监听。
   

4. canvas相关

   绘制一个绿色的长方形？
   <canvas id="canvas"></canvas>
   <script>
       // 获取HTML <canvas> 元素的引用。
       const canvas = document.getElementById('canvas');
       // 获取这个元素的context——图像稍后将在此被渲染。
       const ctx = canvas.getContext('2d'); 
       
   	// fillStyle 属性让长方形变成绿色。
       ctx.fillStyle = 'green';
       // fillRect() 方法将它的左上角放在(10, 10)，把它的大小设置成宽150高100。
       ctx.fillRect(10, 10, 150, 100);
   </script>
   
   

5. cookie,session,localStorage区别，cookie的长度限制

   ，localStorage（本地存储）和sessionStorage（会话存储）不会自动把数据发给服务器
   localStorage长期存储数据，浏览器关闭数据后不丢失，仅在本地保存，大小为一般为5MB；
   sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB，如果两个页面存在关系，则可以共享sessionStorage；
   cookie是网站为了标识用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密）。cookie始终在同源的http请求中携带（即使不需要）都会在浏览器和服务器端间来回传递，cookie数据大小不会超过4K。
   
   有期时间：localStorage存储持久数据，浏览器关闭后数据不丢失，除非自动删除数据。sessionStorage数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭；
   
   二、cookie和session的区别
   1、cookie数据存放在客户的浏览器上，session数据放在服务器上 
   2、session保存在服务器，客户端不知道其中的信息；cookie保存在客户端，服务器能够知道其中的信息 
   3、session中保存的是对象，cookie中保存的是字符串 
   4、cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑*到安全应当使用session 
   5、session会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie 
   6、单个cookie保存的数*据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie 
   7、建议将登录信息等重要信息存放为session，其他信息如果需要保留，可以放在cookie中 
   8、session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到，而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的。 
   9、COOKIE:是服务端向客户端写入的小的片段信息。cookie信息保存在服务器缓存区，不会在客户端显现。当你第一次登陆一个网站，服务器向你的机器写得片段信息。你可以在Internet选项中找到存放cookie的文件夹。如果不删除，cookie就一直在这个文件夹中。 
   10、session需要借助cookie才能正常工作。如果客户端完全禁止cookie，session将失效。 但是如果服务器端启用了url编码，也就是用 URLEncoder.encode()把所有的url编码了，则会在url后面出现如下类似的东西 index.jsp:jsessionid=fdsaffjdlks;jaf;lkdjsf 服务器通过这个进行session的判断. 
   11.Cookie支持跨域名访问，例如将domain属性设置为“.biaodianfu.com”，则以“.biaodianfu.com”为后缀的一切域名均能够访问该Cookie。跨域名Cookie如今被普遍用在网络中，例如Google、Baidu、Sina等,而Session则不会支持跨域名访问。Session仅在他所在的域名内有效。仅运用Cookie或者仅运用Session可能完成不了理想的效果。这时应该尝试一下同时运用Cookie与Session。Cookie与Session的搭配运用在实践项目中会完成很多意想不到的效果。
   

6. 什么是cookie隔离？请求资源时不要带cookie怎么做?

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开。
 
因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，
这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。
 
同时这种方式不会将cookie传入server，也减少了server对cookie的处理分析环节，
提高了server的http请求的解析速度。

11. cookie和session有哪些区别？

Cookie是存放在客户端（浏览器），Session是保存在服务端。

Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息。可以设置有效期
Session是服务端记录用户状态时用于标识具体用户。在浏览器窗口关闭后这次的Session就消失了。

Cookie的安全性不如Session
Session如果过多，会对服务端产生较大的压力，不是特别重要的数据，可以考虑使用Cookie存放

12. cookie和token的区别 ?

    token和cookie一样都是首次登陆时，由服务器下发，都是当交互时进行验证的功能，作用都是为无状态的HTTP提供的持久机制。token存在哪儿都行，localstorage或者cookie。
    当用户退出登录的时候cookie和服务器的session都会注销；但是用户退出登录的时候token只是注销浏览器信息，不查库。
    

13. 登陆后，前端做了哪些工作？如何得知已登录？

    前端存放服务端下发的cookie, 简单说就是写一个字段在cookie中表明已登录, 并设置失效日期
    
    或使用后端返回的token, 每次ajax请求将token携带在请求头中, 这也是防范csrf的手段之一。
    

14. 前端性能优化方法

    （1）浏览器渲染机制，减少重绘重排
    （2）事件处理程序，使用事件委托
    （3）网络请求优化，善用缓存，不重复加载相同的资源，减少 HTTP 请求，使用http2.0
    （4）静态资源使用 内容分发网络（CDN）是一组分布在多个不同地理位置的 Web 服务器。我们都知道，当服务器离用户越远时，延迟越高。CDN 就是为了解决这一问题，在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间。
    

15. 浏览器输入url后发生了什么

    DNS 解析:将域名解析成 IP 地址 
    TCP 连接：TCP 三次握手 
    发送 HTTP 请求 
    服务器处理请求并返回 HTTP 报文（html）
    浏览器解析渲染页面 
    断开连接：TCP 四次挥手 
    TCP 三次握手结束后，开始发送 HTTP 请求报文。 
    根据 HTML 解析出 DOM 树 
    根据 CSS 解析生成 CSS 规则树 
    结合 DOM 树和 CSS 规则树，生成渲染树 
    根据渲染树计算每一个节点的信息。
    
    请求报文由请求行（request line）、请求头（header）、请求体 构成。
    1.请求行包含请求方法、URL、协议版本 
    2.请求头包含请求的附加信息，由关键 字/值对组成，每行一对，关键字和值用英文冒号“:”分隔。 比如：Host，表示主机名，虚拟主机；Connection,HTTP/1.1 增加的，使用 keepalive，即持久 连接，一个连接可以发多个请求；User-Agent，请求发出者，兼容性以及定制化 需求。 
    3.请求体，可以承载多个请求参数的数据，包含回车符、换行符和请求数据，并不是所有请求都具有请求数据。
    

16. css加载会造成阻塞吗？

    CSS 不会阻塞 DOM 解析，但会阻塞 DOM 渲染。
    CSS 会阻塞 JS 执行，并不会阻塞 JS 文件下载 
    CSSOM 作用 
    第一个是提供给 JavaScript 操作样式表的能力 
    第二个是为布局树的合成提供基础的样式信息 这个 CSSOM 体现在 DOM 中就是 document.styleSheets。
    由之前讲过的浏览器渲染流程我们可以看出： DOM 和 CSSOM 通常是并行构建的，所以「CSS 加载不会阻塞 DOM 的解析」。 然而由于 Render Tree 是依赖 DOM Tree 和 CSSOM Tree 的，所以它必须等到两 者都加载完毕后，完成相应的构建，才开始渲染，因此，「CSS 加载会阻塞 DOM 渲染」。
    由于 JavaScript 是可操纵 DOM 和 css 样式 的,如果在修改这些元素属性同 时渲染界面（即 JavaScript 线程和 UI 线程同时运行）,那么渲染线程前后获 得的元素数据就可能不一致了。 因此为了防止渲染出现不可预期的结果,浏览器设置 「GUI 渲染线程与 JavaScript 引擎为互斥」的关系。 
    有个需要注意的点就是： 「有时候 JS 需要等到 CSS 的下载，这是为什么呢？」 仔细思考一下，其实这样做是有道理的，如果脚本的内容是获取元素的样式，宽 高等 CSS 控制的属性，浏览器是需要计算的，也就是依赖于 CSS。浏览器也无法 感知脚本内容到底是什么，为避免样式获取，因而只好等前面所有的样式下载完 后，再执行 JS。
    JS 文件下载和 CSS 文件下载是并行的，有时候 CSS 文件很大，所以 JS 需要等待。 因此,样式表会在后面的 js 执行前先加载执行完毕,所以「css 会阻塞后面 js 的执行」。
    

17. 为什么js会阻塞页面加载？

    1. 现代浏览器会并行加载js文件。
    2.加载或者执行js时会阻塞对标签的解析，也就是阻塞了dom树的形成，只有等到js执行完毕，浏览器才会继续解析标签。没有dom树，浏览器就无法渲染，所以当加载很大的js文件时，可以看到页面很长时间是一片空白。
    
    所以会阻塞对标签的解析是因为加载的js中可能会创建，删除节点等，这些操作会对dom树产生影响，如果不阻塞，等浏览器解析完标签生成dom树后，js修改了某些节点，那么浏览器又得重新解析，然后生成dom树，性能比较差。
    

18. websocket

HTTP 协议有一个缺陷：通信只能由客户端发起，做不到服务器主动向客户端推送信息。
（1）建立在 TCP 协议之上，服务器端的实现比较容易。
（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据。
（5）没有同源限制，客户端可以与任意服务器通信。
（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

19. 了解浏览器缓存机制吗？强缓存 协商缓存(136)

    浏览器缓存就是把一个已经请求过的资源拷贝一份存储起来，当下次需要该资源时，浏览器会根据缓存机制决定直接使用缓存资源还是再次向服务器发送请求。作用: 减少网络传输的损耗以及降低服务器压力。 
    强制缓存（本地缓存）：给资源设置过期时间，客户端每次请求资源时都会查看是否过期，如果过期则向服务器再次发送请求。
    协商缓存：当强缓存过期时，客户端向服务器发送请求时可以设置协商缓存，请求资源时，把本地该资源的唯一ID携带发给服务器，服务器和最新资源做对比，资源没变，返回304，浏览器读取本地缓存。资源改变，返回200，返回最新资源。
    优先级: 强制缓存 > 协商缓存; 
    
    （1）强缓存为什么要有两个呢 Expires, Cache-Control?Cache-Control有哪些属性?分别表示什么意思？
    两者作用差不多，区别就在于 Expires 是http1.0的产物，Cache-Control是http1.1的产物，两者同时存在的话，Cache-Control优先级高于Expires；
     Expires：过期时间，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存。
     Cache-Control:则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。
    
    （2）协商缓存出于什么原因有Last-Modified,Etag? etag的原理?
    Etag是上一次加载资源时，该资源的一种唯一标识，只要资源有变化，Etag就会重新生成。
    浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到request ，会拿来跟该资源文件的Etag值做比较，如果相同，则表示资源文件没有发生改变，命中协商缓存。
    Last-Modified是该资源文件最后一次更改时间，服务器会在response header里返回，同时浏览器会将这个值保存起来，在下一次发送请求时，放到request header里的If-Modified-Since里，服务器在接收到后也会做比对，如果相同则命中协商缓存。
    

20. 常见的块元素，行内元素，行内块元素

    display 属性在块级元素和行内元素的转换，display 有三个值：
    inline:值为 inline 将变成行内元素，比如 div。不能设置宽高，和行内元素并排
    block:值为 block 的，比如 span。能设置宽高（填充父级），独占一行。
    inline-block：值为 inline-block 也就是变成行内块元素
    
    （1）块级元素：块元素通常会独占一行，或者多行，它的宽高，边距等都可以设置。
    <caption>	定义表格标题
    <address>	定义地址
    <dd>	定义列表中定义条目
    <div>	定义文档中的分区或节
    <dl>	定义列表
    <dt>	定义列表中的项目
    <fieldset>	定义一个框架集
    <form>	创建 HTML 表单
    <h1>~<h6>	定义标题
    <hr>	定义一条水平线
    <p>	定义段落
    <table>	定义表格
    <li>	标签定义列表项目
    <ul>	定义无序列表
    <ol>	定义有序列表
    
    （2）行内元素：又称为内联元素，行内元素的大小是靠本身内容的大小，宽高都设置无效。
    <a>	标签定义超链接
    <abbr>	表示一缩写形式
    <acronym>	定义只取首字母缩写
    <b>	定义字体缩写
    <bdo>	可覆盖默认的文本方向
    <big>	定义大号字体加粗
    <br>	定义换行
    <code>	定义计算机代码文本
    <label>	标签
    <select>	创建单选或多选菜单
    <span>    组合文档中的行内元素
    
    （3）行内块元素：行内块元素从文字上看像块级元素和行内元素结合似的，其实比较特殊，比如<input>，<img>，<td> 可以设置宽高属性，这种就称为行内块元素。
    

21. 懒加载和预加载？

    预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。 
    
    懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。 
    1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
    2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
    3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。
    
    两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。
    
    懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
    

22. 常见的网络攻击方式有哪些？什么是xss攻击？什么是csrf攻击？

    Xss(cross-site scripting) 攻击：全称跨站脚本攻击，攻击者在web页面中会插入一些恶意的script代码。当用户浏览该页面的时候，那么嵌入到web页面中script代码会执行，因此会达到恶意攻击用户的目的。
    
    CSRF (Cross Site Request Forgery)，跨站请求伪造，攻击者借助用户的 Cookie 骗取服务器的信任，以用户名义伪造请求发送给服务器。如：在请求的 url 后加入一些恶意的参数。
    防范CSRF：添加 token 验证：在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，若请求无 token 或者 token 不正确，则认为可能是 CSRF 攻击而拒绝该请求。
    

23. 同源策略，什么是跨域？为什么浏览器要使用同源策略？跨域的几种解决方案？了解预检请求吗？

    同源策略:  协议/主机/端口
    我们来看下面的页面是否与 http://store.company.com/dir/index.html 是同源的？
    http://store.company.com/dir/index2.html 同源 
    http://store.company.com/dir2/index3.html 同源 虽然在不同文件夹下 
    https://store.company.com/secure.html 不同源 不同的协议(https) 
    http://store.company.com:81/dir/index.html 不同源 不同的端口(81) 
    http://news.company.com/dir/other.html 不同源 不同的主机(news)
    
    浏览器使用同源策略主要是为了安全，比如：如果没有同源限制存在浏览器中的cookie等其他数据可以任意读取。防止 XSS、CSFR 等攻击。
    跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。
    
    解决方案：
    （1）jsonp：ajax受同源影响，利用JS中src属性连接访问跨域JS。不安全可能会遭受 XSS 攻击。只能get，不安全、有缓存、大小限制。
    （2）CORS:服务端设置。
    （3）nginx 反向代理：搭建一个中转 nginx 服务器，用于转发请求。
    （4）webpack添加proxy
    （5）location.hash:a与b跨域，通过中间页c，不同域：location.hash传值。不同域：js。
    
    预检请求: 需预检的请求要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。
    

24. 了解CDN么？为什么要用CDN？CDN的核心是什么？（和西天取经一个道理，唐僧取经之前，国内想看经书只能跑老远去西天看经书，唐僧取经回来，再去国内各地传播，之后各地的人想听佛法就去最近的寺庙听就好了）

    CDN ：内容分发网络
    CDN的核心点有两个，一个是缓存，一个是回源。
    静态资源本身具有访问频率高、承接流量大的特点，因此静态资源加载速度始终是前端性能的一个非常关键的指标。
    CDN 是静态资源提速的重要手段，在许多一线的互联网公司，“静态资源走 CDN”并不是一个建议，而是一个规定
    

25. dns 域名解析

    DNS 主要的作用就是将人们所熟悉的网址 (域名) “翻译”成电脑可以理解的 IP 地址，这个过程叫做 DNS 域名解析，一个域名往往对应多个DNS地址。
    
    DNS的规范规定了2种类型的DNS服务器，一个叫主DNS服务器，一个叫辅助DNS服务器。在一个区中主DNS服务器从自己本机的数据文件中读取该区的DNS数据信息，而辅助DNS服务器则从区的主DNS服务器中读取该区的DNS数据信息。当一个辅助DNS服务器启动时，它需要与主DNS服务器通信，并加载数据信息，这就叫做区域传送（zone transfer）。 这种情况下，使用TCP协议。
    
    为什么域名解析用UDP协议?
    因为UDP快啊！UDP的DNS协议只要一个请求、一个应答就好了。而使用基于TCP的DNS协议要三次握手、发送数据以及应答、四次挥手。但是UDP协议传输内容不能超过512字节。不过客户端向DNS服务器查询域名，一般返回的内容都不超过512字节，用UDP传输即可。
    
    为什么区域传送用TCP协议？
    因为TCP协议可靠性好啊！你要从主DNS上复制内容啊，你用不可靠的UDP？ 因为TCP协议传输的内容大啊，你用最大只能传512字节的UDP协议？万一同步的数据大于512字节，你怎么办？
    

26. osi七层模型

    物理层：
        作用：通过媒介输出比特（bit）
        协议：RJ45、CLOCK、IEEE802.3 
        设备：中继器、集线器
    数据链路层：
          作用：将比特组装成帧（Frame）和点对点传递
          协议：PPP FR HDLC VLAN MAC
          设备：网桥、交换机
    数据链路层在概念上分为两个子层：逻辑链路控制子层（LLC）和媒体访问控制子层（MAC）。数据链路层负责分配MAC地址，或称为物理地址，由48比特长，12个16进制数字组成，0~23位。是厂商向IETF等机构申请用来标识厂商的代码。
    
    网络层：
         作用：负责数据包从源到宿的传递和网际交互
         协议：IP IPX ICMP IGMP ARP RARP OSPF
         设备：