JavaScript事件循环与Promise理解及HTML5语义化标签-优快云博客

本文链接：https://blog.youkuaiyun.com/nanana666/article/details/123320397

写出下列代码的执行结果：

    new Promise((resolve) => {
			console.log('1')
    		resolve()
			console.log('2')
     }).then(() => {
    		console.log('3')
     })
     setTimeout(() => {
    		console.log('4')
     })
     console.log('5')
     输出： 1 2 5 3 4
//  解析：
//promise一般有两个参数：resolve（做某事）、reject（拒绝做某事）
function x(resolve,reject){
    if
        resolve
    else
        reject
}
// 例子：
let y=new Promise(x).then(()=>console.log("resolve")).catch(()=>console.log("reject"))
// y就是一个promise对象，用来执行x。
// 当x走到自身逻辑判断时，假如执行了resolve，就会调用then；反之调用catch


// JS单线程- 事件循环机制；
同步操作 - 异步操作【微任务（Promise:MutationObserver） - 宏任务（setTimeout,setInterval,I/O操作）】

请列举几个HTML5语义化标签，并说说语义化有什么优点

优点：
代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
有利于搜索引擎优化（SEO）。

语义化标签：
title：页面主体内容。
hn：h1~h6，分级标题
ul：无序列表。
li：有序列表。
header：页眉通常包括网站标志、主导航、全站链接以及搜索框。
nav：标记导航，仅对文档中重要的链接群使用。
main：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
article：定义外部的内容，其中的内容独立于文档的其余部分。
section：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
aside：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
footer：页脚，只有当父级是body时，才是整个页面的页脚。
small：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
strong：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
em：将其中的文本表示为强调的内容，表现为斜体。
mark：使用黄色突出显示部分文本。
figure：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
figcaption：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
cite：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
blockquoto：定义块引用，块引用拥有它们自己的空间。
q：短的引述（跨浏览器问题，尽量避免使用）。
time：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
abbr：简称或缩写。
dfn：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
address：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
del：移除的内容。
ins：添加的内容。
code：标记代码。
meter：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
progress：定义运行中的进度（进程）。

请列举几种除了px外的CSS度量单位并解释其含义。

rem 相对于根字体大小的单位，比如可以设置 1rem=50px
em 相对于font-size，比如font-size：16px（浏览器默认），则2em=32px
vm 即viewpoint width，视窗宽度，比如1vm的宽度为相对于视窗的宽度的百分之一
vh 即viewpoint height ，同上.

new操作符做了什么？

创建了一个空对象
将空对象的原型，指向构造函数的原型
将空对象作为构造函数的上下文-this指向
对构造函数有返回值的判断；【如果返回值是基础数据类型，则忽略返回值；如果返回值是引用数据类型，则使用return 的返回，也就是new操作符无效；

var func = function(){}
var newO = new func()
new一共经历了四个阶段
1.创建了空对象
var newO = new Object()
2.设置圆形脸
newO,__proto__ = func.prototype
3.将func中的this指向newO
var result = func.call(newO)
4、判断Func的返回值类型：
 如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象

简述cookie/session记住登录状态机制原理。

cookie:是客户端的状态保存机制，
用户验证登录成功后，服务器会将用户信息放在响应头的set-cookie属性中返回客户端，之后每次请求都会携带这个cookie。
存储在本地浏览器，且存储数据量有限，不同的浏览器有不同的存储大小，但一般不超过4KB。因此使用cookie只能存储一些小量的数据。

session:是服务端状态报错机制，
登录成功之后，服务器会在本地开辟一块空间存放用户信息，然后生成一个seesionid 放在cookie中返回客户端，之后每次请求都会携带这个cookie，服务器通过这个sessionId 标识用户信息。
存储在服务器，更安全，不被窃取

网页中接收事件的顺序（事件流）有哪些？它们之间的区别是什么？

事件流有三个阶段：
1 事件捕获阶段：从 window 逐层向下传递到目标元素，过程中遇到注册的捕获事件就会触发它
2处于目标阶段：事件到达目标元素，触发目标元素上注册的事件
3 事件冒泡阶段：从目标元素向上传递到 window，过程中遇到注册的冒泡事件就会触发它

css属性position都有哪些值？

absolute绝对定位
relative相对定位
fixed固定定位
sticky粘性定位,该定位基于用户滚动的位置,它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
static默认值，没有定位
inherit继承父系
initial设置该属性为默认值

简述你对HTTP控制访问（CORS）的理解。

浏览器端
如果发现有一个请求是跨域，那么浏览器会自动先拦截一下，给它的http header加上Origin字段。比如 http://localhost:8080变为Origin:http://localhost:8080。这样一来，服务器端就可以区分这个请求是不是跨域了。
服务器端
当服务器端收到浏览器端发送过来的请求后，会有一个响应header。它会告诉请求的浏览器哪儿些域名可以请求我，哪儿些方法可以执行。
响应回到浏览器端
此时浏览器会根据这个响应自动判断，然后在做决定。
服务器端返回给浏览器端的东西
Access-Control-Allow-Origin 允许跨域的Origin列表
Access-Control-Allow-Methods 允许跨域的方法列表（GET、POST等）
Access-Control-Allow-Headers 允许跨域的Header列表
Access-Control-Expose-Headers 允许暴露给JavaScript代码的Header列表
Access-Control-Max-Age 最大的浏览器缓存时间，单位为s
跨域请求形式
有两种，简单和非简单请求。这里说说我常遇到的 application/json 。这就是一种非简单请求，在以上所写的浏览器端之前，会先进行一次预请求，根据这个结果再去判断是否正式请求。

跨域请求有两种形式：一是简单请求，二是非简单请求
如果为非简单请求，发送正式通信之前，会增加一次HTTP查询请求，称为“预检”请求。
浏览器会先访问服务器，当前网页是否在服务器许可名单中，以及可以使用哪些HTTP动词和头信息字段。
预检的请求方式是OPTIONS ,表示这个请求是用来询问的，预检请求会包含一些头部信息。
Access-Control-Request-Method：浏览器的CORS会使用到哪些HTTP方法
Access-Control-Request-Headers：指定浏览器CORS请求会额外发送的头信息字段
如果服务器否定了预检请求，返回一个正常HTTP响应，但是没有任何关于CORS的头信息字段，因此触发一个错误被XMLHttpRequest对象的onerror回调函数捕获。
如果服务器肯定了预检请求，则回应的CORS相关字段为：
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000
之后过程就和简单请求的流程一致了。