2023前端面试

小菜鸟一只呀

于 2023-07-28 16:38:08 发布

阅读量145

点赞数 1

文章标签：前端面试 javascript

本文链接：https://blog.youkuaiyun.com/m0_57082876/article/details/131844784

版权

类数组与数组主要区别在于类型和原型，转换方法包括Array.from()、扩展运算符和slice.call()。服务器端渲染（SSR）提高首屏加载速度和SEO，涉及请求处理、服务器渲染、数据注入和客户端接管等步骤。HTTPS相比HTTP更安全，需证书且端口不同。Vue的事件修饰符如prevent、stop和once等提供额外控制。SEO解决方案包括预渲染和Nuxt.js服务端渲染，各有适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1类数组和数组的区别，dom 的类数组如何转换成数组

类数组（Array-like）和数组（Array）都是用于存储多个值的数据结构，但它们之间存在一些关键区别：

类型：数组是JavaScript的内置对象类型，继承自Array.prototype，具有一系列数组方法（如push()、pop()、map()等）。类数组是普通的对象，其属性名为索引（如0、1、2等），具有一个length属性，但不具备数组的方法。
原型：数组的原型为Array.prototype，因此具有数组的所有方法。类数组的原型通常为Object.prototype，并不包含数组的方法。
要将DOM的类数组（例如，通过document.getElementsByClassName()或document.querySelectorAll()获取的元素集合）转换为数组，可以使用以下方法之一

(1)使用Array.from()方法：

let nodeList = document.querySelectorAll('div');
let array = Array.from(nodeList);

(2)使用扩展运算符（Spread Operator）：

let nodeList = document.querySelectorAll('div');
let array = [...nodeList];

(3)使用Array.prototype.slice.call()：

let nodeList = document.querySelectorAll('div');
let array = Array.prototype.slice.call(nodeList);

SSR的实现原理

服务器端渲染（Server Side Rendering，简称 SSR）是一种 web 应用的渲染方式，其实现原理是在服务器端将页面内容渲染为 HTML 字符串，然后将这些字符串发送到客户端，客户端接收到 HTML 后直接显示，无需等待 JavaScript 的解析、执行和渲染。

SSR 的核心实现原理可以概括为以下几个步骤：

请求处理：客户端发起请求时，请求首先到达服务器。
服务器渲染：服务器接收到请求后，根据路由和数据，将对应的页面内容渲染为 HTML 字符串。这一步通常涉及到模板引擎或服务器端 JavaScript 框架的使用，例如 React 的 ReactDOMServer.renderToString() 和 Vue 的 vue-server-renderer。
数据注入：在渲染过程中，服务器还需要获取所需的数据，将其注入到 HTML 中。这可以通过内联脚本、JSON 格式或其他方式实现。数据注入的目的是在客户端 JavaScript 代码运行时能够获取到服务器端已经准备好的数据，避免重复请求。
生成完整 HTML：将渲染好的 HTML 字符串插入到 HTML 模板中，形成一个完整的 HTML 页面。这个页面包含了已经渲染好的内容以及必要的 JavaScript、CSS 等资源引用。
发送响应：服务器将完整的 HTML 页面作为响应发送给客户端。客户端接收到响应后，直接将 HTML 页面展示给用户。
客户端接管：在客户端，浏览器会解析和执行 JavaScript 代码，接管页面的交互和操作。这一步通常被称为 "hydration" 或 "激活"，因为客户端 JavaScript 代码需要 "激活" 服务器端渲染的静态 HTML，使其具有动态功能。

通过 SSR，用户可以更快地看到页面的内容，因为无需等待客户端的 JavaScript 代码下载、解析、执行和渲染。此外，由于搜索引擎爬虫能够更好地解析服务器端渲染的 HTML，因此 SSR 对 SEO 也有一定的优势。然而，SSR 也会增加服务器的负担，因为服务器需要负责渲染页面。在实际应用中，可以根据项目需求和性能要求，选择合适的渲染方式。