跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 卖家故事 > 华为od 面试八股文_前端_02_含答案

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

时间:2024-04-22 10:02:25 来源:网络cs 作者:言安琪 栏目:卖家故事 阅读:

标签: 答案  八股文 
阅读本书更多章节>>>>

目录

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属性,浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素,读取到就会开始加载和执行,这样就阻塞了后续文档的加载。

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

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

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

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

2:HTML5有哪些更新

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:

检测浏览器对于 web worker 的支持性创建 web worker 文件(js,回传函数等)创建 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:懒加载了解过吗?

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

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

9:懒加载的优点有哪些?

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

10:懒加载与预加载的区别有哪些?

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

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

本文链接:https://www.kjpai.cn/gushi/2024-04-22/161148.html,文章来源:网络cs,作者:言安琪,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

文章评论