成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

渲染機(jī)制/頁面性能/錯誤監(jiān)控

geekidentity / 1790人閱讀

摘要：所以當(dāng)執(zhí)行完后再執(zhí)行秒后輸出最后的打印順序是什么這道題需要了解運(yùn)行機(jī)制是單線程所謂單線程就是同一時間只能做一件事，任務(wù)隊(duì)列同步任務(wù)和異步任務(wù)是異步任務(wù)，而是同步任務(wù)。

渲染機(jī)制

什么是doctype及作用
必須按規(guī)范來說

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

重排reflow

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

重繪repaint

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

*js運(yùn)行機(jī)制

......有機(jī)會還需要繼續(xù)了解
題目一：

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

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

任務(wù)隊(duì)列：

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

題目二：

console.log("A");
while(true){
}
console.log("B");
//輸出A
//因?yàn)閣hile會不斷循環(huán)導(dǎo)致console.log(B)無法執(zhí)行。

題目三：

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
//異步隊(duì)列執(zhí)行時間
//異步任務(wù)的放入時間和執(zhí)行時間
//和上面幾題是兩個概念

如何理解js單線程
在一個時間內(nèi)只能干一件事

什么是任務(wù)隊(duì)列
任務(wù)隊(duì)列有同步任務(wù)和異步任務(wù).

什么是Event Loop(事件循環(huán))

什么時候會開啟異步任務(wù)：
setTimeout和setInterval
DOM事件：需要用到addEventlistener,當(dāng)觸發(fā)某個事件，放入異步任務(wù)隊(duì)列中
ES6中的promise

理解哪些語句加入到異步隊(duì)列

*理解語句放入異步隊(duì)列的時機(jī)

頁面性能

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

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

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

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

使用CDN(屬于網(wǎng)絡(luò)優(yōu)化)

預(yù)解析DNS



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

2)異步加載

異步加載的方式：

動態(tài)腳本加載(動態(tài)創(chuàng)建結(jié)點(diǎn))

defer

async

異步加載的區(qū)別:

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

async是在加載完之后立即執(zhí)行，如果是多個，執(zhí)行順序和加載順序無關(guān)。

3)瀏覽器緩存

瀏覽器緩存的分類
強(qiáng)緩存：

協(xié)商緩存：

錯誤監(jiān)控

前端錯誤的分類：

即時運(yùn)行錯誤：代碼錯誤

資源加載錯誤

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

try...catch

window.onerror

資源加載錯誤：

object.onerror

performance.getEntries()

Error事件捕獲

延伸：跨域的js運(yùn)行錯誤可以捕獲嗎，錯誤提示什么，應(yīng)該怎么處理？

在script標(biāo)簽添加crossorigin屬性

設(shè)置js資源響應(yīng)頭Access-Control-Allow-Origin:*

上報錯誤的基本原理

采用Ajax通信的方式上報

利用Image對象上報

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102232.html

相關(guān)文章

  • 渲染機(jī)制

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

    Big_fat_cat 評論0 收藏0

  • 馬蜂窩 iOS App 啟動治理：回歸用戶體驗(yàn)

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

    Jinkey 評論0 收藏0

  • GMTC 2019 參會回顧

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

    Zack 評論0 收藏0

發(fā)表評論

0條評論

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