概念

Q1：html为什么要语义化

难度：⭐

答案

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。

标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说。
有利于不同设备的解析（屏幕阅读器，盲人阅读器等）
有利于构建清晰的机构，有利于团队的开发、维护

Q2：html、xml、xhtml有什么区别？

难度：⭐

解析

HTML（Hypertext Markup Language）：
- HTML 是一种标记语言，用于描述网页的结构。
- HTML 4 是最早的 HTML 版本，主要基于 SGML（Standard Generalized Markup Language）。
- HTML 5 是最新版本，引入了很多新特性，如语义元素、多媒体支持、本地存储等。
XML（eXtensible Markup Language）：
- XML 是一种通用的标记语言，设计用于传输和存储数据。
- XML 强调文档的结构和数据的独立性，没有预定义的标签，允许用户定义自己的标签。
- XML 用途广泛，用于配置文件、数据交换、Web 服务等。
XHTML（eXtensible Hypertext Markup Language）：
- XHTML 是 HTML 的一个基于 XML 的扩展，属于 XML 家族的一部分。
- XHTML 1.0 是在 HTML 4 的基础上以 XML 语法进行了改进，更加严格，要求标签闭合、小写等。
- XHTML 2.0 曾经是 W3C（World Wide Web Consortium）提出的标准，但由于缺乏支持，未被广泛采用。目前 HTML5 已经成为主流标准，XHTML 2.0 的发展被中止

答案

特性	HTML	XML	XHTML
语法严谨性	容错性较强，允许一些不规范写法	强调 XML 的语法规范，要求严格	强调 XML 的语法规范，要求标签闭合
文档结构	用于描述网页结构和展示	用于传输和存储数据，无预定义标签	在 HTML 的基础上以 XML 语法改进
应用领域	用于构建网页和 Web 应用	用于数据传输、配置文件等	-
发展历史	HTML 4 是基于 SGML 的第四版	独立发展，由 W3C 制定	XHTML 是 HTML 的 XML 版本

HTML 用于构建网页结构，XML 用于数据传输和存储，而 XHTML 是 HTML 在语法上更加严谨的版本

HTML5 成为了当前主流的标准，对之前 HTML 和 XHTML 的差异进行了一些调和

Q3：渐进式jpg了解过吗？

难度：⭐

答案

渐进式 JPEG（Progressive JPEG）是一种渐进式加载的 JPEG 图像格式。与标准的基线 JPEG 不同，渐进式 JPEG 允许图像在加载过程中逐渐呈现出更清晰的图像效果。这对于网络上的图像加载来说具有一定的优势。

以下是渐进式 JPEG 的一些特点和优势：

逐步加载： 渐进式 JPEG 可以通过在图像文件中存储多个扫描（scans）来实现逐步加载。这意味着浏览器可以在图像加载的早期阶段显示模糊或低分辨率的预览图像，并随着更多的数据加载而逐渐提高清晰度。
用户体验： 渐进式加载改善了用户体验，因为用户可以在图像加载的过程中逐渐看到图像变得更加清晰。这对于网速较慢的情况下尤为有益。
渐进式渲染： 渐进式 JPEG 不仅仅对整体图像进行渐进加载，而且对每个扫描的图像部分也可以逐步渲染。这使得即使在整个图像加载之前，用户也能够看到部分图像的内容。
网络效率： 对于一些网络情况，渐进式 JPEG 可以提供更好的表现，因为它在整个图像数据未完全加载之前就能够呈现图像的初步效果。

Q4：什么是渐进增强跟优雅降级？

难度：⭐⭐

答案

渐进增强（Progressive Enhancement） 和 优雅降级（Graceful Degradation） 是两种前端设计方法，用于处理不同浏览器或设备环境下的网页性能和用户体验。

渐进增强（Progressive Enhancement）：
- 渐进增强的理念是从一个基本但足够功能完备的版本开始，然后逐步增加功能，以适应更先进的浏览器或设备。
- 在渐进增强中，首先确保网站的核心功能在所有环境中都能正常工作，然后针对支持更高级特性的环境，逐步添加额外的样式、交互和功能。
- 这种方法强调基本内容的可访问性和可用性，确保用户在任何环境中都能够获得核心体验。
优雅降级（Graceful Degradation）：
- 优雅降级的理念是先创建一个功能丰富的网站，然后逐步适应较低级别的浏览器或设备。
- 在优雅降级中，首先针对先进的浏览器或设备构建丰富的用户体验，然后通过适应性和后备方案，确保在不支持这些特性的环境中仍然提供合理的用户体验。
- 这种方法关注的是高级浏览器或设备上的最佳体验，但确保在较低级别的环境中仍然能够提供某种形式的功能。

总结：

渐进增强着眼于基本功能，通过逐步增加特性来提高用户体验，确保在所有环境中都能正常运行。
优雅降级则从一个功能丰富的网站开始，逐步适应较低级别的环境，以确保在先进环境中提供最佳体验。

width=device-width——将页面宽度设置为跟随屏幕宽度变化而变化 

initial-scale=1.0——设置浏览器首次加载页面时的初始缩放比例(0.0-10.0正数) 

maximum-scale=1.0——允许用户缩放的最大比例(0.0-10.0正数)，必须大于等于minimum-scale 

minimum-scale=1.0——允许用户缩放的最小比例(0.0-10.0正数)，必须小于等于maximum-scale 

user-scalable=no——是否允许用户手动缩放(yes或者no)

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

generator——包含生成页面软件的标识符
1
<meta name="generator" content="Hexo 3.8.0">

theme-color——定义主题颜色

1	<meta name="theme-color" content="#222">

http-equiv & content
Provides an HTTP header for the information/value of the content attribute

refresh——每30s刷新一次文档

1	<meta http-equiv="refresh" content="30">

X-UA-Compatible——告知浏览器以何种版本渲染界面。下面的例子有限使用IE最新版本
1
<meta http-equiv="X-UA-Compatible" content="ie=edge">
Cache-Control——请求和响应遵循的缓存机制，可以声明缓存的内容，修改过期时间，可多次声明
1
2
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
property & content
可以让网页成为一个富媒体对象，同意网页内容被其他网站引用，同时在应用的时候不会只是一个链接，会提取相应的信息展现给用户
1
2
3
<meta property="og:type" content="website">
<meta property="og:url" content="https://zjgyb.github.io/index.html">
<meta property="og:site_name" content="tony's blog">

Q2：如何关闭a标签跳转页面或定位链接

难度：⭐⭐

答案

标签属性href，使其指向空或不返回任何内容

1
2
3

<a href="javascript:void(0);" >点此无反应javascript:void(0)</a>

<a href="javascript:;" >点此无反应javascript:</a>

从标签事件入手，阻止其默认行为

html方法

1 2	<a href="" onclick="return false;">return false;</a> <a href="#" onclick="return false;">return false;</a>

js阻止默认点击事件
1
Event.preventDefault()
css
1
pointer-events: none;

Q3：canvas元素在标签上面设置宽高跟在style里面设置宽高有什么区别

难度：⭐

答案

canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面

而style的width和height是canvas在浏览器中被渲染的高度和宽度

如果canvas的width和height没指定或值不正确，就被设置成默认值

Q4：iframe是什么？有哪些优缺点

难度：⭐

答案

iframe 是 HTML 中的一个元素，用于在页面中嵌套另外一个 HTML 文档。iframe 表示内联框架（Inline Frame）

优点	内容
嵌套内容	最明显的优势是允许将一个 HTML 文档嵌套到另一个中。这对于在页面中显示其他网页、广告、地图等内容非常有用
并行加载	`iframe` 允许页面异步加载，因为它的内容可以在主页面加载的同时加载
独立文档	`iframe` 中的内容是独立的文档，它有自己的 HTML、CSS 和 JavaScript，不受主页面的影响，这有助于实现一些模块化的设计
实现跨域通信	在某些情况下，`iframe` 可以用于实现跨域通信，尤其是在同源策略限制的情况下

缺点	内容
性能问题	使用过多的 `iframe` 可能会影响页面性能，因为每个 `iframe` 都需要加载和渲染独立的文档
难以维护	`iframe` 中的内容是独立的，可能需要单独维护。在大型应用中，过多的 `iframe` 可能导致代码维护变得复杂
SEO 难度	搜索引擎可能不会对 `iframe` 中的内容进行索引，这可能对网站的搜索引擎优化产生影响
安全性问题	如果 `iframe` 中的内容来自不受信任的来源，可能存在安全风险。点击劫持和其他安全漏洞可能成为问题
不适用于移动端	在移动端设备上，`iframe` 的使用可能不太友好，因为它可能导致滚动问题和触摸事件的不一致性

Q5：DOCTYPE标签有什么用

难度：⭐

答案

DOCTYPE（文档类型声明）是一种用于指定 HTML 或 XML 文档类型和版本的标签。它位于文档的开头，位于 <html> 标签之前。DOCTYPE 帮助浏览器正确地解析文档，确保在渲染页面时采用正确的标准

HTML5 推荐使用简化的 <!DOCTYPE html>，而不再需要详细指定版本和 DTD（文档类型定义）

1	<!DOCTYPE html>

主要用途
指定文档类型	`DOCTYPE` 声明告诉浏览器使用哪个 HTML 或 XML 规范来解析文档。不同的文档类型可能有不同的规范，如 HTML4、HTML5 等
影响浏览器渲染模式	`DOCTYPE` 声明可以触发不同的渲染模式，例如怪异模式（Quirks Mode）和标准模式（Standards Mode）。在标准模式下，浏览器会更严格地遵循规范，而在怪异模式下，会模拟更早期的浏览器行为

Q6：html标签中测src跟href有什么区别

难度：⭐

解析

src 属性：
- src 是 “source”（源）的缩写，主要用于指定外部资源的地址，如图像、音频、视频或嵌入的框架（如 <iframe>）等。
- 用于标签如 <img>、<script>、<iframe> 等，用来指定这些元素加载的外部资源。
1
2
3
<img src="image.jpg" alt="Image">
<script src="script.js"></script>
<iframe src="page.html"></iframe>
href 属性：
- href 是 “hypertext reference”（超文本引用）的缩写，主要用于创建超链接，指定链接的目标地址。
- 通常用于 <a>（锚点）、<link>（外部样式表）、<area>（图像映射区域）等标签。
1
2
3
<a href="https://www.example.com">Visit Example</a>
<link rel="stylesheet" href="styles.css">
<area shape="rect" coords="34,44,270,350" href="page.html">

答案

区别	src	href
用途	用于指定元素加载的外部资源	用于创建超链接，指定链接的目标地址
标签适用性	通常用于嵌入的元素，如图像、脚本、框架等	通常用于创建超链接，指定链接的目标地址
加载方式	使用 `src` 的元素通常会加载并显示指定的资源	使用 `href` 的元素通常会创建一个超链接，用户可以点击跳转到指定的目标

Q7：html5有哪些新特性，分别有什么作用

难度：⭐

答案

特性	作用
语义元素	引入了新的语义化元素，如 `<header>`、`<footer>`、`<article>`、`<nav>` 等，使页面结构更清晰，对搜索引擎友好。
Canvas 绘图	`<canvas>` 元素提供了一种通过 JavaScript 绘制图形的方法，用于创建图表、游戏等动态图形。
本地存储	引入了 `localStorage` 和 `sessionStorage`，用于在客户端存储数据，提供更好的离线应用体验。
表单增强	新的表单输入类型（如 `date`、`email`、`number`）和属性（如 `placeholder`、`required`），提供更好的表单交互和验证。
新的 API	引入了一系列新的 JavaScript API，如 Geolocation、Web Workers、WebSocket 等，增强了 Web 应用的功能。
拖放 API	提供了用于处理拖放操作的 API，使用户界面的实现更直观，包括拖放元素和文件。
新的解析规则	新的解析规则使浏览器能够更容易地处理不规范的文档，提高了容错性。
Web 存储	提供了 `localStorage` 和 `sessionStorage`，用于在客户端存储键值对，代替传统的 Cookie。
Web Workers	允许在后台运行脚本，提高了 Web 应用的性能，允许执行耗时操作而不影响用户界面的响应。
WebSocket	提供了全双工通信通道，使客户端和服务器能够进行实时通信，用于实现实时更新和通知。
跨文档消息通信	提供了 `postMessage` 方法，用于在不同文档或窗口之间进行安全的跨域通信。
新的表格元素	引入了 `<thead>`、`<tbody>`、`<tfoot>`、`<th>` 等新的表格元素，提高了表格的语义化和可访问性。
动态页面更新	通过新增的 `pushState()` 和 `replaceState()` 方法，使得在不刷新页面的情况下更新浏览器地址栏和历史记录成为可能，支持单页面应用（SPA）。
拍照和摄像	增加了 `<input type="file" accept="image/*" capture="camera">`，支持通过移动设备的摄像头直接拍照或录制视频。
WebRTC	Web 实时通信技术，支持浏览器之间的实时音频、视频和数据传输，用于实现视频会议和在线聊天等应用。
模块化脚本	支持使用 `type="module"` 的 `<script>` 标签，使得脚本文件可以以模块的方式加载，提高代码的可维护性和复用性。
新的媒体元素属性	`<audio>` 和 `<video>` 元素新增了一些属性，如 `controls`、`autoplay`、`loop`，方便对音频和视频进行控制。
自定义数据属性	`data-*` 属性可以用于在 HTML 元素上存储自定义数据，提供了一种灵活的方式来与 JavaScript 进行交互。
图形和效果	引入了一些新的图形和效果元素，如 `<svg>`（用于矢量图形）、`<canvas>`（用于位图图形）、`<progress>`（用于显示任务进度）等。
ContentEditable	允许用户编辑页面内容，可用于实现富文本编辑器等功能。
改进的表单控件	新的输入类型和属性，如 `color`、`range`、`placeholder`、`required` 等，提升了表单的交互体验。
Shadow DOM	允许将元素的样式和行为封装到独立的作用域中，用于创建可重用的自定义组件。
Web Components	一组标准化的 Web 技术，包括 Shadow DOM、Custom Elements、HTML Templates 等，用于创建可重用的自定义组件。

Q8：标签上的title跟alt属性有什么区别

难度：⭐

解析

title 属性：
- 通常用于 <a>、<abbr>、<img>、<iframe>、<input>、<area>、<base>、<button> 和 <td> 等元素。
- 提供有关元素的附加信息，通常通过浏览器的工具提示（tooltip）显示。
- 在链接中，title 属性可以提供与链接关联的描述，以提供更多信息给用户。
  示例：
  1
  2
  <a href="https://www.example.com" title="Visit Example Website">Click here</a>
  <img src="example.jpg" alt="Example Image" title="This is an example image">
alt 属性：
- 主要用于 <img>、<area> 和 <input>（type=”image”）等元素，用于提供图像的替代文本。
- 当图像无法加载时，alt 属性的文本将被显示，同时对于一些辅助技术，如屏幕阅读器，也提供了对图像的描述。
- 在表单中的图像按钮，alt 属性还可以用作提交表单时的值。
  示例：
  1
  2
  <img src="example.jpg" alt="Example Image">
  <input type="image" src="submit.png" alt="Submit Form">

答案

alt 是为了在图片未能正常显示时（屏幕阅读器）给予文字说明。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

title 属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息

Q9：行内元素有哪些？块级元素有哪些？空元素有哪些？

难度：⭐⭐

答案

行内元素（Inline Elements）：

<span> - 用于在行内包裹文本或其他行内元素。
<a> - 行内超链接。
<strong> - 表示强调的文本，通常显示为加粗。
<em> - 表示强调的文本，通常显示为斜体。
<img> - 行内图片。
<br> - 换行。
<abbr> - 缩写。
<code> - 行内代码。
<cite> - 引用标题。
<time> - 表示时间。

块级元素（Block-level Elements）：

<div> - 用于组合其他 HTML 元素的容器。
<p> - 段落。
<h1> to <h6> - 标题。
<ul> - 无序列表。
<ol> - 有序列表。
<li> - 列表项。
<table> - 表格。
<form> - 表单。
<header> - 头部区域。
<footer> - 底部区域。

空元素：

空元素是指没有内容的元素，通常是自闭合的元素，不需要闭合标签。

<img> - 行内图片。
<br> - 换行。
<hr> - 水平线。
<input> - 输入框。
<meta> - 元信息。

需要注意的是，虽然 <img> 和 <input> 等元素在 HTML 中被认为是行内元素，但它们是空元素，因为它们通常是自闭合的，没有内容。

Q10：meta标签中的viewport有什么用

难度：⭐⭐

答案

标签中的 viewport 属性用于控制移动设备上网页的视口（viewport）的大小和缩放级别。移动设备的屏幕尺寸和分辨率各不相同，因此视口的设置能够确保网页在不同设备上的正常显示和用户体验。
作用：

响应式布局：
- 使用 viewport 可以让网页根据设备的屏幕尺寸自动调整布局，以适应不同大小的屏幕。
- 支持响应式设计，提供更好的用户体验。
控制缩放：
- 可以通过设置 viewport 来控制用户是否能够缩放页面。这对于移动设备上的网页浏览体验很重要。
- 通过 user-scalable 属性可以控制用户是否允许手动缩放。

常见设置：

常见的 viewport 设置如下：

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

width=device-width：
- 将视口的宽度设置为设备的屏幕宽度。这确保网页的宽度与设备的宽度相匹配。
initial-scale=1.0：
- 设置初始缩放级别为 1.0。这确保网页在加载时以原始大小显示，而不进行缩放。

其他属性：

user-scalable：
- 控制用户是否能够手动缩放页面。
- 如果将其设置为 yes，用户可以手动缩放；如果设置为 no，则禁止手动缩放。

1	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Q11：label标签有什么用

难度：⭐

答案

<label> 标签用于定义 HTML 表单中的标签（label）。它通常与表单元素的 id 属性关联，以创建更好的用户体验和可访问性。以下是 <label> 标签的主要用途：

表单元素的标记： <label> 标签可用于标记表单元素，提供对表单元素的描述。通过与表单元素关联，用户点击标签文本时，关联的表单元素就会获得焦点或触发特定的操作。
1
2
htmlCopy code<label for="username">Username:</label>
<input type="text" id="username" name="username">
在这个例子中，点击 “Username:” 文本时，文本框就会获得焦点。
增加可访问性： 使用 <label> 标签可以提升网站的可访问性。屏幕阅读器等辅助技术能够读取与表单元素关联的 <label> 文本，帮助视觉障碍用户更好地理解表单的结构和用途。
点击扩大触发区域： 通过将 <label> 与表单元素关联，用户不仅可以点击表单元素本身，还可以点击与之关联的 <label> 文本来触发表单元素。这有助于扩大可点击区域，提高用户体验。
1
2
3
htmlCopy code<label>
<input type="checkbox" name="subscribe"> Subscribe to newsletter
</label>
在这个例子中，用户可以点击 “Subscribe to newsletter” 文本或复选框本身来切换选中状态。

Q12：img标签的srcset属性的作用是什么

难度：⭐

答案

srcset 属性是 <img> 标签的一个属性，用于提供一组备选图像源，以帮助浏览器在不同设备和屏幕尺寸下选择合适的图像。这可以有助于提高页面的性能和用户体验

主要作用包括：

响应式图像： srcset 允许在不同的视口宽度或设备像素密度下使用不同分辨率的图像。浏览器会根据设备的特性自动选择合适的图像。
1
2
htmlCopy code
<img src="image-1x.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" alt="Responsive Image">
在这个例子中，浏览器会根据设备的像素密度（1x、2x、3x）选择对应的图像。
带宽控制： srcset 还可以帮助减小对带宽的需求。浏览器在选择图像时可以根据设备的屏幕大小和像素密度，选择合适的图像，从而减少页面加载时需要下载的数据量。
提高加载性能： 使用 srcset 可以确保页面加载时，浏览器选择适合用户设备的最佳图像，从而提高页面加载性能，尤其是在移动设备和高分辨率屏幕上。

sizes 属性结合使用： srcset 可以与 sizes 属性结合使用，提供关于图像在不同屏幕尺寸下的显示尺寸的信息，以更精确地选择合适的图像。

1	<img src="image-320w.jpg" srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" alt="Responsive Image">

srcset 是一种优化图像加载的方式，使得页面可以根据用户设备的特性提供最佳的视觉体验，同时减小对带宽的压力

Q12：canvas跟svg有什么区别？

难度：⭐⭐

答案

特性	Canvas	SVG
描述	位图图形，像素基础	矢量图形，基于 XML
渲染方式	像素操作，适合复杂的绘图和图像处理	矢量路径，适合图形和图表
分辨率依赖	分辨率依赖，位图在不同分辨率下可能失真	分辨率无关，图形在不同分辨率下保持清晰
交互性	像素级别的交互，复杂交互相对复杂	DOM 元素级别的交互，容易实现事件处理
动画	动画相对较复杂，依赖帧刷新	动画相对简单，使用 CSS 或 JavaScript
复杂度	适合处理复杂的图像、游戏等	适合处理图形、图表、地图等
文本渲染	文本渲染较简单，有限的文本样式控制	文本渲染灵活，支持复杂的文本样式
缩放	缩放会导致图像失真	缩放不会导致图像失真
使用场景	游戏、图像处理、位图图形	图表、图形、图标、动画
代码复杂度	相对简单	相对复杂，XML 格式描述图形结构

Canvas 适用于处理复杂的图像和游戏等场景

而 SVG 更适用于绘制图形、图表和具有交互性的图形元素

Q13：H5有哪些跟drag相关的API

难度：⭐⭐

答案

拖拽事件：

dragstart：
- 当用户开始拖拽某个元素时触发。
- 可以在此事件处理程序中设置拖拽的数据（如文本或URL）。
drag：
- 在元素被拖拽的过程中持续触发。
- 可以在此事件处理程序中执行一些动作，例如更新拖拽元素的位置。
dragenter：
- 当拖拽元素进入可拖放区域时触发。
- 可以在此事件处理程序中改变可拖放区域的样式或执行其他操作。
dragover：
- 在拖拽元素在可拖放区域内移动时持续触发。
- 可以在此事件处理程序中阻止默认行为并执行一些操作。
dragleave：
- 当拖拽元素离开可拖放区域时触发。
drop：
- 当拖拽元素在可拖放区域内释放时触发。
- 在此事件处理程序中可以处理拖放操作，获取拖放的数据并进行相应的处理。
dragend：
- 当拖拽操作结束时触发，无论是成功还是取消。
- 在此事件处理程序中可以进行清理操作。

拖拽 API：

DataTransfer 对象：

在 dragstart 事件中的 event.dataTransfer 属性用于设置拖拽的数据，供 drop 事件中使用。

1
2
3

element.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', 'Hello, World!');
});

draggable 属性：
- 通过将元素的 draggable 属性设置为 true 或 false 来启用或禁用元素的拖拽功能。
1
<div draggable="true">Drag me!</div>
dropEffect 和 effectAllowed 属性：
- dropEffect 属性用于指定拖拽元素被释放时的反馈效果。
- effectAllowed 属性用于指定被拖拽元素允许的操作。
1
2
event.dataTransfer.dropEffect = 'copy';
event.dataTransfer.effectAllowed = 'copyMove';

渲染

Q1：html页面渲染过程

难度：⭐⭐⭐

答案

HTML 页面的渲染过程是浏览器将 HTML、CSS 和 JavaScript 转换成用户可以看到和与之交互的可视化页面的过程

解析 HTML（构建 DOM）：
- 浏览器从服务器获取 HTML 文件。
- 解析器开始解析 HTML 标记，构建 DOM 树，表示文档的结构。
- 解析过程中遇到外部资源（如图片、样式表、脚本），会触发新的网络请求。
解析 CSS（构建 CSSOM）：
- 浏览器解析样式表，构建 CSS 对象模型（CSSOM）。
- CSSOM 包含了每个样式规则及其对应的元素。
- 浏览器将 DOM 和 CSSOM 结合起来，构建渲染树。
构建渲染树：
- 渲染树由可见的文档内容构成，包括所有可见的元素及其样式信息。
- 渲染树不包含不需要显示的元素，例如 <head>、display: none 的元素等。
- 渲染树的构建考虑到每个元素的样式，从而确保正确的布局和绘制。
布局（回流）：
- 渲染树中的每个可见元素都进行布局，计算其在屏幕上的准确位置和大小。
- 布局是计算元素的几何属性，包括宽度、高度、位置等。
- 由于布局涉及到元素的几何属性，可能触发多次回流。
绘制：
- 浏览器遍历渲染树，将每个元素绘制到屏幕上。
- 绘制过程包括绘制文本、颜色、图像等。
- 绘制是相对独立的步骤，可以在布局之后进行。
交互与动画（JavaScript 执行）：
- 如果页面包含 JavaScript，浏览器执行脚本。
- JavaScript 可能会修改 DOM 结构或样式，触发重新布局和绘制。
- 用户交互和动画效果可能会引发浏览器执行相应的脚本。
渲染完成：
- 所有的步骤完成后，用户可以看到最终的页面。
- 页面上的元素已经处于可交互状态，用户可以与之进行交互

引申

重排（Reflow） 和 重绘（Repaint） 是两个与页面渲染性能相关的概念，它们都涉及到页面布局和绘制。

重排（Reflow）：
- 重排是指浏览器必须重新计算元素的几何属性（例如位置、大小），然后重新布局整个页面。
- 重排会导致渲染树的重新构建，影响整个页面的布局。
- 常见的触发重排的操作包括改变窗口大小、添加或删除 DOM 元素、修改元素的几何属性、改变字体大小等。
重绘（Repaint）：
- 重绘是指浏览器根据新的样式或元素的可见性等信息重新绘制页面的部分区域，而不涉及布局的改变。
- 重绘不会引起页面的重新布局，只会重新绘制受影响的部分。
- 触发重绘的操作包括改变元素的颜色、背景等，而不影响元素的几何属性。

如何减少重排和重绘，从而提高性能优化：

使用 transform 和 opacity 进行动画：
- 使用 transform 属性进行动画，因为它不会触发重排，而只涉及重绘。
- 使用 opacity 属性进行淡入淡出动画，也只触发重绘。
避免频繁的 DOM 操作：
- 避免频繁地添加、删除、修改 DOM 元素，这会导致多次重排和重绘。
- 将多个 DOM 操作合并成一次，减少对 DOM 结构的修改。
使用文档片段（DocumentFragment）：
- 当需要多次插入新元素时，可以先将它们添加到文档片段中，再一次性插入到文档中，减少重排次数。
使用 display: none 替代 visibility: hidden：
- 将元素隐藏时，使用 display: none 而不是 visibility: hidden，前者会触发重排，但后者只触发重绘。
减少获取布局信息的操作：
- 避免频繁获取元素的几何属性，比如使用 offsetTop、offsetLeft 等，这会触发强制同步布局。
优化 CSS 选择器：
- 使用高效的 CSS 选择器，减少渲染树的规模，提高布局和绘制的速度。
使用 CSS 动画而不是 JavaScript 动画：
- CSS 动画通常会使用硬件加速，性能更好，且不容易触发重排。
合理使用 CSS will-change：
- 使用 will-change 属性告知浏览器某个元素可能会发生变化，使浏览器在布局阶段优化这些元素，减少重排的代价

Q2：页面导入样式的时候，link跟@import有什么区别

难度：⭐

答案

<link> 元素更常用，尤其在需要性能优化和更灵活的加载方式时

@import 规则在某些情况下可能会有一些限制，但在一些特定的场景仍然是有效的

特性	`<link>` 元素	`@import` 规则
加载方式	并行加载，不阻塞页面渲染	在 HTML 解析到它时开始加载，可能阻塞页面渲染
浏览器支持	所有主流浏览器	所有主流浏览器（IE8+）支持，但对并行加载有限制
异步加载	可以通过设置 `async` 属性实现异步加载	不支持异步加载
媒体查询	可以使用媒体查询指定样式表的加载条件	不支持媒体查询
兼容性	更好的兼容性，适用于大型项目	较旧的浏览器版本对 `@import` 支持可能有限
权重	具有较高的权重，会覆盖 `@import` 规则	具有较低的权重，可能被其他样式表覆盖
适用场景	适用于所有情况，特别是对性能有要求的场景	在一些特定情况下可能会用于条件加载样式

Q3：style标签写在body前跟后有什么区别

难度：⭐⭐

答案

<style> 标签写在 <head> 中（body前）：
- 样式表会在整个页面内容加载之前加载和解析。
- 页面渲染可能会等待样式表加载完成，可能导致 FOUC（Flash of Unstyled Content）问题。
- 一般来说，这种方式有助于避免 FOUC，但可能影响页面的首次渲染速度。
<style> 标签写在 <body> 中（body后）：
- 样式表会在整个页面内容加载后加载和解析。
- 页面渲染可能会在样式表加载之前开始，但是在加载和应用样式表时可能导致页面的重新渲染，可能出现 FOUC 问题。
- 在一些情况下，将样式表放在文档底部可能会导致性能方面的优势，但需要注意潜在的 FOUC 问题。

Q4：CSSOM树跟DOM树是同时解析的吗

难度：⭐

答案

并行解析： 浏览器在渲染页面时，并行解析 HTML 文档和 CSS 样式表，构建 DOM 树和 CSSOM 树。
异步加载： HTML 文档的解析和 CSS 样式表的解析是异步的，它们之间可以并行进行。
JavaScript 阻塞： 当浏览器遇到 <script> 标签时，如果 JavaScript 代码依赖于 CSS 样式信息，可能会等待 CSSOM 树构建完成，导致 HTML 解析阻塞。
解决方案： 为了减轻 JavaScript 对 HTML 解析的阻塞，可以将 <script> 放在 <body> 底部，使 HTML 解析不被 JavaScript 阻塞，或者使用 async 或 defer 属性异步加载和执行 JavaScript 文件。
注意事项： 虽然 CSSOM 树和 DOM 树的构建是并行的，但由于 JavaScript 的阻塞特性，可能会导致部分阻塞情况，需要在实践中权衡不同因素以优化性能和用户体验。

功能实现

Q1：websocket怎么兼容低版本浏览器？

难度：⭐

解析

WebSocket 是一种在浏览器和服务器之间建立持久连接的通信协议

WebSocket 的标准化工作主要在 HTML5 时期进行，因此较早版本的浏览器可能不直接支持 WebSocket

答案

使用 Flash 插件：
- 使用类库如 Socket.IO 和 Kaazing WebSocket Gateway，它们提供了对 WebSocket 的模拟支持，通过 Flash 插件实现。
- 这种方法能够在不支持原生 WebSocket 的浏览器上提供类似 WebSocket 的实时通信体验。
使用长轮询（Long Polling）：
- 长轮询是一种模拟实时通信的方法，在不支持 WebSocket 的浏览器中可作为替代方案。
- 客户端发送请求到服务器，服务器保持请求打开直到有新的消息，然后响应给客户端，客户端收到响应后立即再次发起请求。
Polyfill 库：
- 使用 WebSocket 的 Polyfill 库，这些库会在不支持 WebSocket 的浏览器中模拟 WebSocket 的行为。
- 例如，SockJS 是一个提供跨浏览器 WebSocket 兼容性的库，它可以在支持 WebSocket 的浏览器上直接使用 WebSocket，在不支持的浏览器上使用其他技术。
升级浏览器版本：
- 鼓励用户升级浏览器版本，以获得对 WebSocket 的原生支持。
- 在一些情况下，可能需要向用户提供提示，鼓励其使用现代浏览器以获得更好的体验

Q2：页面统计数据中的pv跟uv分别是指什么

难度：⭐

解析

PV（Page View）：
- PV 表示页面浏览量，它是指用户在访问网站或页面时的每一次有效浏览页面的记录。每一次刷新或加载页面都被视为一个 PV。
- PV 反映了页面被访问的总次数，即用户对页面的点击、刷新、加载等操作次数的总和。
- 例如，如果一个用户访问了网站的某个页面，并刷新了该页面两次，那么 PV 将记录为3。
UV（Unique Visitor）：
- UV 表示独立访客数，它是指访问网站或页面的不同用户的数量。UV 计数是根据用户的设备或浏览器等信息进行识别的，用于判断用户的唯一性。
- UV 反映了访问网站的实际用户数量，而不考虑用户对页面的多次访问。
- 例如，如果同一用户在一天内访问了网站的某个页面10次，UV 计数仍然为1。

答案

PV 衡量页面的流量和热度，反映用户对页面的浏览次数。
UV 衡量实际的独立用户数量，反映有多少不同的用户访问了页面。

Q3：iconfont是什么？有什么优点？有什么缺点？

难度：⭐

答案

Iconfont 是什么？

Iconfont 是一种将图标制作成字体的技术，通过使用字体文件中的特定字符代表图标，以字体的形式嵌入网页。这样的做法能够提供矢量图标，方便缩放和使用，同时减少了 HTTP 请求，提高页面性能。

优点：

灵活性： 字体图标是矢量图形，可以随意缩放而不失真，适应不同屏幕和分辨率。
可缩放性： 通过调整 font-size 属性，可以轻松地更改图标的大小，而无需额外的图像资源。
减少 HTTP 请求： 将多个图标整合到一个字体文件中，减少页面加载时的 HTTP 请求次数，有助于提高性能。
易于使用和定制： 提供简单的 CSS 使用方式，通过 font-family 和 content 属性使用图标，同时可以自定义颜色、大小等样式。
兼容性： 在现代浏览器和移动设备上有良好的兼容性，确保一致的显示效果。
文件大小较小： 字体文件相对于同等数量的独立图像文件来说，通常具有更小的文件大小。

缺点：

单色图标： 字体图标通常是单色的，难以实现多彩的效果。
设计局限性： 字体图标受限于字体的设计，某些复杂或细致的图标可能不如独立图像清晰。
Unicode 冲突： 字体图标使用了 Unicode 字符集中的一部分，可能会与已有的字符冲突，需要谨慎选择字符。
依赖字体文件： 使用字体图标需要加载字体文件，如果字体文件未能正确加载，图标可能无法显示。

Q4：如何禁止input显示输入历史记录？

难度：⭐

答案

为了禁止浏览器显示输入历史记录，可以通过设置 autocomplete 属性为 “off” 来实现。这个属性可以应用于 <input>、<textarea>、和 <form> 元素。

在单个输入框中禁用历史记录：

1	<input type="text" name="username" autocomplete="off">

在整个表单中禁用历史记录：

1
2
3

<form action="submit-form.php" method="post" autocomplete="off">
  <!-- 表单内容 -->
</form>

注意事项：

浏览器支持： 大多数现代浏览器都支持 autocomplete 属性，但有些浏览器可能会忽略这个属性或对其行为有所不同。
敏感信息： 尽管可以禁用历史记录，但对于敏感信息（如密码），最好使用 type="password" 来确保更高的安全性。

1	<input type="password" name="password" autocomplete="off">

Q5：input上传文件可以同时选择多张吗？怎么设置？

难度：⭐

解析

示例：

1	<input type="file" name="files[]" multiple>

multiple 属性告诉浏览器允许选择多个文件

name="files[]" 中的 files[] 是在提交表单时用于标识上传文件的字段名称，这样可以在服务器端处理多个文件

在实际使用中，用户可以按住 Ctrl（在 Windows 或 Linux 上）或 Command（在 macOS 上）键，然后点击文件选择对话框中的多个文件，以便同时选择多个文件上传

答案

<input> 元素可以用于上传多个文件。为了启用多文件选择，你需要设置 multiple 属性

Q6：使用input标签上传图片时，怎么触发默认拍照功能？

难度：⭐

解析

“camera”（摄像头）： 指定使用设备的摄像头，以触发拍照功能。
“microphone”（麦克风）： 指定使用设备的麦克风，以触发录音功能。
“camcorder”（摄像机）： 指定使用设备的摄像机，以触发录制视频功能。
“user”： 指定使用前置摄像头，通常用于自拍照片。
“environment”： 指定使用后置摄像头，通常用于拍摄环境中的照片或视频。

答案

1	<input type="file" accept="image/*" capture="camera">

type="file"： 这定义了一个文件上传的输入框，允许用户选择文件。
accept="image/\*"： 这个属性指定了文件对话框应该仅接受图像文件。这并不会阻止用户选择其他文件类型，但会过滤出非图像文件。
capture="camera"： 这是触发默认拍照功能的关键。当设置为 “camera” 时，它告诉浏览器使用设备的摄像头。这样，用户点击文件输入框时，系统会调用默认的拍照功能而不是文件选择器。

这个设置在移动设备上的浏览器中通常更为有效

在桌面浏览器上，它可能不会触发摄像头，而是仅限制用户选择图像文件

Q7：H5的离线储存是怎么用的？它的工作原理是什么

难度：⭐⭐⭐

答案

HTML5 提供了一种离线储存的机制，称为应用缓存（Application Cache），它允许 web 应用在离线时继续访问和运行。应用缓存通过一个包含应用所需文件的清单文件来工作，这个清单文件被称为应用缓存清单（或者简称为缓存清单）。以下是使用应用缓存的基本步骤以及工作原理：

使用步骤：

创建应用缓存清单文件：
- 创建一个文本文件，以 .appcache 为扩展名，例如 example.appcache。
- 在清单文件中列出需要离线访问的文件。
1
2
3
4
5
6
appcacheCopy codeCACHE MANIFEST
# 版本号
# Comment line
/css/styles.css
/js/scripts.js
/images/logo.png
将清单文件关联到 HTML 页面：
- 在 HTML 页面的 <html> 标签中添加 manifest 属性，指向应用缓存清单文件。
1
2
3
4
htmlCopy code<!DOCTYPE html>
<html manifest="example.appcache">

</html>
服务器配置：
- 确保服务器正确配置，允许浏览器缓存清单文件。

工作原理：

应用缓存清单下载：
- 当用户第一次访问页面时，浏览器会下载清单文件并缓存它。
资源缓存：
- 根据清单文件中列出的资源，浏览器下载并缓存这些资源。
离线访问：
- 当用户离线时，浏览器会使用缓存的资源来渲染页面，而不是从服务器重新下载。

注意事项：

应用缓存只有在第一次访问页面时才会被下载和缓存，之后只有在清单文件发生变化时才会重新下载。
使用缓存清单的资源需要跨足同一域名。
缓存清单中可以包含注释以及注释行（以 # 开头）。

应用缓存虽然提供了一种在离线时继续访问和运行 web 应用的方式，但它也有一些限制和问题，例如缓存更新问题和缺乏细粒度的控制。由于这些限制，现在更多的开发者转向使用 Service Workers 来实现更强大和灵活的离线支持。

Q8：浏览器如何对H5的离线储存资源进行管理跟加载？

难度：⭐⭐⭐

答案

HTML5 的离线储存（Application Cache）是一种浏览器缓存机制，用于使 web 应用能够在离线时访问资源。浏览器对离线储存资源的管理和加载遵循以下原则：

离线储存资源的管理：

清单文件下载：
- 浏览器在访问 web 应用时，会下载与页面关联的清单文件（缓存清单）。
- 清单文件中列出了需要被缓存的资源。
缓存清单更新：
- 清单文件中有一个注释行可以包含版本号或其他标识符，用于检测清单文件是否发生变化。
- 如果清单文件有更新，浏览器将重新下载和缓存清单中列出的资源。

离线储存资源的加载：

在线模式：
- 当用户在线时，浏览器会正常从服务器请求页面和资源。
离线模式：
- 当用户离线时，浏览器会尝试从本地缓存加载页面和资源。
- 如果清单文件及其列出的资源已经被缓存，浏览器将使用缓存的资源来渲染页面。
更新机制：
- 浏览器会定期检查清单文件是否有更新，如果有更新，它会重新下载清单文件及其列出的资源。
- 在有清单更新的情况下，即使用户在线，浏览器也会尝试重新下载清单中列出的资源，以确保使用最新的版本。

注意事项与问题：

缓存问题：
- 缓存清单一旦被下载，它将一直存在于用户浏览器中，即使清单文件内容已经更新。因此，清单文件的更新需要搭配版本号或其他标识符来确保及时生效。
Manifest Mismatch 错误：
- 在清单文件更新时，可能会出现 Manifest Mismatch 错误，这可能是由于浏览器仍然使用旧版本的清单文件导致的。

由于 HTML5 离线储存存在一些限制和问题，推荐使用更现代的 Service Workers 来实现更为强大和灵活的离线支持。 Service Workers 提供了更细粒度的控制，并且可以处理离线时的请求、动态缓存等更高级的功能。

Q9：SEO原理是什么

难度：⭐

答案

SEO（Search Engine Optimization）是一种通过改进网站内容和结构，以及增加外部引用来提高网站在搜索引擎中排名的过程。SEO 的原理涉及多个方面，包括网站内容、链接质量、用户体验等。

原理：

搜索引擎蜘蛛爬行： 搜索引擎通过派遣蜘蛛或机器人在网上发现新网页，抓取文件。蜘蛛从已知的网页开始，通过访问链接不断抓取新的网页，这个过程称为爬行。
索引： 搜索引擎将蜘蛛抓取的网页文件分解、分析，并存入数据库，形成索引。索引包含了网页的文字内容、关键词位置、字体、颜色等相关信息。
搜索词处理： 用户在搜索引擎输入关键词后，搜索引擎对输入的搜索词进行处理，如中文分词、去除停止词、检查拼写错误等。
排序： 搜索引擎排序程序根据处理后的搜索词，从索引数据库中找出所有包含搜索词的网页，并根据排名算法计算哪些网页应该在前面显示。排名算法考虑了关键词的相关性、网页的质量、链接的权威性等因素。

SEO的原理在于理解搜索引擎的工作流程，通过优化网站内容、结构、链接等因素，提高网站在搜索引擎中的排名，从而增加有针对性的流量。优化的目标是使网站更容易被搜索引擎发现，同时提高在与目标关键词相关的搜索结果中的排名。

Q10：如何实现SEO优化？

难度：⭐

答案

关键字研究与使用：
- 进行关键字研究，确定与业务相关且有搜索量的关键字。在网站的标题、正文、标签等位置合理使用关键字，但要避免过度堆砌。
高质量内容：
- 创建高质量、原创、有价值的内容，满足用户需求。确保内容清晰、易于理解，避免重复内容。
网站结构优化：
- 优化网站结构，使其易于导航和理解。确保每个页面都有一个清晰的主题，并使用清晰的 URL 结构。
内部链接：
- 使用内部链接连接相关页面，帮助搜索引擎理解网站的层次结构。确保每个页面都可以通过内部链接访问。
外部链接建设：
- 获得高质量、相关性强的外部链接。这可以通过创建有吸引力的内容、参与社交媒体、合作关系等方式实现。
网站速度优化：
- 提高网站加载速度，优化图片、文件压缩、启用浏览器缓存等措施。速度对用户体验和搜索引擎排名都有影响。
移动优先设计：
- 优化网站以适应不同移动设备，确保在移动端的用户体验良好。搜索引擎越来越注重移动优先。
使用合适的标签：
- 使用合适的 HTML 标签，如标题标签、meta 标签等，以提高搜索引擎对页面内容的理解。
社交媒体参与：
- 积极参与社交媒体，分享网站内容，增加社交媒体信号。这也可以增加网站的曝光和流量。
定期更新：
- 定期更新网站内容，确保网站保持新鲜度。搜索引擎更倾向于显示更新频繁的网站。
网站安全性：
- 提供安全的网站环境，使用 HTTPS 协议，这也是搜索引擎考虑的一个因素。
SEO工具与分析：
- 使用 SEO 工具进行网站分析，了解搜索引擎索引情况、关键字排名等，根据数据调整优化策略。
合理的网站地图：
- 创建并提交网站地图，帮助搜索引擎更好地索引网站中的页面。

Q11：SPA应用怎么实现SEO优化？

难度：⭐⭐⭐

答案

SPA（Single Page Application）是一种通过JavaScript动态更新页面内容，而不需要重新加载整个页面的应用程序。由于SPA在初始加载时只加载一个HTML文件，其内容主要通过JavaScript动态生成，这可能导致搜索引擎在爬取和索引SPA时遇到一些挑战。然而，有一些方法可以帮助实现SPA的SEO优化：

服务器端渲染（SSR）：
- 使用服务器端渲染的框架，例如Next.js（React）、Nuxt.js（Vue）、Angular Universal（Angular）等，可以在服务端生成初始HTML，并将其发送给客户端。这有助于搜索引擎在初始渲染时获取页面内容，提高索引效率。
预渲染（Prerendering）：
- 对于一些静态内容较多的页面，可以考虑使用预渲染技术。在构建时生成HTML文件，并提供给搜索引擎爬虫。这样，搜索引擎可以更容易地索引内容，而用户访问时仍然可以享受SPA的动态交互。
服务端渲染和预渲染结合：
- 对于一些关键页面，可以选择使用服务端渲染，而对于其他页面，使用预渲染。这样可以在关键页面保持动态性的同时，提供给搜索引擎已渲染的HTML。
使用合适的meta标签：
- 使用合适的meta标签，特别是描述页面内容的meta标签，以帮助搜索引擎理解页面内容。例如，<meta name="description" content="Your page description">。
Sitemap文件：
- 提供一个sitemap.xml文件，其中包含站点的所有重要页面。这可以帮助搜索引擎了解站点的结构和内容。
使用路由：
- 在SPA中使用路由，确保每个页面都有唯一的URL。这有助于搜索引擎正确索引不同的页面。
合理的链接结构：
- 使用合理的链接结构，确保内部链接和导航能够被爬虫正确解析。SPA应用可以使用虚拟DOM和路由等技术来实现。
社交媒体优化：
- 确保社交媒体分享时能够正确显示页面信息。为每个页面添加Open Graph和Twitter Card等社交媒体标签。

Q12：怎么实现点击回到顶部功能？

难度：⭐⭐

答案

使用锚点链接：
- 在页面顶部设置一个带有id属性的锚点，然后通过链接到这个锚点来实现回到顶部。例如：
  1
  2
  3
  <a href="#top">回到顶部</a>
  
  <div id="top">顶部内容</div>
- 这种方式通过原生的锚点跳转，可以在点击时平滑滚动到顶部。

使用JavaScript滚动事件：

通过监听页面滚动事件，当滚动距离超过一定值时显示回到顶部按钮，点击按钮时回到顶部。示例代码：

<!-- HTML结构 -->
<button id="scrollToTop">回到顶部</button>

<!-- JavaScript代码 -->
<script>
  const scrollToTopButton = document.getElementById('scrollToTop');

  window.addEventListener('scroll', () => {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
      scrollToTopButton.style.display = 'block';
    } else {
      scrollToTopButton.style.display = 'none';
    }
  });

  scrollToTopButton.addEventListener('click', () => {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE, and Opera
  });
</script>

上述代码通过监听滚动事件，在滚动距离超过一定值时显示回到顶部按钮，并在点击按钮时平滑滚动到页面顶部。

使用CSS动画：

利用CSS的动画效果，通过将按钮的位置从底部平滑移动到顶部，实现回到顶部的效果。示例代码：

<!-- HTML结构 -->
<button id="scrollToTop" class="scrollToTop">回到顶部</button>

<!-- CSS样式 -->
<style>
  .scrollToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    transition: bottom 0.3s ease-in-out;
  }

  .scrollToTop.show {
    bottom: 40px;
  }
</style>

<!-- JavaScript代码 -->
<script>
  const scrollToTopButton = document.getElementById('scrollToTop');

  window.addEventListener('scroll', () => {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
      scrollToTopButton.classList.add('show');
    } else {
      scrollToTopButton.classList.remove('show');
    }
  });

  scrollToTopButton.addEventListener('click', () => {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE, and Opera
  });
</script>

上述代码通过CSS的transition属性实现了平滑的动画效果，按钮在滚动时显示或隐藏。

Q13：假设我要上传图片，我要怎么在选择图片之后通过浏览器预览待上传的图片？

难度：⭐⭐

答案

window.URL.createObjectURL：

这个方法创建一个包含文件内容的 URL，这个 URL 可以被用于在浏览器中直接显示文件，比如在 <img> 元素的 src 属性中。它创建的 URL 是一个 Blob URL，对应于一个二进制数据块。

代码示例：

function previewImage() {
  const input = document.getElementById('imageInput');
  const preview = document.getElementById('imagePreview');

  if (input.files && input.files[0]) {
    const imageUrl = window.URL.createObjectURL(input.files[0]);
    preview.src = imageUrl;
  }
}

FileReader：

这是一种更灵活的方式，通过 FileReader 对象读取文件的内容，并以不同的格式（比如DataURL）表示。这样可以实现更多的自定义操作，例如将文件内容显示在页面上或进行其他处理。

代码示例：

function previewImage() {
  const input = document.getElementById('imageInput');
  const preview = document.getElementById('imagePreview');

  if (input.files && input.files[0]) {
    const reader = new FileReader();

    reader.onload = function (e) {
      preview.src = e.target.result;
    };

    reader.readAsDataURL(input.files[0]);
  }
}

Q14：如何控制input输入框的字数

难度：⭐

答案

maxlength 属性用于定义输入框的最大字符数

1	<input type="text" id="textInput" maxlength="10" oninput="limitInputLength(this)" />

客户端的控制不能完全保证字数不会超出，因为用户可以通过浏览器开发者工具或其他手段绕过这些限制。在实际应用中，通常还需要在服务器端进行验证。

Q15：什么是SSG？有什么实现方式？有什么优点跟缺点？

难度：⭐⭐⭐

答案

静态站点生成（SSG） 是一种构建网站的方法，它在构建时预先生成整个网站的静态页面，而不是在每次请求时动态生成。以下是关于静态站点生成的一些详细信息：

实现方式：

使用静态生成工具： 使用专门的静态生成工具或框架，如 Gatsby、Next.js、Hugo 等。这些工具提供了开发者友好的方式来创建、构建和部署静态站点。
Markdown 文件： 很多静态生成工具使用 Markdown 文件来管理内容，然后将其转换成静态页面。

优点：

性能优越： 静态站点的性能通常较高，因为所有页面都是预先生成的，并可以通过 CDN 进行分发。
安全性： 由于没有服务器端逻辑，静态站点通常更安全，减少了一些潜在的安全风险。
简化部署： 静态文件可以轻松地部署到各种托管服务上，而不需要服务器端的特殊配置。
独立托管： 静态站点可以独立于后端技术，因为它们不依赖于服务器端的动态生成。
适用于内容较为静态： 对于内容不经常更改的网站，静态站点生成是一个理想的选择。

缺点：

不适用于动态内容： 对于需要实时更新的动态内容，静态站点生成可能不太适用，因为它需要重新构建整个站点。
构建时间较长： 对于较大的网站，构建整个站点的时间可能较长。
不适用于个性化内容： 对于需要个性化内容的网站，静态站点生成可能需要更复杂的解决方案。
复杂度： 对于初学者来说，配置和使用静态生成工具可能需要一些学习成本。

引申

主要特点和工作流程包括：

预先生成： 在构建过程中，所有的页面内容都被提前生成成静态文件。这包括页面的 HTML、CSS、JavaScript 等。
提高性能： 由于所有页面都是静态的，它们可以被缓存并由 CDN（内容分发网络）分发。这降低了每个用户请求的响应时间，提高了性能。
安全性： 静态站点通常更安全，因为它们没有服务器端逻辑，没有与数据库的实时交互。这减少了一些潜在的安全漏洞。
部署简单： 静态文件可以轻松地部署到各种托管服务上，而无需复杂的服务器设置。
独立托管： 静态站点可以独立于特定的后端技术，因为它们不依赖于服务器端的动态生成。
支持前端框架： 许多现代的前端框架，如 Next.js、Nuxt.js 等，支持静态站点生成作为其工作流的一部分。

SSG 在现代 Web 开发中变得越来越流行，特别是对于内容较为静态或变化不频繁的网站。一些流行的静态站点生成工具和框架包括 Gatsby、Next.js、Hugo 等。这些工具提供了开发者友好的方式来构建、部署和管理静态站点。

概念

Q1：html为什么要语义化

Q2：html、xml、xhtml有什么区别？

Q3：渐进式jpg了解过吗？

Q4：什么是渐进增强跟优雅降级？

标签

Q1：常用的meta标签有哪些

Q2：如何关闭a标签跳转页面或定位链接

Q3：canvas元素在标签上面设置宽高跟在style里面设置宽高有什么区别

Q4：iframe是什么？有哪些优缺点

Q5：DOCTYPE标签有什么用

Q6：html标签中测src跟href有什么区别

Q7：html5有哪些新特性，分别有什么作用

Q8：标签上的title跟alt属性有什么区别

Q9：行内元素有哪些？块级元素有哪些？空元素有哪些？

Q10：meta标签中的viewport有什么用

Q11：label标签有什么用

Q12：img标签的srcset属性的作用是什么

Q12：canvas跟svg有什么区别？

Q13：H5有哪些跟drag相关的API

渲染

Q1：html页面渲染过程

Q2：页面导入样式的时候，link跟@import有什么区别

Q3：style标签写在body前跟后有什么区别

Q4：CSSOM树跟DOM树是同时解析的吗

功能实现

Q1：websocket怎么兼容低版本浏览器？

Q2：页面统计数据中的pv跟uv分别是指什么

Q3：iconfont是什么？有什么优点？有什么缺点？

Q4：如何禁止input显示输入历史记录？

Q5：input上传文件可以同时选择多张吗？怎么设置？

Q6：使用input标签上传图片时，怎么触发默认拍照功能？

Q7：H5的离线储存是怎么用的？它的工作原理是什么

Q8：浏览器如何对H5的离线储存资源进行管理跟加载？

Q9：SEO原理是什么

Q10：如何实现SEO优化？

Q11：SPA应用怎么实现SEO优化？

Q12：怎么实现点击回到顶部功能？

Q13：假设我要上传图片，我要怎么在选择图片之后通过浏览器预览待上传的图片？

Q14：如何控制input输入框的字数

Q15：什么是SSG？有什么实现方式？有什么优点跟缺点？