前端面试的游览器部分（3）每天10个小知识点

知识点

21.token的概念与使用

Token（令牌）是在网络通信中用于身份验证和授权的一种方式。它是一串字符串，通常由服务器生成，并在用户登录后返回给客户端。客户端在后续的请求中将 Token 作为身份凭证发送给服务器，以证明自己的身份和权限。

Token 的使用可以带来以下优势：

1. 无状态性：Token 是无状态的，服务器不需要在后端存储用户的登录信息，减轻了服务器的负担。
   
2. 安全性：Token 通常使用密钥进行签名，确保了数据的完整性和安全性。客户端不能篡改 Token，因为篡改后签名会失效。
   
3. 跨平台：Token 可以在不同的平台上使用，包括Web、移动设备等。
   
4. 自定义权限：Token 可以携带用户的权限信息，服务器可以根据 Token 中的权限信息来判断用户是否有权访问某些资源。
   
5. 可扩展性：Token 的生成和验证可以由第三方身份验证服务来处理，使得系统具有良好的扩展性和灵活性。
   

常见的 Token 类型包括：

1. JWT（JSON Web Token）：JWT 是一种开放标准（RFC 7519），基于 JSON 格式来定义 Token 格式。它包含了一组声明，用于描述用户信息和权限。JWT 通常被用于前后端分离的应用程序。
   
2. OAuth Token：OAuth 是一种用于授权的开放标准，它通过令牌来实现授权。OAuth Token 用于授权第三方应用程序访问用户资源，实现第三方登录和授权功能。
   
3. Bearer Token：Bearer Token 是一种简单的 Token 类型，它通常作为 Authorization 头部的一部分发送给服务器，用于验证用户的身份和权限。
   

在使用 Token 的过程中需要注意以下安全性问题：

1. Token 过期：Token 应该有一个合理的过期时间，过期后需要重新获取 Token。
   
2. Token 存储：客户端需要妥善存储 Token，避免泄露给未授权的第三方应用程序。
   
3. Token 安全传输：Token 在传输过程中应该使用安全的加密方式，避免被中间人窃取。
   
4. Token 验证：服务器需要验证 Token 的有效性，确保 Token 是合法的。
   

总体而言，Token 是一种安全、高效的身份验证和授权方式，广泛应用于现代的Web应用程序和移动应用程序中。

22. SQL注入的概念以及防御

SQL注入是一种常见的安全漏洞，它发生在使用动态SQL语句的应用程序中。攻击者通过在用户输入的数据中插入恶意的SQL代码，从而使应用程序执行非预期的数据库操作，可能导致数据泄露、数据损坏或者非法访问数据库。

SQL注入的原理是由于应用程序在构建SQL查询时没有对用户输入的数据进行充分的验证和过滤，导致恶意的SQL代码被拼接到查询中。攻击者可以通过不同的手段构造恶意输入，比如输入一个SQL片段，绕过用户身份验证，执行恶意查询等。

为了防止SQL注入攻击，需要采取以下一些防御措施：

1. 使用参数化查询：参数化查询是将用户输入的数据作为参数传递给SQL查询，而不是直接将输入拼接到查询中。这样可以避免SQL注入攻击，因为数据库会将参数和查询内容分开处理，不会将输入视为SQL代码执行。
   
2. 输入验证和过滤：对用户输入的数据进行验证和过滤，确保只接受合法的输入。可以使用白名单机制，只允许特定的字符和格式。
   
3. 最小权限原则：在数据库的用户权限上，确保应用程序只拥有执行必要操作的最小权限，限制了对数据库的访问范围。
   
4. 错误处理：不要将数据库的错误信息直接返回给用户，可以对错误信息进行处理，只返回简洁的错误信息。
   
5. 使用ORM框架：使用ORM（对象关系映射）框架可以帮助自动执行参数化查询，避免手动拼接SQL字符串。
   
6. 安全编码实践：开发人员应该遵循安全编码实践，不信任任何用户输入，严格验证和处理用户输入的数据。
   
7. 定期更新和维护：及时更新和维护应用程序和数据库，确保已知的漏洞被修复。
   

通过以上防御措施，可以大大减少SQL注入攻击的风险，保护应用程序和数据库的安全性。

23.从输⼊ URL到⻚⾯加载发⽣了什么？

从输入URL到页面加载经历了以下主要步骤：

1. DNS解析：浏览器首先会对输入的URL进行DNS解析，将域名转换为IP地址。如果DNS缓存中有相应的记录，则直接使用缓存，否则将向DNS服务器发送请求进行解析。
   
2. TCP连接：浏览器与服务器建立TCP连接。TCP是一种可靠的传输协议，确保数据的完整性和可靠性。
   
3. 发起HTTP请求：浏览器向服务器发送HTTP请求。根据URL中的协议、域名、端口、路径等信息，构建HTTP请求报文，并发送给服务器。
   
4. 服务器处理请求：服务器接收到HTTP请求后，根据请求的内容和路径，处理请求，生成相应的HTTP响应。
   
5. 接收HTTP响应：浏览器接收到服务器返回的HTTP响应，包括状态码、响应头和响应体。
   
6. 解析HTML并构建DOM树：浏览器解析HTML响应，并构建DOM树。DOM树表示了HTML文档的层次结构，包括标签、元素和属性等信息。
   
7. 构建CSSOM树：浏览器解析CSS响应，构建CSSOM树。CSSOM树表示了CSS样式表的层次结构，包括样式规则和样式属性等信息。
   
8. 合并DOM树和CSSOM树，生成渲染树：浏览器将DOM树和CSSOM树合并，生成渲染树。渲染树只包含需要显示在页面上的元素和样式信息。
   
9. 布局（Layout）：根据渲染树，浏览器进行布局，确定每个元素在页面上的位置和大小。
   
10. 绘制（Painting）：根据布局结果，浏览器进行绘制，将页面内容绘制到屏幕上。
    
11. 加载其他资源：页面中可能包含其他资源，如图片、样式表、脚本等，浏览器会根据需要加载这些资源。
    
12. 执行JavaScript：如果页面中包含JavaScript代码，浏览器会执行这些代码，可能会对DOM树进行修改或触发其他请求。
    
13. 页面加载完成：当所有资源加载完成，页面渲染完成后，页面加载过程结束，用户可以正常访问和交互页面。
    

整个过程中，涉及到多个步骤的并行处理，以提高页面加载的效率和速度。

24.什么情况下会产生跨域，其实现原理？

跨域（Cross-Origin）指的是在浏览器中，当一个网页的源（域名、协议或端口）与正在访问的资源的源不一致时，就产生了跨域问题。浏览器出于安全考虑，限制了不同源之间的交互，以防止恶意网站获取用户的敏感信息或进行攻击。

产生跨域的常见情况有以下几种：

1. 不同域名：比如一个网页在www.example.com中访问了api.example.com中的资源。
   
2. 不同子域名：比如一个网页在sub1.example.com中访问了sub2.example.com中的资源。
   
3. 不同协议：比如一个网页在https://www.example.com中访问了http://www.example.com中的资源。
   
4. 不同端口：比如一个网页在www.example.com:8080中访问了www.example.com:3000中的资源。
   

实现跨域的原理主要是浏览器的同源策略（Same-Origin Policy）：

1. 协议、域名、端口必须一致：浏览器限制了只有当两个页面的协议、域名和端口都相同才属于同源。
   
2. 非同源限制：当两个页面不属于同源时，浏览器会限制页面之间的访问，包括Cookie、LocalStorage、IndexedDB等数据的读取，以及DOM操作的限制。
   

25.跨域怎么解决

跨域问题可以通过以下几种方式进行解决：

1. CORS（跨域资源共享）：CORS是一种标准的跨域解决方案。服务器端设置相应的响应头，允许指定的域名进行跨域访问。在服务器端设置Access-Control-Allow-Origin头来指定允许访问的域名。CORS支持各种HTTP请求，并且更加安全可靠。
   
2. JSONP：JSONP是一种利用<script>标签可以跨域加载资源的特性来实现跨域请求的方法。通过动态创建<script>标签，将数据作为回调函数的参数传递，从而实现跨域通信。但是JSONP只能用于GET请求，并且容易受到安全问题。
   
3. 代理：通过在服务器端设置代理，将跨域请求转发到目标服务器，然后将响应返回给客户端，实现跨域访问。这种方式可以在客户端不直接访问跨域的资源，而是通过服务器中转，解决跨域问题。
   
4. iframe：使用隐藏的iframe实现跨域通信。通过在页面中嵌入一个隐藏的iframe，将跨域的请求发送到iframe中，然后通过window.postMessage方法进行通信。
   
5. WebSocket：WebSocket协议本身支持跨域通信，可以在不同域名之间建立持久连接，实现双向通信。
   
6. Nginx反向代理：通过Nginx反向代理服务器，在同一个域名下转发请求，绕过跨域限制。
   

选择哪种方式取决于具体的场景和需求，CORS是目前最常用和推荐的跨域解决方案，但在某些情况下，其他方法也可能更适合。需要根据具体的业务需求和安全要求来选择合适的跨域解决方案。

26.cookie,localStorage和sessionStorage的区别

Cookie、localStorage和sessionStorage是前端常用的三种存储数据的方式，它们之间有以下区别：

1. 存储容量：

• Cookie：每个Cookie的大小一般限制在4KB左右，一个域名下的Cookie数量也有限制，通常为20个左右。
• localStorage：每个域名下localStorage的大小限制通常在5MB~10MB左右。
• sessionStorage：每个域名下sessionStorage的大小限制与localStorage相同，通常在5MB~10MB左右。

2. 数据有效期：

• Cookie：可以设置一个过期时间（expires），在过期时间之前有效，如果不设置过期时间，则默认为会话级别的Cookie，关闭浏览器后即失效。
• localStorage：永久保存，除非用户手动清除或代码删除，否则数据一直存在。
• sessionStorage：在当前会话（当前浏览器窗口）关闭后即失效，不会跨会话保存数据。

3. 与服务器端通信：

• Cookie：每次请求都会携带Cookie信息，会增加网络流量。
• localStorage和sessionStorage：仅在客户端存储，不会自动发送给服务器。

4. 作用域：

• Cookie：可以设置为特定的域名，也可以设置为整个域名下的所有子域名共享（通过设置domain属性）。
• localStorage和sessionStorage：只在当前域名下有效，不会跨域共享数据。

5. API简洁性：

• Cookie：使用document.cookie来读取和写入Cookie，操作相对复杂。
• localStorage和sessionStorage：提供了setItem、getItem、removeItem等简洁的API，操作更方便。

6. 安全性：

• Cookie：由于每次请求都会携带Cookie信息，如果Cookie被恶意获取，可能导致安全问题。
• localStorage和sessionStorage：由于数据只存在于客户端，不会自动发送给服务器，相对更安全。

综合来说，如果需要在客户端存储少量的非敏感数据，可以使用localStorage或sessionStorage。如果需要在客户端和服务器之间交换数据，或者需要设置过期时间的存储，可以使用Cookie。在实际使用中，根据具体的需求和场景来选择合适的存储方式。

27.JS的特性匹配实现流程

匹配实现流程是指在JavaScript中，通过使用特定的方法或技术来判断某个对象是否具有特定的特性或方法。下面是JS的特性匹配实现流程的一般步骤：

1. 检查对象是否存在：首先，需要检查要匹配的对象是否存在，可以通过typeof、instanceof等方式来检查对象是否已定义或是某个特定类型。
   
2. 检查对象的属性或方法：确定要匹配的特性或方法名，并检查对象是否具有该属性或方法。可以使用in运算符、hasOwnProperty()方法等来检查对象的属性。
   
3. 检查特性是否符合要求：如果对象具有要匹配的属性或方法，还可以进一步检查该特性是否符合要求。例如，检查特定函数的参数个数、检查数组是否为空、检查字符串是否符合特定的格式等。
   
4. 返回匹配结果：根据匹配的结果，返回相应的值或执行相应的操作。例如，返回true或false表示对象是否具有特定的特性，或执行特定的逻辑处理。
   

举例说明：

// 定义一个对象
const person = {
  name: 'Alice',
  age: 30,
  sayHello: function() {
    console.log('Hello!');
  }
};
// 实现流程：
// 1. 检查对象是否存在
if (person) {
  // 2. 检查对象的属性或方法
  if ('name' in person) {
    // 3. 检查特性是否符合要求
    if (typeof person.name === 'string') {
      console.log('person对象具有name属性，且值为字符串。');
    }
  }
  // 2. 检查对象的属性或方法
  if ('age' in person) {
    // 3. 检查特性是否符合要求
    if (typeof person.age === 'number') {
      console.log('person对象具有age属性，且值为数字。');
    }
  }
  // 2. 检查对象的属性或方法
  if ('sayHello' in person) {
    // 3. 检查特性是否符合要求
    if (typeof person.sayHello === 'function') {
      console.log('person对象具有sayHello方法。');
      // 4. 返回匹配结果
      person.sayHello(); // 调用sayHello方法
    }
  }
}

上述代码中，我们对一个名为person的对象进行特性匹配，首先检查person对象是否存在，然后检查它是否具有name、age和sayHello属性，并对这些特性进行进一步的检查和处理。

实际中，特性匹配的实现流程会根据具体需求和业务逻辑的复杂程度而有所不同，上述示例只是一个简单的演示。在实际开发中，我们根据实际情况灵活使用各种判断和方法来进行特性匹配。

28.如何处理IE兼容

处理IE兼容性问题是前端开发中常见的挑战，下面列出一些常用的方法来处理IE兼容性问题：

1. 使用CSS Hack：有些CSS属性在不同版本的IE中表现不同，可以使用CSS Hack来针对不同的IE版本提供不同的样式。但是使用CSS Hack并不是推荐的方法，因为它可能导致代码可读性差，并且不够优雅。
   
2. 使用条件注释：在HTML中可以使用条件注释来针对不同的IE版本提供不同的代码块。条件注释只在IE浏览器中生效，可以用于引入特定版本的CSS或JavaScript。
   
3. 使用CSS Reset：不同的浏览器对CSS样式有默认的设置，可能导致在不同浏览器中显示不一致。使用CSS Reset可以重置这些默认样式，确保在不同浏览器中显示一致。
   
4. 使用Polyfill和Shim：对于一些新的JavaScript API，在旧版本的IE中可能不被支持，可以使用Polyfill和Shim来提供类似的功能。
   
5. 使用Autoprefixer：Autoprefixer是一个自动添加CSS前缀的工具，它可以根据配置自动为CSS属性添加浏览器前缀，从而解决不同浏览器的兼容性问题。
   
6. 避免使用过时的特性：尽量避免使用过时的HTML、CSS和JavaScript特性，使用现代的标准和API来编写代码，从而减少兼容性问题。
   
7. 测试和调试：在开发过程中，及时进行测试和调试，尽量在多个IE版本下测试网页的表现，并针对性地解决出现的问题。
   
8. 使用IE兼容性库：有一些专门处理IE兼容性问题的库，例如HTML5shiv、Respond.js等，可以使用它们来提供对IE的支持。
   
9. 优雅降级和渐进增强：在设计和开发时，应采用优雅降级和渐进增强的策略，保证基本功能在所有浏览器中正常工作，再为现代浏览器提供更好的体验。
   
10. 使用现代的前端框架：现代的前端框架通常会处理大部分兼容性问题，使用这些框架可以减轻兼容性工作的负担。
    

总结来说，处理IE兼容性问题需要根据具体的项目和需求采取不同的方法，尽量避免使用过时的特性，使用现代的工具和框架，进行测试和调试，保证在各种浏览器中都能正常显示和工作。

29.IE8如何支持语义化标签

IE8是一个比较古老的浏览器版本，不支持HTML5中新增的语义化标签（例如<header>、<nav>、<section>、<article>、<aside>、<footer>等）。为了让IE8也能正确显示和处理这些标签，可以采取以下几种方法：

1. 使用HTML5shiv库：HTML5shiv是一个JavaScript库，可以让旧版本的IE（包括IE8）识别HTML5新增的语义化标签。在HTML文档的头部添加以下代码即可：

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<![endif]-->

2. CSS样式重置：由于IE8不认识HTML5的新标签，所以需要为这些标签添加CSS样式来确保它们正确显示。可以使用CSS样式重置来清除默认样式，并为新标签添加必要的样式。例如：

/* CSS样式重置 */
header, nav, section, article, aside, footer {
  display: block;
}

3. 替代方案：如果对于某些语义化标签在IE8上无法正确处理，可以考虑使用div和span等通用标签来实现相同的布局效果。虽然不如语义化标签直观，但在老旧的浏览器上能更好地兼容。

请注意，虽然上述方法可以让IE8支持语义化标签的显示，但并不能使IE8拥有完全的HTML5支持。为了获得更好的体验和性能，建议用户升级到支持HTML5的现代浏览器。

30.谷歌浏览器如何显示12px以下的字号

在谷歌浏览器（Chrome）中，通常情况下，如果字号设置为12px以下，会被自动调整为最小字号，以保证内容的可读性。这是为了遵循用户体验原则，确保在不同设备和屏幕尺寸下，文字都能够清晰可读。

如果你希望在谷歌浏览器中强制显示小于12px的字号，可以使用CSS的-webkit-text-size-adjust属性，该属性只对WebKit内核（包括Chrome和Safari）有效。不过需要注意，强制显示过小的字号可能导致文字模糊不清，影响用户体验。

以下是一个示例代码：

body {
  -webkit-text-size-adjust: none;
}

在上述代码中，-webkit-text-size-adjust: none;会禁止Chrome自动调整字号大小，使得小于12px的字号仍然保持原样。但请慎重使用该属性，确保文字的清晰可读性和用户体验。在实际开发中，建议使用合适的字号和布局来确保内容在不同设备和屏幕上都能良好显示。