国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

渲染機制/頁面性能/錯誤監控

geekidentity / 1755人閱讀

摘要：所以當執行完后再執行秒后輸出最后的打印順序是什么這道題需要了解運行機制是單線程所謂單線程就是同一時間只能做一件事，任務隊列同步任務和異步任務是異步任務，而是同步任務。

渲染機制

什么是doctype及作用
必須按規范來說

瀏覽器渲染過程
dom + cssom -> reder tree -> layout

重排reflow

定義：DOM結構中的各個元素都有自己的盒子(模型)，這些都需要瀏覽器根據各種樣式來計算并根據計算結果將元素放到它該出現的位置，這個位置稱之為reflow。
觸發：
當你增加、刪除、修改DOM結點時，會導致reflow或repaint.
當你移動DOM的位置，或搞個動畫的時候
修改CSS樣式的時候
當調整窗口大小，或者滾動的時候有可能會觸發。

重繪repaint

定義：
當各種盒子的位置、大小以及其他屬性，例如顏色、字體大小都確定下來后，瀏覽器于是把這些元素都按照各自的特性繪制一遍，于是頁面的內容出現了。只要頁面顯示的發生了變化都是repaint。
觸發repaint：
DOM改動
CSS改動
避免發生repaint：
把所有的DOM都添加到document fragment里面。
布局layout

*js運行機制

......有機會還需要繼續了解
題目一：

console.log(1);
setTimeout(function(){
   console.log(2);
},0);
console.log(3);
//1，3，2
//setTimeout是異步任務，所以不會和console.log同步執行。所以當執行完console.log(2)后再執行setTimeout,0秒后輸出3.
//最后的打印順序是什么？這道題需要了解js運行機制

js是單線程：所謂單線程就是同一時間只能做一件事，

任務隊列：

同步任務和異步任務：
setTimeout、 setInterver是異步任務，而console.log是同步任務。

題目二：

console.log("A");
while(true){
}
console.log("B");
//輸出A
//因為while會不斷循環導致console.log(B)無法執行。

題目三：

console.log("A");
setTimeout(function(){
   console.log(B);
},0);
while(1){
}
//1是true,0是false.

題目四：

for(var i=0;i<4;i++){
setTimeout(function(){
   console.log(i);
},1000);
}
//4，4，4，4
//異步隊列執行時間
//異步任務的放入時間和執行時間
//和上面幾題是兩個概念

如何理解js單線程
在一個時間內只能干一件事

什么是任務隊列
任務隊列有同步任務和異步任務.

什么是Event Loop(事件循環)

什么時候會開啟異步任務：
setTimeout和setInterval
DOM事件：需要用到addEventlistener,當觸發某個事件，放入異步任務隊列中
ES6中的promise

理解哪些語句加入到異步隊列

*理解語句放入異步隊列的時機

頁面性能

提升頁面性能的方法有哪些

資源壓縮合并，減少HTTP請求.(把資源文件變小)

非核心代碼異步加載->異步加載的方式->異步加載的區別

*利用瀏覽器緩存->緩存的分類->緩存原理

使用CDN(屬于網絡優化)

預解析DNS



注：當一次打開時，瀏覽器緩存起不到任何作用，但是使用CDN可以起到作用。

2)異步加載

異步加載的方式：

動態腳本加載(動態創建結點)

defer

async

異步加載的區別:

defer在HTML解析之后才會執行，如果是多個，按照加載順序依次執行。

async是在加載完之后立即執行，如果是多個，執行順序和加載順序無關。

3)瀏覽器緩存

瀏覽器緩存的分類
強緩存：

協商緩存：

錯誤監控

前端錯誤的分類：

即時運行錯誤：代碼錯誤

資源加載錯誤

每種錯誤的捕獲方式
即時錯誤的捕獲方式：

try...catch

window.onerror

資源加載錯誤：

object.onerror

performance.getEntries()

Error事件捕獲

延伸：跨域的js運行錯誤可以捕獲嗎，錯誤提示什么，應該怎么處理？

在script標簽添加crossorigin屬性

設置js資源響應頭Access-Control-Allow-Origin:*

上報錯誤的基本原理

采用Ajax通信的方式上報

利用Image對象上報

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102232.html

相關文章

  • 渲染機制

    摘要：渲染機制瀏覽器渲染機制什么是及作用告訴瀏覽器文件是什么文檔類型，瀏覽器根據它來判斷用什么引擎來解析渲染文件。觸發改動改動例當添加時，最好一次添加，避免多次。 渲染機制 瀏覽器 1. 渲染機制 什么是 DOCTYPE 及作用 DTD 告訴瀏覽器文件是什么文檔類型，瀏覽器根據它來判斷用什么引擎來解析渲染文件。DOCTYPE 用來聲明文檔類型和 DTD 規范。 瀏覽器是怎么渲染過程show...

    Big_fat_cat 評論0 收藏0

  • 馬蜂窩 iOS App 啟動治理：回歸用戶體驗

    摘要：馬蜂窩旅游歷經幾十個版本的開發迭代，在啟動流程上積累了一定的技術債務。我們定義啟動廣告曝光率啟動廣告曝光啟動廣告加載。 增長、活躍、留存是移動 App 的常見核心指標，直接反映一款 App 甚至一個互聯網公司運行的健康程度和發展動能。啟動流程的體驗決定了用戶的第一印象，在一定程度上影響了用戶活躍度和留存率。因此，確保啟動流程的良好體驗至關重要。 「馬蜂窩旅游」App 是馬蜂窩為用戶提供...

    Jinkey 評論0 收藏0

  • GMTC 2019 參會回顧

    摘要：回顧上一次參加還是年。年的還是真正的，年的會議早已經把英文全稱去掉，改稱全球大前端技術大會。同時與產品協作從產品設計方面突出關注點，做產品設計方面的優化，如站新版改造減少頁面元素，將播放器窗口直接顯示在第一屏。 回顧 上一次參加 GMTC 還是 2017 年。那時的我還是剛剛參加工作并在試用期辭職的菜鳥。 2017 年的 GMTC 還是真正的 Global Mobile Tech Co...

    Zack 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<