面试整理题

aiuzi

于 2021-08-24 10:29:03 发布

阅读量168

点赞数

本文链接：https://blog.csdn.net/aiuzi/article/details/119884447

版权

本文深入探讨前端开发的关键知识点，包括URL解析、HTTP缓存、DNS解析、TCP连接的三次握手与四次挥手、JavaScript内存泄漏及V8垃圾回收机制。同时，介绍了HTTPS的安全流程、HTTP与HTTPS的区别，以及页面性能优化策略，如首屏加载优化、资源加载管理和Web安全措施。此外，还涵盖了Vue框架的特性和项目优化技巧。

摘要由CSDN通过智能技术生成

作者：我叫旋仔
链接：https://www.nowcoder.com/discuss/648910?source_id=discuss_experience_nctrack&channel=-1
来源：牛客网

1. 自我介绍

2. 项目特点难点介绍

3. 输入url到页面展示的整个过程；是从哪里学到这块内容的？

（http缓存、dns解析、三次握手、四次挥手、syn-flood、服务端http请求解析、浏览器响应请求处理、渲染机制、js单线程处理与事件循环机制）

a.输入url到页面展示的整个过程

首先输入url之后，会先进行域名分析，通过DNS去本地服务器查找，如果在本地没有查找到的话就通过DNS根目录进行查找，将查找到的ip返回给浏览器，同时将这个域名和IP地址对应关系保存在缓存中。当浏览器拿到ip后，会向服务端发送HTTP请求（应用层），HTTP请求接收到了一系列的处理封装，发送之后到达服务器端，建立TCP/IP连接，服务器接收到请求并开始处理响应。服务器端开始响应，在经过一层层的处理封装发送之后到达客户端，浏览器处理请求。浏览器开始渲染页面，解析HTML，构建render树，根据render树的节点和CSS的对应关系进行布局绘制页面。

b. 三次握手

c.四次握手

https://blog.csdn.net/weixin_33827731/article/details/85800486?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control

本地

DNS解析，客户端发送请求，服务端处理请求，服务端响应请求，浏览器展示HTML，浏览器发送请求获取他在HTML中的资源

4. 说一下javascript内存泄漏的场景？讲一下V8垃圾回收机制

当无用的内存还在占用，得不到释放和归还，比较严重的时候，无用的内存会持续递增，从而导致整个系统卡顿，甚至崩溃。会引起内存泄漏的场景：

遗忘的全局变量，全局变量的生命周期很长直到页面关闭才会消失，当给某个全局变量拼写错误，或者没有及时回收，手动赋值null的时候，也就会发生内存泄漏。
遗忘的定时器，setInterval和setTimeout是由浏览器有个专门的线程来回收他的，所以当页面使用了定时器，当这个页面被销毁时，该定时器持有一部分页面而导致页面无法被正常的收回，从而倒是内存泄漏。如果再次打开同个页面，内存中其实是有双份页面数据的，多次打开关闭，内存泄漏会越来越严重
使用不当的闭包，闭包就是能读取其他函数内部变量的函数，通常情况下，使用完函数，该函数的内存都会被回收了。但当函数内再返回一个函数时，由于返回的函数内还包含有外部函数的语法环境，并且返回的函数又被其他生命周期东西所持有，导致外部函数虽然执行完了，但内存无法被回收。所以返回的函数它生命周期最好不要太长，正常来说闭包并不是内存泄漏，因为这种持有外部此法环境本就是闭包的特性，就是为了让这块内存不被收回，因为在以后还有可能会遇到，这无疑会造成内存的消耗，所以不宜滥用最好
遗漏的DOM元素，dom元素的正常生命周期就是是否挂载在dom树上，当从dom树上移除时，也就可以被销毁回收了。但是如果某个dom元素在js中也持有他的引用的时候，他的生命周期就由js和是否在dom书上两者决定了。两个地方都清理才能去正常回收他

v8垃圾回收分成两个区域，新生区和老生区，如果该对象内存占用小，存活时间端，则在初始化的时候就放置到新生区中，新生区中还分成两小块，对象区和空闲区，他的扫描频率比较快，扫描时首先会一次将对象中的垃圾做标记，将存活的对象复制到空闲区中，然后清空对象区中的内容，将原来的空闲区与变成了对象区域。如果一个元素经历了两次扫描之后依旧存活，我们就将其看作是活跃对象，把他从新生代移到老生代中。老生区存储的对象大都存活时间较长，并且体积较大，它的扫描频率也相对比较慢，当他进行扫描时，会从根元素递归所有的对象，如果能到达的就看作复活元素，没有到达的元素就视为垃圾元素，清除垃圾数据，整理磁盘内存。

5. http与https的区别；https的整体流程？

http的流程

http为超文本传输协议，最初的目的是为了提供一个发布和接受HTML页面的方法，它可以是浏览器更加高效。他的原理（流程）是首先通过网络与服务器建立连接，该链接通过TCP来完成，TCP连接的端口号是80。建立连接后，客户端向服务端发送请求，当服务端接收到请求后，给与对应的相应信息。

https的流程

https是以安全为前提的HTTP通道，首先客户端向服务端发送一个请求，来确认身份，服务端接收到请求后会向客户端发送证书，客户端接受到证书之后，会检查证书，确认是否是自己信任的机构签发的证书，如果不是，会将是否进行通信的选择权交给用户，如果用户选择继续，则客户端认可服务端的身份。服务端也会要求客户端发送证书，并检查是否通过验证，如果通过则从客户端整数中获得客户端密钥，双方确保身份都是真实可信的。否则，关闭连接。

tcp(网络层)

两者的区别

https是有ca证书的，一般这个证书都不会免费，需要收取一定的费用
https相对来说更加安全，通过SSL加密传输协议，而http是超文本传输协议，明文传输
http和https是完全不同的连接方式，所以他们的端口号也不一样，http是80，https是443
http的连接很简单是无状态的，他的数据包的发送传输和接受都是相对独立的。https协议是由ssl+http协议构建的可进行加密传输，身份认证的网络协议，比http协议更加安全。

状态码：

1为信息错误，服务器收到请求，需要请求者继续操作

2 成功，操作成功接受并处理

3 重定向，需要进一步操作来完成请求

4 客户端错误，请求包含语法错误或者无法完成

5 服务器端错误，服务器在请求的过程中发生了错误

6. html语义化的理解？从背景出发到实际的解决过程讲解

7. css是如何绘制一个叉的？一般从哪里获取图片资源？

iconfont自定义图标以及下载实现原理？

8. css垂直左右居中的方式

9. css响应式的理解？从背景出发到实际的解决过程讲解，讲了移动端的解决方案

10. async、await、promise三者的关系？手写Promise流程讲解？最重要的点是什么？Promise.all的实现方式从头讲一遍

11. vue双向绑定的底层实现？

12. vue3的新特性有了解过吗？底层和vue2有什么区别，进行了什么优化？

13. 容易引发vue内存泄漏的场景以及解决方案，如何进行排查的？

14. 说一下JSONP的实现原理？说一下别的跨域解决方案

15. 说一下网络攻击的几种方式？具体是怎么攻击的？怎么进行解决？

16. 如何封装一个组件的，从软件工程的角度去分析说说看

版权声明：本文为CSDN博主「EDB」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Her_smile/article/details/90487404

给面试官讲述前端是什么。这里我讲了一下前端的发展历程，以及现在的涉及方面，以及使用的技术，以及这些新出现的技术的思想和意义。

给你一个页面，首屏加载速度很慢，怎么去优化。

首先首屏加载过慢，排除网络原因，正常情况下，一定是资源加载过多，然后我就使用代码分割，文件合并，预加载，懒加载，缓存等方面如何去实现，进行了说明。其实页面优化的点特别多，时间有限我着重挑了几个点，一个是从构建工具中构建时如何去优化，一个页面预加载和懒加载，以及它们也可以在构建工具中实现，基于浏览器渲染机制的优化，以及缓存的使用以及离线应用的兴起。