1.src和href的区别
src 用于替换当前元素,href 用于在当前文档和引用资源之间确立联系。
(1)src
src 是 source 的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求 src 资源时会将其指向的资源下载并应用到文档内,例如 js 脚本,img 图片和 frame 等元素。
<script src =”js.js”></script>
当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js 脚本放在底部而不是头部。
(2)href
href 是 Hypertext Reference 的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果在文档中添加
<link href=”common.css” rel=”stylesheet”/>
那么浏览器会识别该文档为 css 文件,就会并行下载资源并且不会停止对当前文档的处理。 这也是为什么建议使用 link 方式来加载 css,而不是使用@import 方式。(link会异步加载css,而@import会在页面加载完成后才开始加载,会出现页面初始无样式也就是白屏问题。)
2. 对HTML语义化的理解
语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化)。通俗来讲就是用正确的标签做正确的事情。
语义化的优点如下:
- 对机器友好,带有语义的文字表现力丰富,更适合搜索引擎的爬虫爬取有效信息,有利于SEO。除此之外,语义类还支持读屏软件,根据文章可以自动生成目录;
- 对开发者友好,使用语义类标签增强了可读性,结构更加清晰,开发者能清晰的看出网页的结构,便于团队的开发与维护。
常见的语义化标签:
<header></header> 头部
<nav></nav> 导航栏
<section></section> 区块(有语义化的div)
<main></main> 主要区域
<article></article> 主要内容
<aside></aside> 侧边栏
<footer></footer> 底部
3. DOCTYPE(⽂档类型) 的作用
DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明,它的目的是告诉浏览器(解析器)应该以什么样(html或xhtml)的文档类型定义来解析文档,不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。
浏览器渲染页面的两种模式(可通过document.compatMode获取,比如,语雀官网的文档类型是CSS1Compat):
- CSS1Compat:标准模式(Strick mode),默认模式,浏览器使用W3C的标准解析渲染页面。在标准模式中,浏览器以其支持的最高标准呈现页面。
- BackCompat:怪异模式(混杂模式)(Quick mode),浏览器使用自己的怪异模式解析渲染页面。在怪异模式中,页面以一种比较宽松的向后兼容的方式显示。
4. script标签中defer和async的区别
如果没有defer或async属性,浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素,读取到就会开始加载和执行,这样就阻塞了后续文档的加载。
defer 和 async属性都是去异步加载外部的JS脚本文件,它们都不会阻塞页面的解析,其区别如下:
- 执行顺序:多个带async属性的标签,不能保证加载的顺序;多个带defer属性的标签,按照加载顺序执行;
- 脚本是否并行执行:async属性,表示后续文档的加载和执行与js脚本的加载和执行是并行进行的,即异步执行;defer属性,加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步),js脚本需要等到文档所有元素解析完成之后才执行,DOMContentLoaded事件触发执行之前。
5. 常用的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="0;url=" />
(5)viewport
,适配移动端,可以控制视口的大小和比例:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
其中,content
参数有以下几种:
width viewport
:宽度(数值/device-width)height viewport
:高度(数值/device-height)initial-scale
:初始缩放比例maximum-scale
:最大缩放比例minimum-scale
:最小缩放比例user-scalable
:是否允许用户缩放(yes/no)
(6)robots,搜索引擎索引方式:
<meta name="robots" content="index,follow" />
其中,content
参数有以下几种:
all
:文件将被检索,且页面上的链接可以被查询;none
:文件将不被检索,且页面上的链接不可以被查询;index
:文件将被检索;follow
:页面上的链接可以被查询;noindex
:文件将不被检索;nofollow
:页面上的链接不可以被查询。
6.promise有几种状态,可以重复改变吗?
Promise
对象有三种状态,分别是:
Pending
(未决)初始状态Fulfilled
(已履行/成功):操作成功完成时的状态Rejected
(已拒绝/失败):操作因错误或异常未能完成时的状态
Promise
状态变化的特性是:
Promise
状态的转变是不可逆且只能发生一次。也就是说,一个Promise
不能从Fulfilled
状态变回Pending
状态,也不能从Rejected
状态变为Pending
或者Fulfilled
状态。 一旦Promise
从Pending
状态变为Fulfilled(resolved)
或Rejected(rejected)
,它就永远不会再改变。
因此,Promise
的状态不能重复改变。
感觉回答的还可以,记得去字节的会长提醒面试时,切忌一个字一个字的蹦面试官。面试不只是回答问题,而是要展示自己。抓住熟悉的知识或技能点,就来个滔滔不绝,面试官不喊停就一直说。于是想到下面这个API
:
Promise.resolve()
与Promise.reject()
用于创建已确定状态的Promise
对象,方便快速返回成功的或失败的结果
面试官一听这个就感兴趣了, 继续提问Promise
还提供了哪些静态方法,平时怎么用的?开心, 面试官进包围圈了。
Promise.all(iterable)
参数是promise
对象数组。只有当所有Promise
都变为fulfilled
时,返回的Promise
才会变为fulfilled
,并且结果是一个包含所有Promise
结果的数组;只要有一个Promise
变为rejected
,则整体Promise
也会立即变为rejected
,返回第一个rejected Promise
的理由。
Promise.race(iterable)
在传入的 Promise
数组中任何一个 Promise
解决(resolve
)或拒绝(reject
)时,会立即以那个率先改变状态的 Promise
的结果为准来解决或拒绝。 这里强调下细节,其它的promise
实例仍然会继续运行,只不过其状态和结果不会归于最终的结果。 Promise.race
关注的是速度最快的 Promise
的结果,而 Promise.all
关注的是所有 Promise
是否都成功完成。
Promise.allSettled(iterable)
和Promise.all()
相似,它等待所有Promise
都达到settled
状态(即无论是fulfilled
还是rejected
)。一旦所有Promise
都决断了,返回的Promise
会变成fulfilled
,并且结果是一个数组,包含了每个输入Promise
的结果描述对象,这些对象具有status
('fulfilled'
或'rejected'
)和对应的value
或reason
属性。
Promise.all()
更关注所有 Promise
是否都成功完成,它适用于需要所有任务成功完成才能继续下一步场景。而 Promise.allSettled()
则允许你观察一组异步操作的所有结果,无论成功与否,这对于获取并处理所有任务的最终状态非常有用。
到此,在三种状态的语法回答外,还将并发任务及sellted
等偏业余的需求表演给面试官,看表情他还是挺满意的... 如果面试官不打断,我准备继续聊异步、红绿灯、手写promise
... 面试就要变被动为主动,将自己擅长的表演出来。