前言
又到一波面试准备的时刻,整理了一波前端相关要点内容,配合
chatGPT
完成要点内容的整理输出,有纠正错误和需要补充的小伙伴可以在这里留言,及时更新。
- 跟chatGPT一起复习前端 —— HTML & CSS
- 跟chatGPT一起复习前端 —— JavaScript
- 跟chatGPT一起复习前端 —— Vue
- 跟chatGPT一起复习前端 —— React
- 跟chatGPT一起复习前端 —— Webpack
- 跟chatGPT一起复习前端 —— 浏览器
- 跟chatGPT一起复习前端 —— 计算机网络
- 跟chatGPT一起复习前端 —— Vite
- 跟chatGPT一起复习前端 —— TypeScript
- 跟chatGPT一起复习前端 —— 安全问题
- 跟chatGPT一起复习前端 —— 前端工具
- 跟chatGPT一起复习前端 —— 手写方法
- 跟chatGPT一起复习前端 —— 数据结构与算法
浏览器缓存有哪些形式
- HTTP缓存:基于HTTP协议的浏览器文件级缓存机制。
- WebSQL:较新的Chrome浏览器支持,并以独立规范形式出现。
- IndexDB:为了能够在客户端存储可观数量的结构化数据,并且在这些数据上使用索引进行高性能检索的API。
- Cookie:一般网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据。
- LocalStorage:HTML5专门为浏览器端数据存储而设计的API。
- SessionStorage:与LocalStorage类似,但是SessionStorage是会话级别的,即在同一会话中共享数据。
- Application Cache:HTML5中提供的离线缓存机制。
- CacheStorage:Service Worker中提供的缓存机制。
浏览器的同源策略
同源策略是浏览器自带的一种安全策略,它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。同源策略能帮助阻隔恶意文档,减少可能被攻击的媒介。
同源策略是指协议、域名、端口三个都相同的才能互相访问,即若协议、域名、端口有一个不相同时,浏览器禁止页面加载或执行与自身不同域的脚本。
跨域是什么
跨域是指在一个域名下的文档或脚本试图去请求另一个域名下的资源,这里的“域”指的是主机名。跨域是由浏览器的同源策略造成的,是浏览器施加的安全限制。同源策略要求两个页面具有相同的协议、主机和端口号,否则就会出现跨域问题。
如何解决跨域
以下是跨域方式的实现方法:
- JSONP:利用script标签发起get请求不会出现跨域禁止的特点实现。
- CORS:需要服务器设置header:Access-Control-Allow-Origin。
- nginx反向代理:可以不需要目标服务。
- WebSocket:HTML5提供的新协议,需要浏览器和服务器都支持。
- postMessage:主要侧重于前端通讯,不同域下页面之间的数据传递。
- window.name + iframe:借助中介属性window.name实现。
- location.hash + iframe:利用iframe的location.hash传值,相同域之间直接js访问来通信。
- document.domain + iframe:主要用于不同子域之间的通信。
- WebSocket + nginx反向代理:WebSocket协议需要浏览器和服务器都支持,nginx反向代理可以不需要目标服务。
- nodejs中间件代理:使用nodejs中间件代理实现跨域。
什么是CORS
CORS是跨源资源共享(Cross-Origin Resource Sharing)的缩写,是一种基于HTTP头的机制,该机制通过允许服务器标示除了它自己以外的其他源(域、协议或端口),使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求,该机制通过浏览器发起一个预检请求,从而得到服务器的响应。
浏览器的渲染原理
浏览器的渲染原理是指浏览器如何将 HTML、CSS 和 JavaScript 转换成用户可以看到的网页。浏览器的渲染过程主要
包括以下几个阶段:
- 解析 HTML,构建 DOM 树:浏览器将 HTML 解析成 DOM(文档对象模型)树。DOM 树是由节点和对象组成的树形结构,表示文档的层次结构。节点包括元素、文本、注释等。
- 解析 CSS,构建 CSSOM 树:浏览器将 CSS 解析成 CSSOM(CSS 对象模型)树。CSSOM 树是由样式规则和对象组成的树形结构,表示样式规则的层次结构。
- 将 DOM 树和 CSSOM 树合并成渲染树:浏览器将 DOM 树和 CSSOM 树合并成渲染树。渲染树只包括需要显示的节点和对象,如 display:none 的节点不会被包括在渲染树中。
- 布局渲染树,计算每个元素的位置和大小:浏览器对渲染树进行布局,计算每个元素在屏幕上的位置和大小。
- 绘制渲染树,将每个元素绘制到屏幕上:浏览器遍历渲染树,并将每个元素绘制到屏幕上。
回流为什么比重绘更消耗性能
在 Web 开发中,页面重绘和回流会影响页面性能。页面重绘是指修改页面中某些元素的样式,导致浏览器重新渲染这些元素。而回流则是指页面布局发生变化,导致浏览器重新计算元素的位置和大小,然后再渲染页面。这些操作都需要浏览器消耗额外的计算资源。
回流和重绘在一定程度上都会消耗性能,而且回流的成本是高于重绘的。浏览器通常都会将多次回流操作放入一个队列中,等过一段时间或者操作达到一定的临界值,然后才会挨个执行,这样能节省一些计算消耗。
如何避免回流和重绘
回流和重绘的性能消耗是由于浏览器需要重新计算元素的位置和大小,然后再渲染页面。为了避免回流和重绘,可以采取以下措施:
- 不使用能够触发回流的属性;
- 建立一个图层,让回流在图层里面进行,限制回流和重绘的范围,减少浏览器的运算工作量。
浏览器的进程与线程
浏览器是一个多进程的应用程序,每个进程都有自己的内存空间,可以独立运行。浏览器进程包括浏览器的主进程、GPU进程、网络进程、插件进程和渲染进程等。其中,渲染进程是最重要的一个,它负责将HTML、CSS和JavaScript转换为用户可以看到的网页。
每个标签页都有一个独立的渲染进程,这样可以保证一个标签页崩溃不会影响其他标签页。此外,Chrome还使用了一种叫做“进程合并”的技术,将一些空白页合并到同一个进程中,以节省内存。
线程是依附于进程的,在进程中使用多线程并行处理能提升运算效率。在浏览器中,每个渲染进程都有多个线程,包括GUI渲染线程、JavaScript引擎线程、事件触发线程、定时器线程等。
cookie、session、token的区别
Cookie、Session和Token都是用来跟踪用户身份的机制,但是它们之间有一些区别。
Cookie是浏览器用来保存用户信息的文件,可以保存比如用户是谁,购物车有哪些商品等。Cookie数据存放在客户端上,不是很安全,且保存数据有限。
Session是一种服务器端的机制,用来保存用户的会话信息。Session数据存放在服务器上,相对于Cookie更加安全。但是每个客户端都会创建一个Session,因此会占用服务器资源。
Token是一种基于HTTP身份验证机制的验证方式。Token包含了用户的身份信息以及过期时间等信息,可以自由操作存储在哪里。Token相对于Session更加灵活,不需要占用服务器资源。
cookies,sessionStorage 和 localStorage 的区别
cookies,sessionStorage 和 localStorage 都是前端存储数据的方法,但它们有以下区别:
- 存储大小:cookie 数据大小不能超过4k,sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到5M或更大。
- 有效期:localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;sessionStorage 数据在当前浏览器窗口关闭后自动删除;cookie 设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭。
- 数据与服务器之间的交互:cookie 每次都会携带在 http 请求头中,所以 cookie 可以和服务器进行交互;sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存。
- 作用域不同:cookie 在所有同源窗口中都是共享的;localStorage 在所有同源窗口中都是共享的;sessionStorage 在同一个浏览器窗口中是共享的(不同浏览器窗口之间不共享)。
webWorker
Web Worker 是 HTML5 中新增的技术,它可以让 JavaScript 实现多线程,提高 Web 应用计算效率,适合处理大数据计算。简单点说,Web Worker 就是一个运行在后台的 JavaScript 线程,不会影响页面的响应。
Web Worker 的使用步骤如下:
- 创建一个 Worker 对象,指定要执行的 JavaScript 文件。
- 在主线程中监听 worker 的 message 事件,接收 worker 发送过来的数据。
- 在 worker 中监听 message 事件,接收主线程发送过来的数据。
- 在 worker 中调用 postMessage 方法,向主线程发送数据。
浏览器的垃圾回收机制
浏览器的垃圾回收机制是指浏览器自动回收不再使用的内存空间的一种机制。根据数据的存储方式,浏览器垃圾回收机制分为栈垃圾回收和堆垃圾回收。
栈垃圾回收的方式非常简便,当一个函数执行结束之后,JavaScript 引擎会通过向下移动 ESP 来销毁该函数保存在栈中的执行上下文,遵循先进后出的原则。
而堆垃圾回收则是通过标记清除、标记整理、复制算法等方式进行垃圾回收。
什么是堆垃圾的标记清除、标记整理、复制算法
标记清除、标记整理、复制算法都是 JavaScript 中的垃圾回收算法。其中,标记清除算法是现在 GC 算法的基础,但会产生大量的内存碎片。标记清除算法的执行过程分为两个阶段:标记阶段、清除阶段。标记阶段会通过可达性分析将不可达的对象标记出来。清除阶段会将标记阶段标记的垃圾对象清除。
复制算法会将内存空间分为两块,每次只使用其中一块内存。复制算法同样使用可达性分析法标记出垃圾对象,当 GC 执行时,会将非垃圾对象复制到另一块内存空间中,并且保证内存上的连续性,然后直接清空之前使用的内存空间。然后如此往复。
标记整理算法可以解决标记清除算法的内存碎片问题。其算法可以看作三步:标记垃圾对象、清除垃圾对象、内存碎片整理。
输入url 后发生了什么
在浏览器输入URL后,会发生以下步骤:
- 解析URL:将输入的URL解析成协议、主机、端口、路径等信息。
- DNS解析:将主机名解析成IP地址。
- 建立TCP连接:使用HTTP协议的客户端向服务器发送请求,建立TCP连接。
- 发送HTTP请求:客户端向服务器发送HTTP请求,请求数据。
- 服务器响应HTTP请求:服务器接收到客户端的请求后,返回HTTP响应。
- 浏览器解析HTML代码并请求html中的静态资源(js,css):浏览器解析HTML代码,并根据HTML代码中的链接,向服务器请求js、css等静态资源。
- 关闭TCP连接:使用HTTP协议的客户端向服务器发送关闭连接请求,关闭TCP连接。
- 浏览器渲染页面:浏览器根据HTML代码和CSS样式表渲染页面。
浏览器可以调试哪些内容
浏览器调试工具可以调试的内容包括但不限于:
- HTML 元素的属性、CSS 属性、监听事件、断点(DOM 断点)。
- 控制台一般用于执行一次性代码,查看 JavaScript 对象,查看调试日志信息或异常信息。
- 源代码页面用于查看页面的 HTML 文件源代码、JavaScript 源代码、CSS 源代码,此外最重要的是可以调试 JavaScript 源代码,可以给 JS 代码添加断点等。
- 网络页面主要用于查看 header 等与网络连接相关的信息。
- 资源页面用于查看本地资源信息的(cookie、local storage、session storage 等)。
- 浏览器调试工具中的 Performance 面板可以用于分析页面的性能,包括页面加载时间、资源加载时间、JavaScript 执行时间等等。您可以在 Chrome DevTools 中使用 Performance 面板来分析页面性能。
怎么做浏览器兼容性
非常抱歉,我之前的回答不够全面。浏览器调试工具中的 Performance 浏览器兼容性问题是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。为了解决这个问题,我们可以采取以下措施:
- 遵循W3C标准,使用标准化的HTML、CSS和JavaScript代码。
- 使用CSS Hack,但是这种方法并不推荐,因为它会导致代码难以维护。
- 使用JavaScript库,如jQuery、MooTools等,它们可以屏蔽浏览器差异,使得开发者可以更加专注于业务逻辑。
- 使用CSS Reset,它可以重置浏览器的默认样式,使得不同浏览器的样式表现更加一致。
- 使用CSS Prefix,它可以让不同浏览器支持相同的CSS属性。