526互联

前端面试八股文 工程化+性能优化+计算机基础

发布时间 2023-10-10 14:24:33作者: Betrayer

前端面试八股文 工程化+性能优化+计算机基础

前端页面性能如何优化？

以下是一些前端性能优化的常用方法：

  1. 减少资源加载时间：这可以通过多种方式实现，比如压缩和合并CSS和JavaScript文件，使用CDN（内容分发网络）来快速传输资源，以及使用浏览器缓存来避免重复下载。
  2. 优化图片：图片通常是网页中最大的数据负载。优化图片的方法包括压缩图片，选择合适的图片格式，根据设备和视口尺寸提供适当的图片大小。
  3. 使用CSS和JavaScript的最佳实践：例如，避免使用层级过深的CSS选择器，避免长时间运行的JavaScript任务，及时清理不再使用的定时器，以及避免在关键渲染路径上执行JavaScript。
  4. 懒加载和异步加载：懒加载是指只在需要的时候加载资源，异步加载是指在不阻塞页面渲染的情况下加载资源。
  5. 优化网络请求：这可以通过使用HTTP/2，避免重定向，以及使用适当的缓存头来实现。
  6. 使用SSR（服务器端渲染）或SSG（静态站点生成）：这些方法可以在服务器端预渲染页面，从而加快首次渲染时间。
  7. 利用浏览器渲染机制：例如，通过requestAnimationFrame来控制动画的帧率，以及使用web workers来在后台线程上执行任务。
  8. 使用性能分析工具：如Chrome的Lighthouse工具，Firefox的Page Speed Insights工具等，这些工具可以帮助你发现性能瓶颈。

什么是重绘和回流以及如何避免回流

  • 重绘：当页面中元素样式的改变并不影响它在文档流中的位置时，也就是说布局没有发生改变时(比如只是改变元素的颜色)。

  • 回流：当渲染树(Render Tree)中的部分（或全部）元素的尺寸、结构、显示隐藏等发生改变时，浏览器重新渲染的过程称为回流。 简而言之，任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。 回流是影响浏览器性能的关键因素。

    比如：

    （1）添加或者删除可见的 DOM 元素(不可见元素不会触发回流)；

    （2）元素尺寸或位置发生改变

    （3）元素内容变化，比如文字数量或图片大小

    （4）浏览器窗口大小发生改变

    （5）CSS伪类的激活（例如：:hover，从而改变了元素的布局的）

注意

  • 回流必定会发生重绘，重绘不一定会引发回流。
  • 回流比重绘的代价要更高。有时即使仅仅回流一个单一的元素，它的父元素以及任何跟它相关的元素也会产生回流，牵一发动全身。

如何避免(减少)回流

  • css
    • 避免设置多层内联样式。
    • 如果需要设置动画效果，最好将元素脱离正常的文档流。
    • 避免使用CSS表达式（例如：calc()）。
  • JavaScript
    • 避免频繁操作样式，最好将样式列表定义为class并一次性更改class属性。
    • 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
    • 可以先为元素设置为不可见：display: none，操作结束后再把它显示出来。

常见的网络攻击有哪些？如何防御？

  1. SQL注入

    SQL注入是一种常见的网络攻击方式，攻击者通过在应用程序的输入字段中插入恶意的SQL代码，影响后台数据库的查询，从而获取、修改或删除数据，甚至可以控制整个数据库。例如，攻击者可以在用户输入处插入“OR 1=1”这样的SQL语句，使其始终返回真值，从而获取所有用户信息。SQL注入攻击的危害包括数据库信息泄漏、网页篡改、数据库被恶意操作等。

    防御SQL注入攻击主要有以下策略：

    • 对用户的输入进行校验和清洁，例如使用正则表达式过滤传入的参数。
    • 使用参数化语句，不要拼接SQL。参数化语句可以有效地防止SQL注入。Mybatis的#{}。
    • 避免使用管理员权限的数据库连接，为每个应用使用权限有限的数据库连接。
    • 检查数据存储类型，避免存储敏感信息，对重要信息进行加密。

  2. XSS攻击（Cross Site Script 跨站脚本攻击）

    XSS攻击是一种网络攻击方式，攻击者在网页中插入恶意脚本，当用户访问该网页时，恶意脚本会在用户的浏览器中执行，从而获取用户的敏感信息，例如用户的session cookie，或者利用脚本操作用户的浏览器。XSS攻击的危害包括盗取用户身份、恶意篡改网页内容等。XSS攻击包括以下三种：

    • 反射型XSS

      攻击者向Web应用程序发送包含恶意脚本代码的链接或者表单，当用户点击这些链接或者提交表单时，恶意代码就会在用户的浏览器上执行。由于这种攻击方式需要欺骗用户主动点击链接或提交表单，因此其成功率较低。

    • 存储型XSS

      存储型XSS攻击是一种更加危险的XSS攻击类型。攻击者将恶意脚本代码存储在 Web应用程序中，当用户访问包含这些恶意代码的页面时，这些代码就会在用户的浏览器上执行。由于这种攻击方式不需要欺骗用户，因此其成功率较高。

    • DOM型XSS

      DOM型XSS攻击是一种较为特殊的XSS攻击类型。这种攻击方式不是向服务器提交恶意代码，而是直接在客户端利用 JavaScript 代码进行攻击。攻击者通过修改客户端的DOM（文档对象模型），来执行恶意操作。由于这种攻击方式不需要向服务器提交恶意代码，因此其检测和防御都较为困难。

    防御XSS攻击主要有以下策略：

    • 对于所有输入的数据，都需要进行过滤和转义，特别是URL参数和表单提交中的数据，应该使用URL编码和HTML实体编码等方式进行处理，避免恶意脚本的注入。

    • 使用HTTP只读Cookie（HTTP-only Cookie）：使用HTTP-only Cookie可以防止恶意 JavaScript代码获取用户的Cookie。HTTP-only Cookie只能通过HTTP协议来访问，无法通过JavaScript或其他脚本语言来获取。可以通过设置Cookie的 HTTP-only属性来实现。

    • 在编写代码时，避免直接将用户输入的数据作为HTML或JavaScript代码进行输出，比如把用户输入的信息内容插入页面时使用innerText而不是innerHTML。避免使用eval()函数和innerHTML属性等不安全的DOM操作函数。这些函数会执行动态字符串，并将其作为 HTML 或脚本插入到页面中，从而导致 XSS 漏洞。

      • 对于需要使用动态字符串的情况，应该使用DOM操作函数来创建和插入节点，而不是使用innerHTML属性。例如，可以使用 document.createElement()函数创建新的节点，使用appendChild()函数将其添加到DOM树中。

      • 对于需要执行动态脚本的情况，可以使用 document.createElement("script") 函数创建新的<script>标签，并将其添加到DOM树中。然后，使用setAttribute()函数来设置标签的属性，例如src和type，以及使用appendChild()函数将其添加到DOM树中。于需要使用动态字符串的情况，应该使用DOM操作函数来创建和插入节点，而不是使用innerHTML属性。

    • 使用安全的HTTP头设置，例如X-XSS-Protection。

  3. CSRF攻击（Cross Site Request Forgery 跨站域请求伪造）

    CSRF攻击是一种网络攻击方式，攻击者通过伪装来自受信任的用户的请求来攻击受信任的网站。

    防御CSRF攻击的策略包括：

    • 正确的使用get请求和post请求，get请求只应该用于查询，不应该用于修改数据，可以防止攻击者利用<img>标签利用get请求发起CSRF攻击

    • 检查 HTTP Referer 字段，HTTP头中有一个Referer字段，这个字段用以标明请求来源于哪个地址。在处理敏感数据请求时，在通常情况下，Referer字段应和请求的地址位于同一域名下

    • 使用Token，例如JWT令牌

  4. DDOS攻击 (Distributed Denial of Service 分布式拒绝服务攻击)

    DDOS攻击是一种网络攻击方式，攻击者通过大量无用的请求，使服务器过载并拒绝服务。DDOS攻击的危害包括使服务器无法响应正常请求，甚至可以使服务器崩溃。

    防御DDOS攻击的策略包括：

    • 使用防火墙或其他防护设备，例如云服务提供商提供的防护服务。
    • 对异常流量进行清洗和过滤，如果可能的话，限制来自特定IP地址或网络的访问。
    • 使用CDN（内容分发网络）来减轻服务器的压力。

进程与线程区别是什么？

  1. 根本区别：进程是操作系统资源分配的基本单位，线程则是CPU任务调度和执行的基本单位。
  2. 资源开销：每个进程都有独立的代码和数据空间（程序上下文）,程序之间的切换会有较大的开销；线程可以看做轻量级的进程，同一类线程共享代码和数据空间，每个线程都有自己独立的运行栈和程序计数器（PC),线程之间切换的开销小。
  3. 重量级性：进程相对重量级，而线程则轻量级。
  4. 资源的独占和共享：进程拥有自己独立的地址空间，每启动一个进程，系统会为其配地址空间，建立数据来维护代码段、堆栈段、数据段。线程没有独立的空间地址，它使用相同的地址空间共享数据。

TCP和UDP的区别

TCP和UDP都是传输层的协议，他们的主要区别体现在以下四个方面：

  1. 连接方式：TCP是面向连接的，在发送方和接收方在发送数据之前，必须通过三次握手建立连接。而UDP是无连接的，发送方可以直接向接收方发送数据，不需要建立连接。
  2. 可靠性：TCP是可靠的传输协议，它通过添加序号机制，确认机制，超时重传机制，数据校验等功能，保证传输的可靠性。而UDP是不可靠的协议，它在IP协议的基础上添加了端口和差错检查的功能，但由于IP协议尽最大努力传输，从而导致了UDP的不可靠性。
  3. 数据传输方式：TCP协议是面向字节流的，它将应用层传递下来的数据仅仅当做无结构的数据流，并不知道所传数据流的含义。而UDP是面向报文传输的，发送方的UDP对应用程序交下来的报文，在添加首部后就向下交付IP层。
  4. 功能：TCP主要是提供数据传输服务，而UDP除了支持一对一的传输方式外，还支持一对多，多对多，多对一的方式，也就是说UDP提供了单播，多播，广播的功能。

总的来说，TCP和UDP都有各自的特点和适用场景。TCP的主要优点是可靠性高、顺序性好、和面向连接，而UDP的主要优点是简单、快速和不可靠。

讲讲TCP三次握手、四次挥手，为什么要三次握手、四次挥手？

说说从输入url到页面展示出来的整个过程

从输入URL到页面展示出来的整个过程涉及到多个步骤和协议。以下是其中一些主要步骤：

  1. 在浏览器地址栏输入URL后，浏览器通过DNS查询将域名转换为对应的IP地址。这个过程可能会涉及到浏览器本地缓存、电脑缓存、路由器等中间缓存以及域名服务器。
  2. 找到服务器的IP地址后，浏览器通过三次握手建立TCP连接，然后将HTTP请求发送到服务器。
  3. 服务器处理请求，并发送响应到浏览器。
  4. 浏览器接收到响应数据（HTML文件）并解析该文件。在解析HTML文件时，浏览器会先将接收到的数据按照编码方式转化为单个字符，再通过浏览器规范将单个字符组合成对应的标记，然后根据规范将标记转化为包含对应属性的DOM节点，最后形成DOM树。
  5. 在解析HTML文件时，如果遇到<link>和<script>标签外链样式文件和脚本文件，浏览器会分别加载它们。CSS文件的加载不会阻塞DOM树的构建，但会阻塞render树的构建；而脚本文件的加载和执行则会阻塞DOM树的构建。
  6. 最后，浏览器根据DOM树和CSS样式渲染页面并展示在屏幕上。

GET和POST区别

GET和POST请求是HTTP协议中的两种请求方式，它们之间存在以下区别：

  1. 请求参数的位置：GET请求的参数被放在URL中，而POST请求的参数被放在请求体中。这意味着GET请求的参数在地址栏中可见，而POST请求的参数不会在地址栏中显示。
  2. 安全性：由于GET请求的参数在URL中，因此不够安全，因为这些参数可能被保存在浏览器的历史记录、缓存或网络截获中。相反，POST请求的参数在请求体中传输，相对较为安全。
  3. 请求的语义：GET请求通常用于获取或查询服务器上的资源，而POST请求通常用于向服务器发送数据以进行更新或创建新资源。
  4. 数据长度限制：由于URL的长度有限制（通常是2048个字符），GET请求的参数长度有限制。而POST请求没有这个限制。
  5. 缓存：GET请求是可以被浏览器缓存的，这意味着如果多个页面使用相同的GET请求，浏览器可以将这些请求的结果缓存起来以提高性能。而POST请求则不能被浏览器缓存。
  6. 幂等性：GET请求是幂等的，这意味着多次执行相同的GET请求将产生相同的结果。然而，POST请求不是幂等的，每次执行相同的POST请求可能会产生不同的结果。

讲讲304协商缓存过程。

304协商缓存过程是指在浏览器第一次请求某个资源时，服务器会在响应中返回一个Last-Modified的标头，这个标头是该资源的最后修改时间。当浏览器再次请求该资源时，浏览器会向服务器发送一个If-Modified-Since的请求头，这个请求头中包含了之前服务器返回的Last-Modified值。服务器在收到这个请求后，会根据资源的最后修改时间与If-Modified-Since的值进行比较，如果资源的最后修改时间早于If-Modified-Since的值，那么服务器就会返回一个304状态码，表示资源没有修改，浏览器就会继续使用本地的缓存资源，而不会向服务器重新发送HTTP请求，减少了性能的消耗。如果资源的最后修改时间晚于If-Modified-Since的值，那么服务器就会返回一个新的资源，浏览器就会更新本地缓存的资源。

浏览器有哪些缓存？localStorage、sessionStorage、cookie的、session的区别是什么？

浏览器缓存主要可以分为以下几种：

  1. 浏览器缓存（Browser Cache）：这是浏览器用来存储已经请求过的网页数据的地方，包括HTML、图片、CSS、JavaScript等资源文件。浏览器缓存的主要目的是减少网络传输，加速页面加载速度。
  2. localStorage：这是一种Web存储机制，用于在用户的浏览器上存储数据。localStorage存储的数据没有过期时间，即除非用户主动删除，否则数据会一直存在。它主要用于持久化存储大量数据，例如应用程序的状态、用户设置等。
  3. sessionStorage：这也是一种Web存储机制，用于在用户的浏览器上存储数据，但是存储的数据在浏览器窗口或选项卡关闭后就会被删除。它主要用于存储临时数据，例如保持用户的登录状态。
  4. Cookie：Cookie是在用户浏览器中存储的小型数据片段，通常用于保存用户的一些个性化设置或者在用户会话间维持状态。Cookie通常与服务器交互，例如，当用户登录一个网站时，服务器可能会设置一个包含用户登录信息的Cookie，然后在后续的请求中，浏览器会自动将这个Cookie发送给服务器，服务器就可以知道用户已经登录了。
  5. Session：Session是服务器端使用的一种技术，用于在用户的多个请求之间保留信息。每当用户访问网站时，服务器都会创建一个新的Session，并且为每个Session分配一个唯一的ID，这个ID通常会以Cookie的形式发送给用户浏览器。然后，当用户浏览器再次访问网站时，会自动发送这个Cookie，服务器就可以通过这个Cookie找到对应的Session。

这五种缓存的主要区别在于它们的生命周期、存储位置以及用途。例如，Browser Cache主要用于加速页面加载，localStorage和sessionStorage主要用于在浏览器中存储数据，Cookie和Session主要用于在用户的多个请求之间维持状态。