华为od 面试八股文_前端_02_含答案

野性酷女 2024-04-20 14:10 79阅读 0赞

**目录**

1：script标签中defer和async的区别

2：HTML5有哪些更新

3：说一说 web worker 吧

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

5：iframe 有那些优点和缺点？

6：head 标签有什么作用，其中什么标签必不可少？

7：浏览器乱码的原因是什么？如何解决？

8：懒加载了解过吗？

9：懒加载的优点有哪些？

10：懒加载与预加载的区别有哪些？

--------------------

#### 1：script标签中defer和async的区别 ####

如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

下图可以直观的看出三者之间的区别:

![3b61bb199f13f469f5d9174f083e5e0a.png][]

其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。

**defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析**，其区别如下：

*  执行顺序：多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行；
 *  脚本是否并行执行：async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。

#### 2：HTML5有哪些更新 ####

![6184f3a745024c37a04952369bfbf9c0.png][]

**1. 语义化标签**  
header：定义文档的页眉（头部）；  
nav：定义导航链接的部分；  
footer：定义文档或节的页脚（底部）；  
article：定义文章内容；  
section：定义文档中的节（section、区段）；  
aside：定义其所处内容之外的内容（侧边）；  
**2. 媒体标签**  
（1） audio：音频  
<audio src='' controls autoplay loop='true'></audio>  
属性：controls 控制面板  
autoplay 自动播放  
loop='true' 循环播放

（2）video 视频  
<video src='' poster='imgs/aa.jpg' controls></video>  
属性：poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面，当然通过poster也可以自己指定。  
controls 控制面板  
width  
height  
（3）source标签  
因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过source来指定视频源。  
<video>  
<source src='aa.flv' type='video/flv'></source>  
<source src='aa.mp4' type='video/mp4'></source>  
</video>

**3. 表单**  
表单类型：

email ：能够验证当前输入的邮箱地址是否合法  
url ： 验证URL  
number ： 只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值。  
search ： 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。  
range ： 可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值  
color ： 提供了一个颜色拾取器  
time ： 时分秒  
data ： 日期选择年月日  
datatime ： 时间和日期(目前只有Safari支持)  
datatime-local ：日期时间控件  
week ：周控件  
month：月控件  
表单属性：

placeholder ：提示信息  
autofocus ：自动获取焦点  
autocomplete=“on” 或者 autocomplete=“off” 使用这个属性需要有两个前提：  
表单必须提交过  
必须有name属性。  
required：要求输入框不能为空，必须有值才能够提交。  
pattern=" " 里面写入想要的正则模式，例如手机号patte="^(+86)?\\d\{10\}$"  
multiple：可以选择多个文件或者多个邮箱  
form=" form表单的ID"  
表单事件：

oninput 每当input里的输入框内容发生变化都会触发此事件。  
oninvalid 当验证不通过时触发此事件。

**4. 进度条、度量器**  
progress标签：用来表示任务的进度（IE、Safari不支持），max用来表示任务的进度，value表示已完成多少  
meter属性：用来显示剩余容量或剩余库存（IE、Safari不支持）  
high/low：规定被视作高/低的范围  
max/min：规定最大/小值  
value：规定当前度量值  
设置规则：min < low < high < max

**5.DOM查询操作**  
document.querySelector()  
document.querySelectorAll()  
它们选择的对象可以是标签，可以是类(需要加点)，可以是ID(需要加\#)

**6. Web存储**  
HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储  
sessionStorage - 针对一个 session 的数据存储

**7. 其他**  
拖放：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。设置元素可拖放：  
<img draggable="true" />  
画布（canvas ）： canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。  
<canvas id="myCanvas" width="200" height="100"></canvas>  
SVG：SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准  
地理定位：Geolocation（地理定位）用于定位用户的位置。

**总结：**

（1）新增语义化标签：nav、header、footer、aside、section、article

（2）音频、视频标签：audio、video

（3）数据存储：localStorage、sessionStorage

（4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议）

（5）input标签新增属性：placeholder、autocomplete、autofocus、required

（6）history API：go、forward、back、pushstate

移除的元素有：

纯表现的元素：basefont，big，center，font, s，strike，tt，u;  
对可用性产生负面影响的元素：frame，frameset，noframes；

#### 3：说一说 web worker 吧 ####

在 HTML 页面中，如果在执行脚本时，页面的状态是不可响应的，直到脚本执行完成后，页面才变成可响应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。 并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

如何创建 web worker：

1.  检测浏览器对于 web worker 的支持性
2.  创建 web worker 文件（js，回传函数等）
3.  创建 web worker 对象

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

*  **在线的情况下**，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问页面 ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。
 *  **离线的情况下**，浏览器会直接使用离线存储的资源。

#### 5：iframe 有那些优点和缺点？ ####

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

**优点：**

*  用来加载速度较慢的内容（如广告）
 *  可以使脚本可以并行下载
 *  可以实现跨子域通信

**缺点：**

*  iframe 会阻塞主页面的 onload 事件
 *  无法被一些搜索引擎索识别
 *  会产生很多页面，不容易管理

#### 6：head 标签有什么作用，其中什么标签必不可少？ ####

标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：`<base>`, `<link>`, `<meta>`, `<script>`, `<style>`, `<title>`。

其中 `<title>` 定义文档的标题，它是 head 部分中唯一必需的元素。

#### 7：浏览器乱码的原因是什么？如何解决？ ####

**产生乱码的原因：**

*  网页源代码是 `gbk` 的编码，而内容中的中文字是 `utf-8` 编码的，这样浏览器打开即会出现 `html` 乱码，反之也会出现乱码；
 *  `html` 网页编码是 `gbk`，而程序从数据库中调出呈现是 `utf-8` 编码的内容也会造成编码乱码；
 *  浏览器不能自动检测网页编码，造成网页乱码。

**解决办法：**

*  使用软件编辑HTML网页内容；
 *  如果网页设置编码是 `gbk`，而数据库储存数据编码格式是 `UTF-8`，此时需要程序查询数据库数据显示数据前进程序转码；
 *  如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。

#### 8：懒加载了解过吗？ ####

懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。

如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。

![a2774d47f0dc4ffb8cbaf312cb14b1e9.png][]

#### 9：懒加载的优点有哪些？ ####

*  **减少无用资源的加载：**使用懒加载明显减少了服务器的压力和流量，同时也减小了浏览器的负担。
 *  **提升用户体验:** 如果同时加载较多图片，可能需要等待的时间较长，这样影响了用户体验，而使用懒加载就能大大的提高用户体验。
 *  **防止加载过多图片而影响其他资源文件的加载 ：**会影响网站应用的正常使用。

#### 10：懒加载与预加载的区别有哪些？ ####

这两种方式都是提高网页性能的方式，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

*  **懒加载也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户需要访问时，再去加载**，这样可以提高网站的首屏加载速度，提升用户的体验，并且可以减少服务器的压力。它适用于图片很多，页面很长的电商网站的场景。懒加载的实现原理是，将页面上的图片的 src 属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的 src 属性，以此来实现图片的延迟加载。
 *  **预加载指的是将所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。**通过预加载能够减少用户的等待时间，提高用户的体验。我了解的预加载的最常用的方式是使用 js 中的 image 对象，通过为 image 对象来设置 scr 属性，来实现图片的预加载。

[3b61bb199f13f469f5d9174f083e5e0a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/22558c8f695b4ceaa6ddda3e1a8791ef.png
[6184f3a745024c37a04952369bfbf9c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/8d2fd89cd11d483fba4287e56044308c.png
[a2774d47f0dc4ffb8cbaf312cb14b1e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/fcb3bce3b9e648d99c19fbfc3e974601.png