前端面试题汇总大全 -- 持续更新！（二）

5、说说你对 SSG 的理解？

SSG（Static Site Generation，静态网站生成）是指在构建时预先生成静态页面，并将这些页面部署到 CDN 或者其他存储服务中，以提升 Web 应用的性能和用户体验。

具体来说，SSG 的实现方式通常包括以下几个步骤：

1. 在开发阶段，使用模板引擎等技术创建静态页面模板；
2. 将需要展示的数据从后台 API 中获取或者通过其他渠道获取，并将其填充到静态页面模板中，生成完整的 HTML 页面；
3. 使用构建工具（例如 Gatsby、Next.js 等）对静态页面进行构建，生成静态 HTML、CSS 和 JavaScript 文件；
4. 部署生成好的静态文件到服务器或者 CDN 上，以供用户访问。

相比于传统的动态网页，SSG 具有如下优势：

1. 加载速度快：由于不需要每次请求都动态地渲染页面，SSG 可以减少页面加载时间，从而提高用户体验和搜索引擎排名；
2. 安全性高：由于没有后台代码和数据库，SSG 不容易受到 SQL 注入等攻击；
3. 成本低：由于不需要动态服务器等设备，SSG 可以降低网站的运维成本和服务器负担。

需要注意的是，SSG 不适用于频繁更新的内容和动态交互等场景，但对于内容较为稳定和更新较少的网站则是一个性能优化的好选择。

6、从输入url，到页面的画面展示的过程？

1. 首先，在浏览器地址栏中输入url
2. 浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3. 在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
4. 浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
5. 握手成功后，浏览器向服务器发送http请求，请求数据包。
6. 服务器处理收到的请求，将数据返回至浏览器
7. 浏览器收到HTTP响应
8. 读取页面内容，浏览器渲染，解析html源码
9. 生成Dom树、解析css样式、js交互,渲染显示页面

浏览器下载HTML后，首先解析头部代码，进行样式表下载，然后继续向下解析HTML代码，构建DOM树，同时进行样式下载。当DOM树构建完成后，立即开始构造CSSOM树。理想情况下，样式表下载速度够快，DOM树和CSSOM树进入一个并行的过程，当两棵树构建完毕，构建渲染树，然后进行绘制。

浏览器安全解析策略对解析HTML造成的影响：

当解析HTML时遇到内联JS代码，会阻塞DOM树的构建，会先执行完JS代码;当CSS样式文件没有下载完成时，浏览器解析HTML遇到了内联JS代码，此时，浏览器暂停JS脚本执行，暂停HTML解析。直到CSS文件下载完成，完成CSSOM树构建，重新恢复原来的解析。

JavaScript 会阻塞 DOM 生成，而样式文件又会阻塞 JavaScript 的执行，所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件，使用不当会影响到页面性能的。

7、导致页面加载白屏时间长的原因有哪些，怎么进行优化？

1.白屏时间

白屏时间：即用户点击一个链接或打开浏览器输入URL地址后，从屏幕空白到显示第一个画面的时间。

2.白屏时间的重要性

当用户点开一个链接或者是直接在浏览器中输入URL开始进行访问时，就开始等待页面的展示。页面渲染的时间越短，用户等待的时间就越短，用户感知到页面的速度就越快。这样可以极大的提升用户的体验，减少用户的跳出，提升页面的留存率。

3.白屏-性能优化

DNS解析优化： 针对DNS Lookup环节，我们可以针对性的进行DNS解析优化。

• DNS缓存优化
• DNS预加载策略
• 稳定可靠的DNS服务器

TCP网络链路优化： 多花点钱吧

服务端处理优化： 服务端的处理优化，是一个非常庞大的话题，会涉及到如Redis缓存、数据库存储优化或是系统内的各种中间件以及Gzip压缩等…

浏览器下载、解析、渲染页面优化： 根据浏览器对页面的下载、解析、渲染过程，可以考虑一下的优化处理

• 尽可能的精简HTML的代码和结构
• 尽可能的优化CSS文件和结构
• 一定要合理的放置JS代码，尽量不要使用内联的JS代码
• 将渲染首屏内容所需的关键CSS内联到HTML中，能使CSS更快速地下载。在HTML下载完成之后就能渲染了，页面渲染的时间提前，从而缩短首屏渲染时间；
• 延迟首屏不需要的图片加载，而优先加载首屏所需图片（offsetTop
• document.documentElement.clientHeight//获取屏幕可视区域的高度
• element.offsetTop//获取元素相对于文档顶部的高度

因为JavaScript 会阻塞 DOM 生成，而样式文件又会阻塞 JavaScript 的执行，所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件，使用不当会影响到页面性能的。

8、了解过渐进式jpg吗？

渐进式 JPEG（Progressive JPEG），即PJPEG，是该标准的三种流行压缩模式之一。

渐进式 JPEG 以特定方式压缩照片和图形，与基线 JPEG 不同，PJPEG 在 Web 浏览器中呈现时，会首先给出模糊图像的外观。然后一点一点地开始图片渲染，直到它显示完全渲染的图像。浏览器实际上是逐行解释图像，但在占位符中提供了完整图像的模糊预览。随着 Web 浏览器的渲染引擎处理数据，图像的对比度开始变得更清晰、更详细。直到最后渲染完毕，用户将看到完整的清晰图像。

PJPEG 能够起到一种很有意义的心理效果，让用户有东西可看，而不必坐着干等大型图像慢慢显示在屏幕上。

PJPEG 适用于大部分常用的浏览器，包括 Chrome、Firefox 和 Internet Explorer 9 及更高版本。旧版本的 Internet Explorer 在显示渐进式 JPEG 时存在一些问题，不过这只是很小一部分用户。而不支持渐进式 JPEG 格式的浏览器会像普通 JPEG 一样加载照片。

9、前端跨页面通信，你知道哪些方法？

常见的跨页面通信方法有以下几种：

1.Window.postMessage()：

该方法允许在不同窗口间进行安全的跨域通信。该方法可以向指定的目标窗口发送消息，并在目标窗口的 window 对象上触发一个 message 事件。

2.LocalStorage/SessionStorage：

这两个 web 存储 API 可以在当前浏览器窗口的所有页面之间共享数据。如果一个页面设置了一个存储项，其他同源页面可以通过读取该存储项来访问相同的数据。

3.BroadcastChannel API：

该 API 允许在同一源下的多个浏览器标签页之间进行通信。该方法通过创建一个广播通道，将消息发送到该通道上，然后在其他页面上通过监听该通道上的 onmessage 事件来接收消息。

4.SharedWorker：

SharedWorker 是 HTML5 提供的一个跨页面共享数据的机制。它和普通的 Web Worker 相似，但与普通 Web Worker 不同的是，SharedWorker 不是为特定的页面或者文档服务的，而是为同一个源下的多个页面提供服务的。

除了上述方法外，还有一些第三方库和框架，如 EventEmitter、Socket.io 等，也可以用于实现跨页面通信，但这些方法可能需要更多的配置和使用成本。

对于同源页面，常见的方式包括：

• 广播模式：Broadcast Channe / Service Worker / LocalStorage + StorageEvent
• 共享存储模式：Shared Worker / IndexedDB / cookie
• 口口相传模式：window.open + window.opener
• 基于服务端：Websocket / Comet / SSE 等

而对于非同源页面：

• 则可以通过嵌入同源 iframe 作为“桥”，将非同源页面通信转换为同源页面通信。

10、src和href的区别？

src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系

• src

src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置，在请求 src 资源时会将其指向的资源下载并应用到文档内，例如is 脚本，img 图片和 frame 等元素

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将is 脚本放在底部而不是头部。

• href

href是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素(点)或当前文档(链接)之间的链接，如果在文档中添加

那么浏览器会识别该文档为 ss 文件，就会并行下载资源并且不会停止对当前文档的处理。 这也是为什么建议使2用 link 方式来加载 css，而不是使用@import 方式。

11、说说SEO是什么？

SEO（Search Engine Optimization），汉译为搜索引擎优化。

搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。

SEO是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，使网站更适合搜索引擎的索引原则的行为。

12、img的srcset属性的作用？

响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性，srcset属性用于设置不同屏幕密度下，img 会动加不同的图片。用法如下:

<img src="image-128.png" srcset="image-256.png 2x" />

使用上面的代码，就能实现在屏密度为1x的情况下加载image-128.png,屏幕密度为2x时加载image-256.pnq.

按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有1x2x,3x4X四种，如果每一个图片都设置4张图片，加载就会很慢，所以就有了新的srcset标准。代码如下:

<img src="image-128.png" srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"sizes="(max-width: 360px) 340px, 128px” />

其中srCset指定图片的地址和对应的图片质量，sizes用来设置图片的尺寸零界点。对于 scset 中的 w 单位，可以理成图片质量，如果可视区域小于这个质量的值，就可以使用。浏览器会自动选择一个最小的可用图片。

sizes语法如下:

sizes="[media query] [length],[media query] [length] …

sizes就是指默认显示128px,如果视区宽度大于360px,则显示340px。

13、常用的meta标签有哪些？

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比网页的作者，网页达，关捷等，除了HTTP标准国定了 name 作为大家使用的共识,开发者还可以自定义name;

常用的meta标签:

1.charset，用来描述HTML文档的编码类型

<meta charset="UTF-8”>

2.keywords ，页面关键词:

<meta name="keywords” content="关键词” />

3.description，页面描述:

<meta name="description” content="页面描述内容”/>

4.refresh ，页面重定向和刷新:

<meta http-equiv="refresh" content="@;url=" />

5.viewport ，适配移动端，可以控制视口的大小和比例:

<meta name="viewport" content="width=device-width, initial-scale=l, maximum-scale=1">

其中， content 参数有以下几种:

• width viewport : 宽度(数值/device-width)
• height viewport : 高度(数值/device-height)
• initial-scale : 初始缩放比例maximum-scale : 最大缩放比例
• minimum-scale : 最小缩放比例9
• user-scalable : 是否允许用户缩放(yes/no)

6.robots，搜索引擎索引方式：

<meta name="robots" content="index,follow" />

其中，content 参数有以下几种：

• all：文件将被检索，且页面上的链接可以被查询；
• none：文件将不被检索，且页面上的链接不可以被查询；
• index：文件将被检索；
• follow：页面上的链接可以被查询；
• noindex：文件将不被检索；
• nofollow：页面上的链接不可以被查询。