chrome使用技巧 chrome开发者工具 浏览器机制 定时器 Promise fetch

一、 chrome使用技巧

1、chrome软件设置：chrome://settings

2、chrome软件标志：chrome://flags

3、chrome版本信息：chrome://version

重新加载：

1、正常重新加载，F5，CTRL+R，加载时使用缓存；

2、硬性重新加载，CTRL+F5，CTRL+SHIFT+R，加载时忽略缓存；
3、清除缓存并硬性重新加载，先按F12，然后长按重新加载按钮，加载时忽略所有缓存，包括通过js下载的文件；

清除所有缓存快捷键：ctrl+shift+delete

忽略ssl校验错误：增加启动参数--ignore-certificate-errors

允许不安全下载：旧版本，软件标志中设置允许不安全下载；新版本，不安全内容中设置允许域名；

Err-Cache-Miss：可能导致重新提交错误请求，可能导致cookie更新失败，解决方法是重启浏览器或清除缓存；

二、 chrome开发者工具

application：查看、编辑、删除cookie；

elements：查看当前页面源码或页面某个元素的源码；

sources：查看站点目录结构以及站点源码，设置请求断点进行JS调试；

network：查看网络请求，拷贝网络请求，重放网络请求Replay XHR；

console：使用当前域名的cookie执行网络请求，执行javascript脚本；

network：

1、Filter支持URL和属性过滤，URL和属性忽略大小写，不能使用正则表达式；

2、Filter支持多个过滤条件，多个过滤条件是and关系，减号是取反操作；

3、Preserve log选项可以保留多个页面的请求记录；

4、解析域名：点击请求 > Headers > General > Remote Address

5、A标签target属性是_blank时无法展示网络信息，网页在新窗口展示，需要在新窗口开启开发者工具；

三、浏览器机制

浏览器对象：

1、navigator.userAgent，浏览器详细信息；

2、window.location.href，浏览器地址信息；

3、document.cookie，cookie信息；

事件循环：

1、事件循环：https://html.spec.whatwg.org/multipage/webappapis.html#event-loops

2、任务队列：https://html.spec.whatwg.org/multipage/webappapis.html#queuing-tasks

3、处理流程：https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model

4、事件循环包含一个或多个任务队列，任务队列是集合，任务执行顺序不确定；

5、事件循环包含一个微任务队列，微任务队列是队列，微任务执行顺序确定；

6、微任务检查时机：同步代码执行完成，每个宏任务执行完成；

7、微任务检查时机：渲染相关操作前后，某些特定API调用后；

8、微任务执行特点：微任务检查之后，所有微任务会全部执行；

09、任务执行顺序：同步代码 -> 微任务 -> 宏任务 -> 微任务；

10、任务执行顺序：宏任务可能生成微任务，实际会更复杂；

11、Promise.then是微任务，Promise.catch是微任务；

12、setTimeout是宏任务，setInterval是宏任务；

四、定时器

1、参考手册：https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers

2、参考手册：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout

3、参考手册：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setInterval

4、setTimeout设置的回调被放入事件循环，主线程执行完成之后执行；

5、setInterval设置的回调被放入事件循环，主线程执行完成之后执行；

function sleep(delay) {
    let start = new Date().getTime();
    while (new Date().getTime() < start+delay);
}
console.log("1");
setTimeout(() => {
    console.log("3");
}, 0);
sleep(1000);
console.log("2");

五、Promise使用介绍

1、入门帮助：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises

2、参考手册：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

3、构造对象：new Promise(executor)

4、参数签名：executor(resolve, reject) {}

5、标记状态：resolve标记成功，reject标记失败

6、状态转换：pending(待定) -> fulfilled(已成功)

7、状态转换：pending(待定) -> rejected(已失败)

8、执行回调：then成功时回调，catch失败时回调；

09、executor在主线程立刻执行，如果耗时会卡住主线程；

10、then和catch被放入事件循环，主线程执行完成之后执行；

function sleep(delay) {
    let start = new Date().getTime();
    while (new Date().getTime() < start+delay);
}
console.log("1");
const p = new Promise(resolve => {
    sleep(1000);
    console.log("2");
    resolve();
});
p.then(() => {
    console.log("4");
});
console.log("3");

六、fetch使用介绍

1、参考手册：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

2、fetch函数用于发起http异步请求；

3、fetch比XMLHttpRequest更加容易使用；

4、fetch调用返回Promise，用于设置成功失败回调；

发起get请求：

fetch('http://localhost:8080/springmvc/test_get.do?name=who',{
method: 'GET', 
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
}).then((resp)=>{return resp.text()}).then((data)=>{console.log(data)})

发起post请求：
fetch('http://localhost:8080/springmvc/test_post.do',{
method: 'POST', 
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'name=who'
}).then((resp)=>{return resp.text()}).then((data)=>{console.log(data)})