KlayPeter的学习博客

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

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

  1. LocalStorage或者SessionStorage
  2. Cookies
  3. PostMessage
  4. Broadcast Channel
  5. SharedWorker
  6. IndexedDB
  7. WebSockets

# 说说你对DOM树的理解？

CSSOM树和DOM树是同时解析的吗？

# 说说你对SSG的理解

（Static Site Generation，静态网页生成）

实现步骤：

  1. 再开发阶段使用模板引擎等技术创建静态页面模板
  2. 将需要展示的数据从后台API进行获取然后将其填充到静态页面模板中
  3. 使用构建工具对静态页面进行构建，生成静态HTML、css、js等
  4. 部署好的静态文件到服务器或者CDN上，已供用户访问

加载速度快，不用每次请求都动态渲染页面，减少页面加载时间从而提高用户的体验

安全性能高，没有后台代码和数据库

成本低：不用动态服务器等降低网站运维成本和服务器负担

但是SSG不适用于频繁更新的和动态交互等场景

# 什么是HTML5

新规范

# 什么是渐进增强和优雅降级？

渐进增强

主要对针对低版本的浏览器进行页面重构，保证基本功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验

优雅降级

一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容

# Node和Element是什么关系？

继承关系

Element继承于Node，其实很明显就是Node是也给基类，DOM中的Element、Text和Comment都继承于它。换句话说，是三种特殊类型的Node，分别叫做：ELEMENT_NODE，TEXT_NODE，和COMMENT_NODE

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

白屏 = 用户在输入 URL → 页面内容渲染出来之前的时间差。 它涉及浏览器渲染链路的每一个环节，从网络请求到资源加载再到 JS 执行。

页面白屏时间长可能来自 网络请求慢、资源加载阻塞、JS 执行耗时和服务器响应慢。

优化思路分为四块：网络优化（CDN、HTTP/2、缓存）、资源优化（代码分割、懒加载、关键 CSS 内联）、渲染优化（SSR、骨架屏、虚拟列表）、服务端优化（TTFB、接口缓存）。 这样既能降低白屏时间，又能提升用户体验。

# 点击返回顶部的功能

# 关于SEO

SEO（Search Engine Optimization，搜索引擎优化）： 通过技术手段和内容优化，让页面更容易被搜索引擎收录、排名更靠前，从而获得更多自然流量。

# SEO 的核心原理

爬虫抓取

  • 搜索引擎会派爬虫（Spider）访问网站，读取 HTML、链接、资源。
  • 如果是单页应用（SPA），首屏 HTML 只有一个 div#app，爬虫获取不到有效内容 → SEO 不友好。

索引建立

  • 搜索引擎会把抓取到的内容存入数据库，并根据语义、关键词、链接关系做索引。

排名算法

  • 通过关键词匹配、权重、内容质量、外链等维度综合计算排名。

# 影响 SEO 的主要因素

影响 SEO 的主要因素有 内容相关性、页面结构、性能、可爬取性和外部链接。

# 前端层面的 SEO 优化方法

HTML 语义化

  • 正确使用 <h1>、<p>、<nav>、<article> 等语义标签。
  • 给图片加 alt 属性，方便搜索引擎识别。

元信息优化

  • <title>：简洁、包含核心关键词。
  • <meta name="description">：页面摘要。
  • <meta name="keywords">（现代搜索引擎作用不大，但可写）。
  • Open Graph（OG 协议）：优化分享效果。

链接优化

  • URL 简洁，尽量静态化（/article/123 优于 /index.php?id=123）。
  • 内部链接合理（面包屑导航）。

性能优化（对 SEO 有直接影响）

  • 加快首屏渲染：SSR、预渲染（Prerender）。
  • 图片懒加载（loading="lazy"），但注意关键内容不要延迟加载。
  • 使用 CDN，减少 TTFB。

SPA 应用的 SEO 优化

  • SSR（服务端渲染）：如 Next.js、Nuxt.js。
  • 预渲染（Prerendering）：构建时生成静态 HTML。
  • 动态渲染（Dynamic Rendering）：检测到爬虫请求时返回静态 HTML，用户正常访问返回 SPA。

移动端优化

  • 响应式设计（适配不同设备）。
  • 提升移动端加载速度（AMP 技术、PWA）。

# HTML拖拽

HTML5 提供原生的 Drag and Drop（拖拽）API，基于 DOM 事件和 DataTransfer 对象实现。核心是把元素设为 draggable="true"，通过 dragstart/dragover/drop 等事件传递数据并控制放置行为。它适合简单的可拖放交互（比如文件拖入、列表排序），但原生 API 在移动端支持差且在复杂交互上不够灵活，常用 pointer/mouse/touch 或第三方库替代

<!-- HTML -->
<div id="item" draggable="true">拖我</div>
<div id="dropzone" style="width:200px;height:120px;border:1px solid #ccc">放这里</div>

<script>
const item = document.getElementById('item');
const drop = document.getElementById('dropzone');

item.addEventListener('dragstart', e => {
  e.dataTransfer.setData('text/plain', 'hello'); // 传数据
  e.dataTransfer.effectAllowed = 'move';
  item.classList.add('dragging');
});

drop.addEventListener('dragover', e => {
  e.preventDefault(); // 必需：允许 drop
  e.dataTransfer.dropEffect = 'move';
});

drop.addEventListener('drop', e => {
  e.preventDefault();
  const data = e.dataTransfer.getData('text/plain');
  drop.textContent = '接收到：' + data;
});

item.addEventListener('dragend', () => {
  item.classList.remove('dragging');
});
</script>

# 浏览器乱码是什么原因？

  • 字符编码不对，网页源代码是gbk的而内容中文字是utf-8的，会出现html乱码

  • 数据库和网页的编码对不上

  • 浏览器不能自动检测网页编码，造成网页乱码

# 浏览器如何对HTML5的离线储存资源进行管理和加载？

# HTML5 离线存储（Application Cache）

涉及到一个manifest

manifest是离线缓存清单文件，扩展名一般是.appcache

在HTML中通过<html manifest="demo.appcache">来指定

浏览器会读取这个文件把里面定义的资源存储到本地

HTML 离线存储怎么使用？

HTML 页面声明：

<!DOCTYPE html>
<html manifest="demo.appcache">
<head>
  <title>离线存储示例</title>
</head>
<body>
  <h1>Hello Offline</h1>
  <img src="logo.png" />
</body>
</html>

编写manifest文件

CACHE MANIFEST
# 版本号 v1.0

CACHE:
index.html
style.css
app.js
logo.png

NETWORK:
*

FALLBACK:
/ /offline.html

CACHE: 列出的资源会被缓存。

NETWORK: 表示必须联网加载的资源（这里 * 表示所有其他资源必须联网）。

FALLBACK: 表示当某资源无法加载时，使用备用资源。

工作原理

首次访问页面时

  • 浏览器会下载 manifest 文件并解析，把里面列出的资源缓存到本地。

再次访问页面时（即使离线）

  • 浏览器会直接读取缓存中的资源，而不是请求服务器。

更新机制

  • 只有当 manifest 文件本身发生变化（比如加个空格或修改版本号），浏览器才会重新下载并更新缓存资源。
  • 如果 manifest 没有改，页面会一直使用旧缓存。

manifest 的缺点（所以现在不用了）

  • 更新机制太死板，开发者必须手动改 manifest 才能触发更新。
  • 很容易出现缓存过期问题（用户拿到的资源是旧的）。
  • 控制能力差，所以被 Service Worker + Cache API 取代。

# 现代的方案：

PWA + Service Worker + Cache API

原理

  • 浏览器支持 Service Worker：一个独立运行在后台的线程，可以拦截网络请求。
  • 通过 Cache Storage API 把资源（HTML/CSS/JS/图片等）存到本地。
  • 每次加载页面时，Service Worker 会优先检查本地缓存，命中则直接返回，否则再发起网络请求。

缓存策略（面试加分点）

  • Cache First：先读缓存，没命中再请求网络（适合静态资源）。
  • Network First：先请求网络，失败时才用缓存（适合新闻、数据）。
  • Stale-While-Revalidate：先返回缓存，同时后台去更新缓存（性能和实时性兼顾）。

资源管理

  • 浏览器按 域名 + Cache 名字 进行存储隔离。
  • 开发者可以在 Service Worker 里通过 caches.open() 和 cache.put() 精确控制。
  • 资源更新时，可以通过版本号或 hash 来清理旧缓存。

# 页面生命周期

浏览器页面从加载到卸载大致有这些阶段：

  • 加载：解析HTML

  • DOMContentLoaded：DOM 树构建完成。适合操作DOM

  • load：所有资源加载完成。适合页面初始化逻辑

  • beforeunload：刷新或关闭前触发，可以用来提示用户是否确认离开，常用于防止表单数据丢失

  • unload/pagehide：页面卸载。 此外还有 visibilitychange 事件，可以监听页面是否可见。

HTML 解析开始
   ↓
DOMContentLoaded （DOM 树构建完成）
   ↓
load （所有资源加载完成）
   ↓
页面运行中（可能切换 tab → visibilitychange）
   ↓
beforeunload （刷新/关闭前提示）
   ↓
unload/pagehide （页面卸载）

# 页面统计数据中，常用的PV、UV指标分别是什么？

PV（页面访问量）

即页面浏览量或点击量，用户每1次对网站中的每个网页访问均被记录1个PV

用户对同一个页面的多次访问，访问量累计

UV（独立访客）

指通过互联网访问、浏览这个网页的自然人。访问您网站的一台电脑客户端为一个方可，00:00 - 24:00 内相同的客户端只会被计算一次

# meta标签的元素有什么？

<meta> 标签主要用来描述网页信息。常见的有：

  • charset 定义编码；
  • viewport 控制移动端适配；
  • name/description/keywords 用于 SEO；
  • http-equiv 可以模拟 HTTP 头，比如跳转、CSP；
  • 还有一些移动端优化的 meta，比如 theme-color、apple-mobile-web-app-capable。

# 页面导入样式时，使用Link和@import有什么区别？

Link就是标签，

@import js中导入

# iframe是什么？有哪些优缺点？

<iframe> （inline frame）是 内联框架，用来在一个页面中嵌入另一个独立的 HTML 页面。

<iframe src="https://example.com" width="600" height="400"></iframe>

优点是解耦、复用、安全隔离，常用于嵌入第三方内容；缺点是性能差、SEO 不友好、交互不便，现在更多用组件化或微前端来替代。

微前端（Micro Frontends）

微前端是一种架构思想，把一个完整的大型前端应用拆分成多个相对独立的“小应用”（子应用），每个子应用可以独立开发、部署和运行，最终在主应用中整合

# 谈谈canvas

# 什么是HTML语义化？

就是从代码上展示页面的结构，而不是从最终视觉上来展示

良好的语义化代码能直接从代码上就能看出来那一块到底是要表达什么内容

语义化的优点：

  • 构架良好的HTML结构，有利于SEO检录索引、爬取
  • 利于不用设备的解析

# script标签中，async和defer两个属性有什么区别？

defer

浏览器会异步下载该文件并且不会影响后续DOM的渲染，多个的话会按照时机，是在DOMContentLoaded时间调用前执行

async

async属性会使得script脚本异步加载并在允许的情况下执行，不回按照顺序来，谁先加载完谁先执行

css面试