工寶全國知識網絡競賽在什么地方可以參賽？這次的答題競賽很多人還不知道在什么地方能參加，今天我們主要介紹參與這次競賽的方法，下面有詳細的操作指南，還有競賽的入口，想要參與本次的安全知識網絡競賽的小伙伴，趕緊一起來看看吧。

2020全國安全知識網絡競賽入口操作指南

(APP端競賽活動流程)

一、下載鏈工寶APP

二、鏈工寶APP

1.打開“鏈工寶”APP，進入登錄頁面。

(1) 支持本機號碼一鍵登錄，雙卡手機系統識別的是打開4G網絡的手機號碼，切換手機4G網絡即可切換登錄手機號(推薦使用);

(2) 支持獲取短信驗證碼登錄;

(3) 支持密碼登錄(首次登錄后，進入“我的-設置”，修改登錄密碼)。

三、開始挑戰答題

1.進入首頁，點擊“熱門活動——全國安全生產月知識競賽活動”。

2.本次答題活動的單位類型分為：地方企業、政府單位、央企，請確認自己所在單位類型，點擊相應按鈕。

(1)若為地方企業，請點擊“地方企業”按鈕。彈出對話框內包括“企業入駐”和“加入企業”兩項功能。

加入企業：企業入駐鏈工寶平臺后，員工點擊此處“加入企業”，按頁面項目要求準確填寫(邀請碼請詢問企業管理員)，并提交后，即完成加入企業，可開始挑戰答題。

(2)若為政府單位，請點擊“政府單位”按鈕。彈出對話框內包括“政府單位入駐”和“加入政府單位”兩項功能。

加入政府單位：政府單位入駐鏈工寶平臺后，員工點擊此處“加入政府單位”，按頁面項目要求準確填寫(邀請碼請詢問企業管理員)，并提交后，即完成加入政府單位，可開始挑戰答題。

(3)若為央企，請點擊“央企”按鈕。按頁面項目要求準確填寫，并提交后，即完成加入所在央企，可開始挑戰答題。

3.挑戰答題

員工加入各自的企業、單位后，方能參加挑戰答題活動。點擊“開始競賽”，即開始每日的挑戰答題。

4.參與抽獎

(1)每日挑戰答題結束后，選擇“立即抽獎”。

2)每日挑戰答題結束后，選擇“暫不抽獎”，若想再次抽獎，可點擊活動頁面的“剩余抽獎次數”。

5.練功房

幫助員工學習、掌握更多安全知識，提高挑戰答題的正確率。點擊活動頁面的“練功房”，關注“鏈工寶”微信公眾號，在下方菜單欄選擇“練功房”，可進行答題練習。

6.競賽排名

挑戰答題、抽獎活動均可獲得不同積分。當日積分排名，次日零點更新。點擊活動頁面“競賽排名”，可查看個人排名、地區排名、央企排名。

PC端競賽活動流程

1.登錄中國應急信息網www.emerinfo.cn、全國安全生產月官網www.anquanyue.org.cn，點擊“2020年全國安全生產月”，進入競賽答題活動。

2.賬號登錄

(1)已有賬戶請直接登錄。

(2)若在鏈工寶APP注冊過，在PC端登錄，點擊“忘記密碼”，在APP端設置登錄密碼。

(3)新用戶請先注冊，再登錄。

3.登錄完成后，點擊“去挑戰答題”，即可開始每日挑戰答題。

4.挑戰答題

(1)答對題目可繼續挑戰，直至完成20道題目挑戰。

(2)若答錯，即結束本日挑戰答題活動。

(3)每答對5題，將獲得一次抽獎機會，每日最多獲得5次抽獎機會。

5.參與抽獎。請前往鏈工寶APP參與抽獎活動。

(1)PC端挑戰答題完成后，若參與抽獎活動，需點擊“確定”，返回首頁，下載鏈工寶APP。

(2)用手機掃描鏈工寶APP二維碼，并下載。打開鏈工寶APP，用競賽答題注冊的手機號碼登錄。

(3)選擇“首頁——熱門活動——全國安全生產月知識競賽活動”。

(4)點擊“當日剩余抽獎次數”，即可參與抽獎活動。

6.練功房

幫助員工學習、掌握更多安全知識，提高挑戰答題的正確率。

登錄成功后，點擊“練功房”，關注“鏈工寶”微信公眾號，在下方菜單欄選擇“練功房”，可進行答題練習。

2020全國安全知識網絡競賽答題入口：http://www.emerinfo.cn/

鏈工寶全國知識網絡競賽的答題入口和參與方法都已經分享在上面，希望能幫助到大家哦！

來源：114手機樂園

ummer Vacation

探知課堂

2020年暑期來臨，在結束了一學期緊張充實的課本學習之后，親愛的小讀者們，你們有什么打算呢？合小圖來給大家推薦好活動咯~在這次的系列活動中，我們可以一起學習科普知識，積累生活常識，認識大千世界......有玩有學，充實快樂，趕緊來參加合肥市圖書館的探知課堂線上活動吧！

1 2020年《暑期探知課堂》活動

一、活動時間：7月25日——8月29日

二、活動對象：合肥市圖書館少年讀者

三、活動地點：【合肥市圖書館】微信公眾號

四、活動報名方式

1、不需報名，直接參加。

2、具體每場活動詳情請關注【合肥市圖書館】微信公眾號→點擊菜單欄“ 約·合圖 ”→ “約·活動”，點擊相應活動海報了解詳情。

五、具體活動安排：

六、活動獎品說明：

答題活動的獲獎讀者將獲得精美獎品，獲獎讀者名單及領獎時間地點請于暑期活動全部結束后及時關注【合肥市圖書館】微信公眾號。

2 《知己知彼，科學戰疫》

2020年《暑期探知課堂》活動一

新型冠狀病毒肺炎影響著每個人的生活，也讓一直無處不在卻“默默無聞”的病毒成為了數億人關注的對象，我們從未如此迫切地想要了解與之相關的一切：為什么病毒感染大多伴隨發熱？病毒以什么方式攻擊宿主？動物身上的病毒很容易傳播到人體嗎？人口流動對病毒傳染進程的影響有多大？了解病毒，才能戰勝病毒，在這個特殊的時期，我們一起——知己知彼，科學戰“疫”。

一、活動時間：7月25日—7月31日

二、活動對象：合肥市圖書館少年讀者

三、活動地點：【合肥市圖書館】微信公眾號

四、答題方式

2. 電腦登錄活動頁面→仔細閱讀活動說明并點擊立即參與按鈕→填寫并提交個人信息→觀看視頻回答問題。

http://www.libvideo.com/topicSum/contest41s/indexHFDZ.html

五、答題規則

1.答題時間限定為60分鐘，逾時提交者無效。

2.活動提供4個視頻，每個視頻5個問題。

3.本活動以答題得分成績排序，得分相同者，按答題所用時間少者獲勝。

六、活動說明

1.請答題讀者完整、準確、真實提交個人姓名、手機號。

2.答題活動的獲獎讀者將獲得精美獎品，獲獎名單及領獎時間地點請于暑期活動全部結束后及時關注【合肥市圖書館】微信公眾號。

3.探知課堂其他場次活動請關注【合肥市圖書館】微信公眾號→點擊菜單欄“ 約·合圖 ”→ “約·活動”了解詳情。

與君悅讀
90后小哥哥將沙子玩出新高度，神還原87版《紅樓夢》，勾起無數回憶···
94年單親爸爸帶4歲女兒騎車去拉薩，穿峽谷、翻雪山，71天走了4000多公里：想送給女兒世界的星辰大海
你已經和很多人見完了這輩子最后一面
詩詞聯世界，風雅頌古今| 第三屆家庭古詩詞知識大賽正式啟動！
冰箱里放了5年的燉肉，她拼命也要吃完……
你的活動
非遺、編程、科學實驗...暑期來合圖，不只看好書
【答題有獎】暑假來這里！品經典， 學文化，答題得獎品...
贈書|大唐長安、明南京城、明清北京...建筑學者張克群還原真實的“天子腳下”
贈書|我媽這輩子從沒穿過裙子，也沒跳過舞
報名|“匠人匠心·分享傳承” 2020合肥非遺體驗營開班啦
遇見合圖
不只是遇見溫暖
遇見你
不只是遇見你

章轉載：樂字節

簡答題

1、什么是防抖和節流？有什么區別？如何實現？

參考答案

防抖

觸發高頻事件后n秒內函數只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間

思路：

每次觸發事件時都取消之前的延時調用方法

function debounce(fn) {

let timeout=null; // 創建一個標記用來存放定時器的返回值

return function () {

clearTimeout(timeout); // 每當用戶輸入的時候把前一個 setTimeout clear 掉

timeout=setTimeout(()=> { // 然后又創建一個新的 setTimeout, 這樣就能保證輸入字符后的 interval 間隔內如果還有字符輸入的話，就不會執行 fn 函數

fn.apply(this, arguments);

}, 500);

};

}

function sayHi() {

console.log('防抖成功');

}

var inp=document.getElementById('inp');

inp.addEventListener('input', debounce(sayHi)); // 防抖

節流

高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函數的執行頻率

思路：

每次觸發事件時都判斷當前是否有等待執行的延時函數

function throttle(fn) {

let canRun=true; // 通過閉包保存一個標記

return function () {

if (!canRun) return; // 在函數開頭判斷標記是否為true，不為true則return

canRun=false; // 立即設置為false

setTimeout(()=> { // 將外部傳入的函數的執行放在setTimeout中

fn.apply(this, arguments);

// 最后在setTimeout執行完畢后再把標記設置為true(關鍵)表示可以執行下一次循環了。當定時器沒有執行的時候標記永遠是false，在開頭被return掉

canRun=true;

}, 500);

};

}

function sayHi(e) {

console.log(e.target.innerWidth, e.target.innerHeight);

}

window.addEventListener('resize', throttle(sayHi));

2、 get請求傳參長度的誤區、get和post請求在緩存方面的區別

誤區：我們經常說get請求參數的大小存在限制，而post請求的參數大小是無限制的。

參考答案

實際上HTTP 協議從未規定 GET/POST 的請求長度限制是多少。對get請求參數的限制是來源與瀏覽器或web服務器，瀏覽器或web服務器限制了url的長度。為了明確這個概念，我們必須再次強調下面幾點:

HTTP 協議 未規定 GET 和POST的長度限制

GET的最大長度顯示是因為 瀏覽器和 web服務器限制了 URI的長度

不同的瀏覽器和WEB服務器，限制的最大長度不一樣

要支持IE，則最大長度為2083byte，若只支持Chrome，則最大長度 8182byte

補充補充一個get和post在緩存方面的區別：

get請求類似于查找的過程，用戶獲取數據，可以不用每次都與數據庫連接，所以可以使用緩存。

post不同，post做的一般是修改和刪除的工作，所以必須與數據庫交互，所以不能使用緩存。因此get請求適合于請求緩存。

3、模塊化發展歷程

可從IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、<script type="module"> 這幾個角度考慮。

參考答案

模塊化主要是用來抽離公共代碼，隔離作用域，避免變量沖突等。

IIFE：使用自執行函數來編寫模塊化，特點：在一個單獨的函數作用域中執行代碼，避免變量沖突。

(function(){

return {

data:[]

}

})()

AMD：使用requireJS 來編寫模塊化，特點：依賴必須提前聲明好。

define('./index.js',function(code){

// code 就是index.js 返回的內容

})

CMD：使用seaJS 來編寫模塊化，特點：支持動態引入依賴文件。

define(function(require, exports, module) {

var indexCode=require('./index.js');

})

CommonJS：nodejs 中自帶的模塊化。

var fs=require('fs');

UMD：兼容AMD，CommonJS 模塊化語法。

webpack(require.ensure)：webpack 2.x 版本中的代碼分割。

ES Modules：ES6 引入的模塊化，支持import 來引入另一個 js 。

import a from 'a';

4、npm 模塊安裝機制，為什么輸入 npm install 就可以自動安裝對應的模塊？

參考答案

1. npm 模塊安裝機制：

發出npm install命令

查詢node_modules目錄之中是否已經存在指定模塊

npm 向 registry 查詢模塊壓縮包的網址

下載壓縮包，存放在根目錄下的.npm目錄里

解壓壓縮包到當前項目的node_modules目錄

若存在，不再重新安裝

若不存在

2. npm 實現原理

輸入 npm install 命令并敲下回車后，會經歷如下幾個階段（以 npm 5.5.1 為例）：

1. npm 模塊安裝機制：

發出npm install命令

查詢node_modules目錄之中是否已經存在指定模塊

npm 向 registry 查詢模塊壓縮包的網址

下載壓縮包，存放在根目錄下的.npm目錄里

解壓壓縮包到當前項目的node_modules目錄

若存在，不再重新安裝

若不存在

2. npm 實現原理

輸入 npm install 命令并敲下回車后，會經歷如下幾個階段（以 npm 5.5.1 為例）：

執行工程自身 preinstall

當前 npm 工程如果定義了 preinstall 鉤子此時會被執行。

確定首層依賴模塊

首先需要做的是確定工程中的首層依賴，也就是 dependencies 和 devDependencies 屬性中直接指定的模塊（假設此時沒有添加 npm install 參數）。

工程本身是整棵依賴樹的根節點，每個首層依賴模塊都是根節點下面的一棵子樹，npm 會開啟多進程從每個首層依賴模塊開始逐步尋找更深層級的節點。

獲取模塊

獲取模塊是一個遞歸的過程，分為以下幾步：

獲取模塊信息。在下載一個模塊之前，首先要確定其版本，這是因為 package.json 中往往是 semantic version（semver，語義化版本）。此時如果版本描述文件（npm-shrinkwrap.json 或 package-lock.json）中有該模塊信息直接拿即可，如果沒有則從倉庫獲取。如 packaeg.json 中某個包的版本是 ^1.1.0，npm 就會去倉庫中獲取符合 1.x.x 形式的最新版本。

獲取模塊實體。上一步會獲取到模塊的壓縮包地址（resolved 字段），npm 會用此地址檢查本地緩存，緩存中有就直接拿，如果沒有則從倉庫下載。

查找該模塊依賴，如果有依賴則回到第1步，如果沒有則停止。

模塊扁平化（dedupe）

上一步獲取到的是一棵完整的依賴樹，其中可能包含大量重復模塊。比如 A 模塊依賴于 loadsh，B 模塊同樣依賴于 lodash。在 npm3 以前會嚴格按照依賴樹的結構進行安裝，因此會造成模塊冗余。

從 npm3 開始默認加入了一個 dedupe 的過程。它會遍歷所有節點，逐個將模塊放在根節點下面，也就是 node-modules 的第一層。當發現有重復模塊時，則將其丟棄。

這里需要對重復模塊進行一個定義，它指的是模塊名相同且 semver 兼容。每個 semver 都對應一段版本允許范圍，如果兩個模塊的版本允許范圍存在交集，那么就可以得到一個兼容版本，而不必版本號完全一致，這可以使更多冗余模塊在 dedupe 過程中被去掉。

比如 node-modules 下 foo 模塊依賴 lodash@^1.0.0，bar 模塊依賴 lodash@^1.1.0，則 ^1.1.0 為兼容版本。

而當 foo 依賴 lodash@^2.0.0，bar 依賴 lodash@^1.1.0，則依據 semver 的規則，二者不存在兼容版本。會將一個版本放在 node_modules 中，另一個仍保留在依賴樹里。

舉個例子，假設一個依賴樹原本是這樣：

node_modules -- foo ---- lodash@version1

-- bar ---- lodash@version2

假設 version1 和 version2 是兼容版本，則經過 dedupe 會成為下面的形式：

node_modules -- foo

-- bar

-- lodash（保留的版本為兼容版本）

假設 version1 和 version2 為非兼容版本，則后面的版本保留在依賴樹中：

node_modules -- foo -- lodash@version1

-- bar ---- lodash@version2

安裝模塊

這一步將會更新工程中的 node_modules，并執行模塊中的生命周期函數（按照 preinstall、install、postinstall 的順序）。

執行工程自身生命周期

當前 npm 工程如果定義了鉤子此時會被執行（按照 install、postinstall、prepublish、prepare 的順序）。

最后一步是生成或更新版本描述文件，npm install 過程完成。

5、ES5的繼承和ES6的繼承有什么區別？

參考答案

ES5的繼承時通過prototype或構造函數機制來實現。ES5的繼承實質上是先創建子類的實例對象，然后再將父類的方法添加到this上（Parent.apply(this)）。

ES6的繼承機制完全不同，實質上是先創建父類的實例對象this（所以必須先調用父類的super()方法），然后再用子類的構造函數修改this。

具體的：ES6通過class關鍵字定義類，里面有構造方法，類之間通過extends關鍵字實現繼承。子類必須在constructor方法中調用super方法，否則新建實例報錯。因為子類沒有自己的this對象，而是繼承了父類的this對象，然后對其進行加工。如果不調用super方法，子類得不到this對象。

ps：super關鍵字指代父類的實例，即父類的this對象。在子類構造函數中，調用super后，才可使用this關鍵字，否則報錯。

6、setTimeout、Promise、Async/Await 的區別

參考答案

7、定時器的執行順序或機制？

參考答案

**因為js是單線程的，瀏覽器遇到setTimeout或者setInterval會先執行完當前的代碼塊，在此之前會把定時器推入瀏覽器的待執行事件隊列里面，等到瀏覽器執行完當前代碼之后會看一下事件隊列里面有沒有任務，有的話才執行定時器的代碼。**所以即使把定時器的時間設置為0還是會先執行當前的一些代碼。

function test(){

var aa=0;

var testSet=setInterval(function(){

aa++;

console.log(123);

if(aa<10){

clearInterval(testSet);

}

},20);

var testSet1=setTimeout(function(){

console.log(321)

},1000);

for(var i=0;i<10;i++){

console.log('test');

}

}

test()

輸出結果：

test //10次

undefined

123

321

8、['1','2','3'].map(parseInt) 輸出什么,為什么?

參考答案

輸出：[1, NaN, NaN]

首先讓我們回顧一下，map函數的第一個參數callback：

var new_array=arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])這個callback一共可以接收三個參數，其中第一個參數代表當前被處理的元素，而第二個參數代表該元素的索引。

而parseInt則是用來解析字符串的，使字符串成為指定基數的整數。parseInt(string, radix)接收兩個參數，第一個表示被處理的值（字符串），第二個表示為解析時的基數。

了解這兩個函數后，我們可以模擬一下運行情況

parseInt('1', 0) //radix為0時，且string參數不以“0x”和“0”開頭時，按照10為基數處理。這個時候返回1

parseInt('2', 1) //基數為1（1進制）表示的數中，最大值小于2，所以無法解析，返回NaN

parseInt('3', 2) //基數為2（2進制）表示的數中，最大值小于3，所以無法解析，返回NaN

map函數返回的是一個數組，所以最后結果為[1, NaN, NaN]

9、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

參考答案

Doctype聲明于文檔最前面，告訴瀏覽器以何種方式來渲染頁面，這里有兩種模式，嚴格模式和混雜模式。

嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行。

混雜模式，向后兼容，模擬老式瀏覽器，防止瀏覽器無法兼容頁面。

10、fetch發送2次請求的原因

參考答案

fetch發送post請求的時候，總是發送2次，第一次狀態碼是204，第二次才成功？

原因很簡單，因為你用fetch的post請求的時候，導致fetch 第一次發送了一個Options請求，詢問服務器是否支持修改的請求頭，如果服務器支持，則在第二次中發送真正的請求。

http、瀏覽器對象

1、HTTPS 握手過程中，客戶端如何驗證證書的合法性

參考答案

首先什么是HTTP協議?

http協議是超文本傳輸協議，位于tcp/ip四層模型中的應用層；通過請求/響應的方式在客戶端和服務器之間進行通信；但是缺少安全性，http協議信息傳輸是通過明文的方式傳輸，不做任何加密，相當于在網絡上裸奔；容易被中間人惡意篡改，這種行為叫做中間人攻擊；

加密通信：

為了安全性，雙方可以使用對稱加密的方式key進行信息交流，但是這種方式對稱加密秘鑰也會被攔截，也不夠安全，進而還是存在被中間人攻擊風險；于是人們又想出來另外一種方式，使用非對稱加密的方式；使用公鑰/私鑰加解密；通信方A發起通信并攜帶自己的公鑰，接收方B通過公鑰來加密對稱秘鑰；然后發送給發起方A；A通過私鑰解密；雙發接下來通過對稱秘鑰來進行加密通信；但是這種方式還是會存在一種安全性；中間人雖然不知道發起方A的私鑰，但是可以做到偷天換日，將攔截發起方的公鑰key;并將自己生成的一對公/私鑰的公鑰發送給B；接收方B并不知道公鑰已經被偷偷換過；按照之前的流程，B通過公鑰加密自己生成的對稱加密秘鑰key2;發送給A；這次通信再次被中間人攔截，盡管后面的通信，兩者還是用key2通信，但是中間人已經掌握了Key2;可以進行輕松的加解密；還是存在被中間人攻擊風險；

解決困境：權威的證書頒發機構CA來解決；

制作證書：作為服務端的A，首先把自己的公鑰key1發給證書頒發機構，向證書頒發機構進行申請證書；證書頒發機構有一套自己的公私鑰，CA通過自己的私鑰來加密key1,并且通過服務端網址等信息生成一個證書簽名，證書簽名同樣使用機構的私鑰進行加密；制作完成后，機構將證書發給A；

校驗證書真偽：當B向服務端A發起請求通信的時候，A不再直接返回自己的公鑰，而是返回一個證書；

說明：各大瀏覽器和操作系統已經維護了所有的權威證書機構的名稱和公鑰。B只需要知道是哪個權威機構發的證書，使用對應的機構公鑰，就可以解密出證書簽名；接下來，B使用同樣的規則，生成自己的證書簽名，如果兩個簽名是一致的，說明證書是有效的；簽名驗證成功后，B就可以再次利用機構的公鑰，解密出A的公鑰key1;接下來的操作，就是和之前一樣的流程了；

中間人是否會攔截發送假證書到B呢？

因為證書的簽名是由服務器端網址等信息生成的，并且通過第三方機構的私鑰加密中間人無法篡改；所以最關鍵的問題是證書簽名的真偽；

https主要的思想是在http基礎上增加了ssl安全層，即以上認證過程；

2、TCP三次握手和四次揮手

參考答案

三次握手之所以是三次是保證client和server均讓對方知道自己的接收和發送能力沒問題而保證的最小次數。

第一次client=> server 只能server判斷出client具備發送能力 第二次 server=> client client就可以判斷出server具備發送和接受能力。此時client還需讓server知道自己接收能力沒問題于是就有了第三次 第三次 client=> server 雙方均保證了自己的接收和發送能力沒有問題

其中，為了保證后續的握手是為了應答上一個握手，每次握手都會帶一個標識 seq，后續的ACK都會對這個seq進行加一來進行確認。

3、img iframe script 來發送跨域請求有什么優缺點？

參考答案

iframe

優點：跨域完畢之后DOM操作和互相之間的JavaScript調用都是沒有問題的

缺點：1.若結果要以URL參數傳遞，這就意味著在結果數據量很大的時候需要分割傳遞，巨煩。2.還有一個是iframe本身帶來的，母頁面和iframe本身的交互本身就有安全性限制。

script

優點：可以直接返回json格式的數據，方便處理

缺點：只接受GET請求方式

圖片ping

優點：可以訪問任何url，一般用來進行點擊追蹤，做頁面分析常用的方法

缺點：不能訪問響應文本，只能監聽是否響應

4、http和https的區別？

參考答案

http傳輸的數據都是未加密的，也就是明文的，網景公司設置了SSL協議來對http協議傳輸的數據進行加密處理，簡單來說https協議是由http和ssl協議構建的可進行加密傳輸和身份認證的網絡協議，比http協議的安全性更高。主要的區別如下：

Https協議需要ca證書，費用較高。

http是超文本傳輸協議，信息是明文傳輸，https則是具有安全性的ssl加密傳輸協議。

使用不同的鏈接方式，端口也不同，一般而言，http協議的端口為80，https的端口為443

http的連接很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，比http協議安全。

5、什么是Bom？有哪些常用的Bom屬性？

參考答案

Bom是瀏覽器對象

location對象

location.href-- 返回或設置當前文檔的URL

location.search -- 返回URL中的查詢字符串部分。例如 http://www.dreamdu.com/dreamd... 返回包括(?)后面的內容?id=5&name=dreamdu

location.hash -- 返回URL#后面的內容，如果沒有#，返回空 location.host -- 返回URL中的域名部分，例如www.dreamdu.com

location.hostname -- 返回URL中的主域名部分，例如dreamdu.com

location.pathname -- 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/

location.port -- 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080

location.protocol -- 返回URL中的協議部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的內容http:

location.assign -- 設置當前文檔的URL

location.replace() -- 設置當前文檔的URL，并且在history對象的地址列表中移除這個URL location.replace(url);

location.reload() -- 重載當前頁面

history對象

history.go() -- 前進或后退指定的頁面數

history.go(num); history.back() -- 后退一頁

history.forward() -- 前進一頁

Navigator對象

navigator.userAgent -- 返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)

navigator.cookieEnabled -- 返回瀏覽器是否支持(啟用)cookie

6、Cookie、sessionStorage、localStorage的區別

參考答案

共同點：都是保存在瀏覽器端，并且是同源的

Cookie：cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，可以限制cookie只屬于某個路徑下,存儲的大小很小只有4K左右。（key：可以在瀏覽器和服務器端來回傳遞，存儲容量小，只有大約4K左右）

sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持，localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。（key：本身就是一個回話過程，關閉瀏覽器后消失，session為一個回話，當頁面不同即使是同一頁面打開兩次，也被視為同一次回話）

localStorage：localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。（key：同源窗口都會共享，并且不會失效，不管窗口或者瀏覽器關閉與否都會始終生效）

補充說明一下cookie的作用：

保存用戶登錄狀態。例如將用戶id存儲于一個cookie內，這樣當用戶下次訪問該頁面時就不需要重新登錄了，現在很多論壇和社區都提供這樣的功能。cookie還可以設置過期時間，當超過時間期限后，cookie就會自動消失。因此，系統往往可以提示用戶保持登錄狀態的時間：常見選項有一個月、三個 月、一年等。

跟蹤用戶行為。例如一個天氣預報網站，能夠根據用戶選擇的地區顯示當地的天氣情況。如果每次都需要選擇所在地是煩瑣的，當利用了 cookie后就會顯得很人性化了，系統能夠記住上一次訪問的地區，當下次再打開該頁面時，它就會自動顯示上次用戶所在地區的天氣情況。因為一切都是在后 臺完成，所以這樣的頁面就像為某個用戶所定制的一樣，使用起來非常方便

定制頁面。如果網站提供了換膚或更換布局的功能，那么可以使用cookie來記錄用戶的選項，例如：背景色、分辨率等。當用戶下次訪問時，仍然可以保存上一次訪問的界面風格。

7、Cookie如何防范XSS攻擊

參考答案

XSS（跨站腳本攻擊）是指攻擊者在返回的HTML中嵌入javascript腳本，為了減輕這些攻擊，需要在HTTP頭部配上，set-cookie：

httponly-這個屬性可以防止XSS,它會禁止javascript腳本來訪問cookie。

secure - 這個屬性告訴瀏覽器僅在請求為https的時候發送cookie。

結果應該是這樣的：Set-Cookie=.....

8、瀏覽器和 Node 事件循環的區別？

參考答案

其中一個主要的區別在于瀏覽器的event loop 和nodejs的event loop 在處理異步事件的順序是不同的,nodejs中有micro event;其中Promise屬于micro event 該異步事件的處理順序就和瀏覽器不同.nodejs V11.0以上 這兩者之間的順序就相同了.

function test () {

console.log('start')

setTimeout(()=> {

console.log('children2')

Promise.resolve().then(()=> {console.log('children2-1')})

}, 0)

setTimeout(()=> {

console.log('children3')

Promise.resolve().then(()=> {console.log('children3-1')})

}, 0)

Promise.resolve().then(()=> {console.log('children1')})

console.log('end')

}

test()

// 以上代碼在node11以下版本的執行結果(先執行所有的宏任務，再執行微任務)

// start

// end

// children1

// children2

// children3

// children2-1

// children3-1

// 以上代碼在node11及瀏覽器的執行結果(順序執行宏任務和微任務)

// start

// end

// children1

// children2

// children2-1

// children3

// children3-1

9、簡述HTTPS中間人攻擊

參考答案

https協議由 http + ssl 協議構成，具體的鏈接過程可參考SSL或TLS握手的概述

中間人攻擊過程如下：

服務器向客戶端發送公鑰。

攻擊者截獲公鑰，保留在自己手上。

然后攻擊者自己生成一個【偽造的】公鑰，發給客戶端。

客戶端收到偽造的公鑰后，生成加密hash值發給服務器。

攻擊者獲得加密hash值，用自己的私鑰解密獲得真秘鑰。

同時生成假的加密hash值，發給服務器。

服務器用私鑰解密獲得假秘鑰。

服務器用加秘鑰加密傳輸信息

防范方法：

服務端在發送瀏覽器的公鑰中加入CA證書，瀏覽器可以驗證CA證書的有效性

10、說幾條web前端優化策略

參考答案

(1). 減少HTTP請求數

這條策略基本上所有前端人都知道，而且也是最重要最有效的。都說要減少HTTP請求，那請求多了到底會怎么樣呢？首先，每個請求都是有成本的，既包 含時間成本也包含資源成本。一個完整的請求都需要經過DNS尋址、與服務器建立連接、發送數據、等待服務器響應、接收數據這樣一個“漫長”而復雜的過程。時間成本就是用戶需要看到或者“感受”到這個資源是必須要等待這個過程結束的，資源上由于每個請求都需要攜帶數據，因此每個請求都需要占用帶寬。

另外，由于瀏覽器進行并發請求的請求數是有上限的，因此請求數多了以后，瀏覽器需要分批進行請求，因此會增加用戶的等待時間，會給 用戶造成站點速度慢這樣一個印象，即使可能用戶能看到的第一屏的資源都已經請求完了，但是瀏覽器的進度條會一直存在。減少HTTP請求數的主要途徑包括：

(2). 從設計實現層面簡化頁面

如果你的頁面像百度首頁一樣簡單，那么接下來的規則基本上都用不著了。保持頁面簡潔、減少資源的使用時最直接的。如果不是這樣，你的頁面需要華麗的皮膚，則繼續閱讀下面的內容。

(3). 合理設置HTTP緩存

緩存的力量是強大的，恰當的緩存設置可以大大的減少HTTP請求。以有啊首頁為例，當瀏覽器沒有緩存的時候訪問一共會發出78個請求，共600多K 數據（如圖1.1），而當第二次訪問即瀏覽器已緩存之后訪問則僅有10個請求，共20多K數據（如圖1.2）。（這里需要說明的是，如果直接F5刷新頁面 的話效果是不一樣的，這種情況下請求數還是一樣，不過被緩存資源的請求服務器是304響應，只有Header沒有Body，可以節省帶寬）

怎樣才算合理設置？原則很簡單，能緩存越多越好，能緩存越久越好。例如，很少變化的圖片資源可以直接通過HTTP Header中的Expires設置一個很長的過期頭；變化不頻繁而又可能會變的資源可以使用Last-Modifed來做請求驗證。盡可能的讓資源能夠 在緩存中待得更久。

(4). 資源合并與壓縮

如果可以的話，盡可能的將外部的腳本、樣式進行合并，多個合為一個。另外，CSS、Javascript、Image都可以用相應的工具進行壓縮，壓縮后往往能省下不少空間。

(5). CSS Sprites

合并CSS圖片，減少請求數的又一個好辦法。

(6). Inline Images

使用data: URL scheme的方式將圖片嵌入到頁面或CSS中，如果不考慮資源管理上的問題的話，不失為一個好辦法。如果是嵌入頁面的話換來的是增大了頁面的體積，而且無法利用瀏覽器緩存。使用在CSS中的圖片則更為理想一些。

(7). Lazy Load Images

這條策略實際上并不一定能減少HTTP請求數，但是卻能在某些條件下或者頁面剛加載時減少HTTP請求數。對于圖片而言，在頁面剛加載的時候可以只 加載第一屏，當用戶繼續往后滾屏的時候才加載后續的圖片。這樣一來，假如用戶只對第一屏的內容感興趣時，那剩余的圖片請求就都節省了。有啊首頁曾經的做法 是在加載的時候把第一屏之后的圖片地址緩存在Textarea標簽中，待用戶往下滾屏的時候才“惰性”加載。

11、你了解的瀏覽器的重繪和回流導致的性能問題

參考答案

重繪（Repaint）和回流（Reflow）

重繪和回流是渲染步驟中的一小節，但是這兩個步驟對于性能影響很大。

重繪是當節點需要更改外觀而不會影響布局的，比如改變 color就叫稱為重繪

回流是布局或者幾何屬性需要改變就稱為回流。

回流必定會發生重繪，重繪不一定會引發回流。回流所需的成本比重繪高的多，改變深層次的節點很可能導致父節點的一系列回流。

所以以下幾個動作可能會導致性能問題：

改變 window 大小

改變字體

添加或刪除樣式

文字改變

定位或者浮動

盒模型

很多人不知道的是，重繪和回流其實和 Event loop 有關。

當 Event loop 執行完 Microtasks 后，會判斷 document 是否需要更新。因為瀏覽器是 60Hz 的刷新率，每 16ms 才會更新一次。

然后判斷是否有 resize或者 scroll，有的話會去觸發事件，所以 resize和 scroll事件也是至少 16ms 才會觸發一次，并且自帶節流功能。

判斷是否觸發了 media query

更新動畫并且發送事件

判斷是否有全屏操作事件

執行 requestAnimationFrame回調

執行 IntersectionObserver回調，該方法用于判斷元素是否可見，可以用于懶加載上，但是兼容性不好

更新界面

以上就是一幀中可能會做的事情。如果在一幀中有空閑時間，就會去執行 requestIdleCallback回調。

減少重繪和回流

使用 translate 替代 top

<div class="test"></div>

<style>

.test {

position: absolute;

top: 10px;

width: 100px;

height: 100px;

background: red;

}

</style>

<script>

setTimeout(()=> {

// 引起回流

document.querySelector('.test').style.top='100px'

}, 1000)

</script>

使用 visibility替換 display: none，因為前者只會引起重繪，后者會引發回流（改變了布局）

把 DOM 離線后修改，比如：先把 DOM 給 display:none(有一次 Reflow)，然后你修改100次，然后再把它顯示出來

不要把 DOM 結點的屬性值放在一個循環里當成循環里的變量

for(let i=0; i < 1000; i++) {

// 獲取 offsetTop 會導致回流，因為需要去獲取正確的值

console.log(document.querySelector('.test').style.offsetTop)

}

不要使用 table 布局，可能很小的一個小改動會造成整個 table 的重新布局

動畫實現的速度的選擇，動畫速度越快，回流次數越多，也可以選擇使用 requestAnimationFrame

CSS 選擇符從右往左匹配查找，避免 DOM 深度過深

將頻繁運行的動畫變為圖層，圖層能夠阻止該節點回流影響別的元素。比如對于 video標簽，瀏覽器會自動將該節點變為圖層。

react、Vue

1、寫 React / Vue 項目時為什么要在列表組件中寫 key，其作用是什么？

參考答案

vue和react都是采用diff算法來對比新舊虛擬節點，從而更新節點。在vue的diff函數中（建議先了解一下diff算法過程）。在交叉對比中，當新節點跟舊節點頭尾交叉對比沒有結果時，會根據新節點的key去對比舊節點數組中的key，從而找到相應舊節點（這里對應的是一個key=> index 的map映射）。如果沒找到就認為是一個新增節點。而如果沒有key，那么就會采用遍歷查找的方式去找到對應的舊節點。一種一個map映射，另一種是遍歷查找。相比而言。map映射的速度更快。vue部分源碼如下：

// vue項目 src/core/vdom/patch.js -488行

// 以下是為了閱讀性進行格式化后的代碼

// oldCh 是一個舊虛擬節點數組

if (isUndef(oldKeyToIdx)) {

oldKeyToIdx=createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)

}

if(isDef(newStartVnode.key)) {

// map 方式獲取

idxInOld=oldKeyToIdx[newStartVnode.key]

} else {

// 遍歷方式獲取

idxInOld=findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)

}

創建map函數

function createKeyToOldIdx (children, beginIdx, endIdx) {

let i, key

const map={}

for (i=beginIdx; i <=endIdx; ++i) {

key=children[i].key

if (isDef(key)) map[key]=i

}

return map

}

遍歷尋找

// sameVnode 是對比新舊節點是否相同的函數

function findIdxInOld (node, oldCh, start, end) {

for (let i=start; i < end; i++) {

const c=oldCh[i]

if (isDef(c) && sameVnode(node, c)) return i

}

}

2、React 中 setState 什么時候是同步的，什么時候是異步的？

參考答案

在React中，如果是由React引發的事件處理（比如通過onClick引發的事件處理），調用setState不會同步更新this.state，除此之外的setState調用會同步執行this.state。所謂“除此之外”，指的是繞過React通過addEventListener直接添加的事件處理函數，還有通過setTimeout/setInterval產生的異步調用。

**原因：**在React的setState函數實現中，會根據一個變量isBatchingUpdates判斷是直接更新this.state還是放到隊列中回頭再說，而isBatchingUpdates默認是false，也就表示setState會同步更新this.state，但是，有一個函數batchedUpdates，這個函數會把isBatchingUpdates修改為true，而當React在調用事件處理函數之前就會調用這個batchedUpdates，造成的后果，就是由React控制的事件處理過程setState不會同步更新this.state。

3、下面輸出什么

class Example extends React.Component {

constructor() {

super();

this.state={

val: 0

};

}

componentDidMount() {

this.setState({val: this.state.val + 1});

console.log(this.state.val); // 第 1 次 log

this.setState({val: this.state.val + 1});

console.log(this.state.val); // 第 2 次 log

setTimeout(()=> {

this.setState({val: this.state.val + 1});

console.log(this.state.val); // 第 3 次 log

this.setState({val: this.state.val + 1});

console.log(this.state.val); // 第 4 次 log

}, 0);

}

render() {

return null;

}

};

1、第一次和第二次都是在 react 自身生命周期內，觸發時 isBatchingUpdates 為 true，所以并不會直接執行更新 state，而是加入了 dirtyComponents，所以打印時獲取的都是更新前的狀態 0。

2、兩次 setState 時，獲取到 this.state.val 都是 0，所以執行時都是將 0 設置成 1，在 react 內部會被合并掉，只執行一次。設置完成后 state.val 值為 1。

3、setTimeout 中的代碼，觸發時 isBatchingUpdates 為 false，所以能夠直接進行更新，所以連著輸出 2，3。

輸出： 0 0 2 3

4、為什么虛擬dom會提高性能?

參考答案

虛擬dom相當于在js和真實dom中間加了一個緩存，利用dom diff算法避免了沒有必要的dom操作，從而提高性能。

具體實現步驟如下：

用 JavaScript 對象結構表示 DOM 樹的結構；然后用這個樹構建一個真正的 DOM 樹，插到文檔當中

當狀態變更的時候，重新構造一棵新的對象樹。然后用新的樹和舊的樹進行比較，記錄兩棵樹差異

把2所記錄的差異應用到步驟1所構建的真正的DOM樹上，視圖就更新了。

css

1、分析比較 opacity: 0、visibility: hidden、display: none 優劣和適用場景

參考答案

結構：display:none: 會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間, 不能點擊， visibility: hidden:不會讓元素從渲染樹消失，渲染元素繼續占據空間，只是內容不可見，不能點擊 opacity: 0: 不會讓元素從渲染樹消失，渲染元素繼續占據空間，只是內容不可見，可以點擊

繼承：display: none：是非繼承屬性，子孫節點消失由于元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示。visibility: hidden：是繼承屬性，子孫節點消失由于繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式。

性能：displaynone : 修改元素會造成文檔回流,讀屏器不會讀取display: none元素內容，性能消耗較大 visibility:hidden: 修改元素只會造成本元素的重繪,性能消耗較少讀屏器讀取visibility: hidden元素內容 opacity: 0 ：修改元素會造成重繪，性能消耗較少

聯系：它們都能讓元素不可見

2、清除浮動的方式有哪些?比較好的是哪一種?

參考答案

常用的一般為三種.clearfix, clear:both,overflow:hidden;

比較好是 .clearfix,偽元素萬金油版本,后兩者有局限性.

.clearfix:after {

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

<!--

為毛沒有 zoom ,_height 這些,IE6,7這類需要 csshack 不再我們考慮之內了

.clearfix 還有另外一種寫法,

-->

.clearfix:before, .clearfix:after {

content:"";

display:table;

}

.clearfix:after{

clear:both;

overflow:hidden;

}

.clearfix{

zoom:1;

}

<!--

用display:table 是為了避免外邊距margin重疊導致的margin塌陷,

內部元素默認會成為 table-cell 單元格的形式

-->

clear:both:若是用在同一個容器內相鄰元素上,那是賊好的,有時候在容器外就有些問題了, 比如相鄰容器的包裹層元素塌陷

overflow:hidden:這種若是用在同個容器內,可以形成 BFC避免浮動造成的元素塌陷

4、css sprite 是什么,有什么優缺點

參考答案

概念：將多個小圖片拼接到一個圖片中。通過 background-position 和元素尺寸調節需要顯示的背景圖案。

優點：

減少 HTTP 請求數，極大地提高頁面加載速度

增加圖片信息重復度，提高壓縮比，減少圖片大小

更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現

缺點：

圖片合并麻煩

維護麻煩，修改一個圖片可能需要重新布局整個圖片，樣式

5、link與@import的區別

參考答案

link是 HTML 方式， @import是 CSS 方式

link最大限度支持并行下載，@import過多嵌套導致串行下載，出現FOUC

link可以通過rel="alternate stylesheet"指定候選樣式

瀏覽器對link支持早于@import，可以使用@import對老瀏覽器隱藏樣式

@import必須在樣式規則之前，可以在 css 文件中引用其他文件

總體來說：link 優于@import

6、display: block;和display: inline;的區別

參考答案

block元素特點：

1.處于常規流中時，如果width沒有設置，會自動填充滿父容器 2.可以應用margin/padding 3.在沒有設置高度的情況下會擴展高度以包含常規流中的子元素 4.處于常規流中時布局時在前后元素位置之間（獨占一個水平空間） 5.忽略vertical-align

inline元素特點

1.水平方向上根據direction依次布局

2.不會在元素前后進行換行

3.受white-space控制

4.margin/padding在豎直方向上無效，水平方向上有效

5.width/height屬性對非替換行內元素無效，寬度由元素內容決定

6.非替換行內元素的行框高由line-height確定，替換行內元素的行框高由height,margin,padding,border決定 7.浮動或絕對定位時會轉換為block8.vertical-align屬性生效

7、容器包含若干浮動元素時如何清理浮動

參考答案

容器元素閉合標簽前添加額外元素并設置clear: both

父元素觸發塊級格式化上下文(見塊級可視化上下文部分)

設置容器元素偽元素進行清理推薦的清理浮動方法

/**

* 在標準瀏覽器下使用

* 1 content內容為空格用于修復opera下文檔中出現

* contenteditable屬性時在清理浮動元素上下的空白

* 2 使用display使用table而不是block：可以防止容器和

* 子元素top-margin折疊,這樣能使清理效果與BFC，IE6/7

* zoom: 1;一致

**/

.clearfix:before,

.clearfix:after {

content: " "; /* 1 */

display: table; /* 2 */

}

.clearfix:after {

clear: both;

}

/**

* IE 6/7下使用

* 通過觸發hasLayout實現包含浮動

**/

.clearfix {

*zoom: 1;

}

8、PNG,GIF,JPG 的區別及如何選

參考答案

GIF:

8 位像素，256 色

無損壓縮

支持簡單動畫

支持 boolean 透明

適合簡單動畫

JPEG：

顏色限于 256

有損壓縮

可控制壓縮質量

不支持透明

適合照片

PNG：

有 PNG8 和 truecolor PNG

PNG8 類似 GIF 顏色上限為 256，文件小，支持 alpha 透明度，無動畫

適合圖標、背景、按鈕

9、display,float,position 的關系

參考答案

如果display為 none，那么 position 和 float 都不起作用，這種情況下元素不產生框

否則，如果 position 值為 absolute 或者 fixed，框就是絕對定位的，float 的計算值為 none，display 根據下面的表格進行調整。

否則，如果 float 不是 none，框是浮動的，display 根據下表進行調整

否則，如果元素是根元素，display 根據下表進行調整

其他情況下 display 的值為指定值 總結起來：絕對定位、浮動、根元素都需要調整display

10、如何水平居中一個元素

參考答案

如果需要居中的元素為常規流中 inline 元素，為父元素設置text-align: center;即可實現

如果需要居中的元素為常規流中 block 元素，1）為元素設置寬度，2）設置左右 margin 為 auto。3）IE6 下需在父元素上設置text-align: center;,再給子元素恢復需要的值

<body>

<div class="content">

aaaaaa aaaaaa a a a a a a a a

</div>

</body>

<style>

body {

background: #DDD;

text-align: center; /* 3 */

}

.content {

width: 500px; /* 1 */

text-align: left; /* 3 */

margin: 0 auto; /* 2 */

background: purple;

}

</style>

如果需要居中的元素為浮動元素，1）為元素設置寬度，2）position: relative;，3）浮動方向偏移量（left 或者 right）設置為 50%，4）浮動方向上的 margin 設置為元素寬度一半乘以-1

<body>

<div class="content">

aaaaaa aaaaaa a a a a a a a a

</div>

</body>

<style>

body {

background: #DDD;

}

.content {

width: 500px; /* 1 */

float: left;

position: relative; /* 2 */

left: 50%; /* 3 */

margin-left: -250px; /* 4 */

background-color: purple;

}

</style>

如果需要居中的元素為絕對定位元素，1）為元素設置寬度，2）偏移量設置為 50%，3）偏移方向外邊距設置為元素寬度一半乘以-1

<body>

<div class="content">

aaaaaa aaaaaa a a a a a a a a

</div>

</body>

<style>

body {

background: #DDD;

position: relative;

}

.content {

width: 800px;

position: absolute;

left: 50%;

margin-left: -400px;

background-color: purple;

}

</style>

如果需要居中的元素為絕對定位元素，1）為元素設置寬度，2）設置左右偏移量都為 0,3）設置左右外邊距都為 auto

<body>

<div class="content">

aaaaaa aaaaaa a a a a a a a a

</div>

</body>

<style>

body {

background: #DDD;

position: relative;

}

.content {

width: 800px;

position: absolute;

margin: 0 auto;

left: 0;

right: 0;

background-color: purple;

}

</style>

JavaScript

1、JS有幾種數據類型,其中基本數據類型有哪些?

參考答案

七種數據類型

Boolean

Null

Undefined

Number

String

Symbol (ECMAScript 6 新定義)

Object

(ES6之前)其中5種為基本類型:string,number,boolean,null,undefined,

ES6出來的Symbol也是原始數據類型 ，表示獨一無二的值

Object為引用類型(范圍挺大),也包括數組、函數,

2、Promise 構造函數是同步執行還是異步執行，那么 then 方法呢？

參考答案

const promise=new Promise((resolve, reject)=> {

console.log(1)

resolve()

console.log(2)

})

promise.then(()=> {

console.log(3)

})

console.log(4)

輸出結果是：

1

2

4

3

promise構造函數是同步執行的，then方法是異步執行的

Promise new的時候會立即執行里面的代碼 then是微任務 會在本次任務執行完的時候執行 setTimeout是宏任務 會在下次任務執行的時候執行

文章轉載：樂字節