速记Day1-灵析社区

问题 1：HTML5 新特性有哪些

语义化标签
音视频处理API(audio,video)
canvas / webGL
拖拽释放(Drag and drop) API
history API
requestAnimationFrame
地理位置(Geolocation)API
webSocket
web存储 localStorage、SessionStorage
表单控件，calendar、date、time、email、url、search

问题 2：HTTP 状态码

1xx：指示信息类，表示请求已接受，继续处理（临时响应）
2xx：指示成功类，表示请求已成功接受
3xx：指示重定向，表示要完成请求必须进行更近一步的操作
4xx：指示客户端错误，请求有语法错误或请求无法实现
5xx：指示服务器错误，服务器未能实现合法的请求

常见状态码

【403】表示【服务器拒绝执行客户端的请求】

【404】表示【服务器找不到客户端所请求的资源（网页）】

【304】表示【所请求的资源并未修改（命中协商缓存）

问题 3：正则表达式的用法？

问题 4：HTML5 语义化的优点:

在没CSS样式的情况下，页面整体也会呈现很好的结构效果
代码结构清晰，易于阅读，
利于开发和维护方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

问题 5：介绍下 304 过程

缓存过期后向服务器发起请求验证缓存是否有效，有效的话则返回304。304多出现在对于静态资源的请求上面。对于静态资源来说：

当浏览器第一次发起请求时（请求头中没有If-Modified-Since），server会在响应中告诉浏览器这个资源最后修改的时间（响应头中的Last-Modified）。当你再次请求这个资源时，浏览器会询问server这个资源有没有被修改（请求头中If-Modified-Since）。

如果资源没有被修改，server返回304状态码，浏览器使用本地的缓存文件。

问题 6：数组的常用方法有哪些?

join(separator):将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符

push()：将参数添加到原数组末尾，并返回数组的长度(修改原数组)

pop()：删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined（修改原数组）

shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined

unshift()：将参数添加到原数组开头，并返回数组的长度（修改原数组）

slice(start,end):可以截取出数组某部份的元素为一个新的数组，有两个必填的参数，第一个是起始位置，第二个是结束位置( 操作时数字减1 ) 原数组不改变

splice(start,deleteCount,val1,val2,…):从start位置开始删除deleteCount项，并从该位置起插入。（修改原数组）

fill()：使用特定值填充数组中的一个或多个元素(修改原数组)

filter()：过滤,数组中的每一项运行给定函数，返回满足过滤条件组成的数组

concat()：可以将两个数组合并在一起，如果是使用ES6语法也可以用扩展运算符…来代替

indexOf()：返回当前值在数组中第一次出现位置的索引

lastIndexOf()：返回查找的字符串最后出现的位置，如果没有找到匹配字符串则返回 -1。

every()：判断数组中每一项是否都符合条件

some()：判断数组中是否存在满足的项

includes()：判断一个数组是否包含指定的值

sort(orderfunction):按指定的参数对数组进行排序(修改原数组)

reverse()：将数组反序(修改原数组)

forEach()：循环遍历数组每一项（没有返回值）

map()：循环遍历数组的每一项（有返回值）

copyWithin(): 从数组的指定位置拷贝元素到数组的另一个指定位置中（修改原数组）

find(): 返回第一个匹配的值，并停止查找

findIndex(): 返回第一个匹配值的索引，并停止查找

toLocaleString()、toString():将数组转换为字符串

flat()、flatMap()：扁平化数组

entries() 、keys() 、values():遍历数组

问题 7：CSS 选择器及优先级

选择器

id选择器(#myid)

类选择器(.myclass)

属性选择器(a[rel="external"])

伪类选择器(a:hover, li:nth-child)

标签选择器(div, h1,p)

相邻选择器（h1 + p）

子选择器(ul > li)

后代选择器(li a)

通配符选择器(*)

优先级：

!important

内联样式（1000）

ID选择器（0100）

类选择器/属性选择器/伪类选择器（0010）

元素选择器/伪元素选择器（0001）

关系选择器/通配符选择器（0000）

带!important 标记的样式属性优先级最高；样式表的来源相同时： !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

问题 8：强缓存和协商缓存

浏览器缓存的特点：

浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

根据是否需要向服务器重新发起HTTP请求将缓存过程分为两个部分，分别是强制缓存和协商缓存。

协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。
协商缓存主要有以下两种情况：

协商缓存生效，返回304

协商缓存失效，返回200和请求结果结果

问题 9：== 和 === 区别

1.== 和 === 区别

== 表示相等（值相等）

===表示恒等（类型和值都要相等）

js在比较的时候如果是 == 会先做类型转换，再判断值得大小，如果是===类型和值必须都相等。

2.== === 和 Object.is() 区别

== 相等，如果两边类型不一致，进行隐式转换后，再比较。+0 和 -0 相等， NaN 不等于任何数

=== 严格相等，如果类型不一致，就不相等。 +0 和 -0 相等， NaN 不等于任何数

Object.is() 严格相等，+0 和 -0 不相等， NaN 等于自身

问题 10：script 标签放在 header 里和放在 body 底部里有什么区别？

放在 header 中

你能看到 html 第一时间被加载进来，但页面 body 内容迟迟没有渲染出来。因为在等待 header 标签中 script 脚本的加载，3 秒后，整个页面渲染完成。

放在 body 底部

这次 html 内容第一时间渲染完成，随后等待 js 的加载。

总结：

脚本会阻塞页面的渲染，所以推荐将其放在 body 底部，因为当解析到 script 标签时，通常页面的大部分内容都已经渲染完成，让用户马上能看到一个非空白页面。

另外你能看到多个脚本之间都是异步向服务器请求，他们之间不互相依赖，最终只等待 3 秒，而非 3+3+3 秒。