亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Web 性能優(yōu)化

KavenFan / 1458人閱讀

摘要：然而腳本需要查詢信息，所以腳本還必須等待樹(shù)構(gòu)建完才可以執(zhí)行。這將相當(dāng)于阻塞了腳本，腳本阻塞了樹(shù)構(gòu)建。是這樣子的關(guān)聯(lián)才對(duì)。

前記 好久都沒(méi)有寫(xiě)博客了，罪過(guò)罪過(guò)，不能懶不能懶，這次記錄一下web的性能優(yōu)化方法，說(shuō)到性能優(yōu)化，就不得不從當(dāng)你輸入網(wǎng)址按下回車的那一刻說(shuō)起 性能分治法 把大問(wèn)題分成小問(wèn)題分別處理 按下回車發(fā)生了什么

當(dāng)然是先去緩存中看看啦

緩存沒(méi)有，那就先DNS查詢找IP地址

找到IP地址先建立TCP鏈接

建立后就可以發(fā)送HTTP請(qǐng)求了

后臺(tái)處理，我們等待

接收HTML文件

DOCTYPE 確定解析的語(yǔ)法

逐行解析

有些標(biāo)簽在不同瀏覽器上顯示

CSS同時(shí)下載，解析一個(gè)接一個(gè)（IE同時(shí)4個(gè)，谷歌同時(shí)6個(gè)）

JS并行下載，解析按順序，但是JS執(zhí)行一定阻塞HTMl渲染

之后就是構(gòu)建DOM樹(shù)，CSS和JS了

解決方法 1、緩存 DNS查詢后會(huì)留下緩存，下次訪問(wèn)后就會(huì)無(wú)需查詢，另外設(shè)置響應(yīng)頭Cache-Control，使文件緩存，這樣只要網(wǎng)站文件不更改就可以使用緩存 2、DNS查詢 DNS查詢會(huì)耗費(fèi)時(shí)間，所以，我們要優(yōu)化就要減少DNS查詢，盡量減少域名 3、建立TCP鏈接 每次發(fā)送HTTP請(qǐng)求都建立TCP連接的話就太耗費(fèi)時(shí)間了，所以我們可以使用連接復(fù)用，只需要在HTTP請(qǐng)求頭加上keep-alive，在HTTP/2.0 甚至可以使用多路復(fù)用 4、發(fā)送HTTP請(qǐng)求 我們都知道發(fā)送請(qǐng)求是會(huì)帶上cookie的，所以減少cookie體積可以加快發(fā)送速度，另外，瀏覽器是可以同時(shí)發(fā)送多個(gè)請(qǐng)求，但是相同域名發(fā)送請(qǐng)求會(huì)有限制，所以我們可以增加域名，但是這樣就和第一步的解決方法沖突了，于是我們需要自己來(lái)權(quán)衡利弊 5、接收響應(yīng) 設(shè)置ETag，這樣只要響應(yīng)文件未更改，就可以返回一個(gè)304表示未更改，使用以前的文件，也可以使用Gzip壓縮文件，降低文件大小，接收到后再解壓文件，這樣可以加快下載速度 6、DOCTYPE 不能寫(xiě)錯(cuò)，這是確定渲染語(yǔ)法的，必須要寫(xiě) 7、CDN加速 使用CDN可以增加同時(shí)請(qǐng)求數(shù)量，也可以減少cookie體積，因?yàn)闆](méi)有cookie。使用CDN可以加速，內(nèi)容緩存在就近的地方，動(dòng)態(tài)DNS，IP就近返回，內(nèi)容分布網(wǎng)絡(luò)，請(qǐng)求快 8、CSS放在head，JS放在body最后 之所以把link標(biāo)簽放抬頭而script放body尾部，是因?yàn)闉g覽器遇到script標(biāo)簽時(shí)，會(huì)去下載并執(zhí)行js腳本，從而導(dǎo)致瀏覽器暫停構(gòu)建DOM。然而JS腳本需要查詢CSS信息，所以JS腳本還必須等待CSSOM樹(shù)構(gòu)建完才可以執(zhí)行。這將相當(dāng)于CSS阻塞了JS腳本，JS腳本阻塞了DOM樹(shù)構(gòu)建。是這樣子的關(guān)聯(lián)才對(duì)。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/98147.html

相關(guān)文章

  • 前端性能優(yōu)化

    摘要：端優(yōu)談?wù)勱P(guān)于前端的緩存的問(wèn)題我們都知道對(duì)頁(yè)面進(jìn)行緩存能夠有利于減少請(qǐng)求發(fā)送，從而達(dá)到對(duì)頁(yè)面的優(yōu)化。而作為一名有追求的前端，勢(shì)必要力所能及地優(yōu)化我們前端頁(yè)面的性能。這種方式主要解決了淺談前端中的過(guò)早優(yōu)化問(wèn)題過(guò)早優(yōu)化是萬(wàn)惡之源。 優(yōu)化向：?jiǎn)雾?yè)應(yīng)用多路由預(yù)渲染指南 Ajax 技術(shù)的出現(xiàn)，讓我們的 Web 應(yīng)用能夠在不刷新的狀態(tài)下顯示不同頁(yè)面的內(nèi)容，這就是單頁(yè)應(yīng)用。在一個(gè)單頁(yè)應(yīng)用中，往往只有一...

    Dean 評(píng)論0 收藏0

  • Web 性能優(yōu)化：理解及使用 JavaScript 緩存

    摘要：想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳博客一年百來(lái)篇優(yōu)質(zhì)文章等著你這是性能優(yōu)化的第篇，上一篇在下面看點(diǎn)擊查看性能優(yōu)化使用分離數(shù)據(jù)的正確方法性能優(yōu)化圖片優(yōu)化讓網(wǎng)站大小減少性能優(yōu)化緩存事件來(lái)提高性能性能優(yōu)化種優(yōu)化和加快網(wǎng)站速度的方法隨著我們的應(yīng)用程序的不斷增 showImg(https://segmentfault.com/img/bVbp4cY?w=947&h=424); 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳Gi...

    endiat 評(píng)論0 收藏0

  • web性能優(yōu)化

    摘要：性能優(yōu)化是一個(gè)比較大的一個(gè)問(wèn)題，不是一天兩天就能學(xué)會(huì)的，需要在日常中思考和學(xué)習(xí)。毫秒必爭(zhēng)，前端網(wǎng)頁(yè)性能最佳實(shí)踐這是一篇講關(guān)于性能優(yōu)化的。和的壓縮對(duì)頁(yè)面引用的樣式和文件進(jìn)行壓縮，合并一些和文件減少請(qǐng)求等，也是性能優(yōu)化的一個(gè)方法。 web性能優(yōu)化是一個(gè)比較大的一個(gè)問(wèn)題，不是一天兩天就能學(xué)會(huì)的，需要在日常中思考和學(xué)習(xí)。先收藏一篇文章，以后有時(shí)間在慢慢研究。毫秒必爭(zhēng)，前端網(wǎng)頁(yè)性能最佳實(shí)踐這是一...

    Brenner 評(píng)論0 收藏0

  • web性能優(yōu)化

    摘要：性能優(yōu)化是一個(gè)比較大的一個(gè)問(wèn)題，不是一天兩天就能學(xué)會(huì)的，需要在日常中思考和學(xué)習(xí)。毫秒必爭(zhēng)，前端網(wǎng)頁(yè)性能最佳實(shí)踐這是一篇講關(guān)于性能優(yōu)化的。和的壓縮對(duì)頁(yè)面引用的樣式和文件進(jìn)行壓縮，合并一些和文件減少請(qǐng)求等，也是性能優(yōu)化的一個(gè)方法。 web性能優(yōu)化是一個(gè)比較大的一個(gè)問(wèn)題，不是一天兩天就能學(xué)會(huì)的，需要在日常中思考和學(xué)習(xí)。先收藏一篇文章，以后有時(shí)間在慢慢研究。毫秒必爭(zhēng)，前端網(wǎng)頁(yè)性能最佳實(shí)踐這是一...

    iamyoung001 評(píng)論0 收藏0

  • [譯] 唯快不破：Web 應(yīng)用的 13 個(gè)優(yōu)化步驟

    摘要：譯文地址譯唯快不破應(yīng)用的個(gè)優(yōu)化步驟前端的逆襲知乎專欄原文地址時(shí)過(guò)境遷，應(yīng)用比以往任何時(shí)候都更具交互性。使用負(fù)載均衡方案我們?cè)谥坝懻摼彺娴臅r(shí)候簡(jiǎn)要提到了內(nèi)容分發(fā)網(wǎng)絡(luò)。換句話說(shuō)，元素的串形訪問(wèn)會(huì)削弱負(fù)載均衡器以最佳形式 歡迎關(guān)注知乎專欄 —— 前端的逆襲歡迎關(guān)注我的博客，知乎，GitHub。 譯文地址：【譯】唯快不破：Web 應(yīng)用的 13 個(gè)優(yōu)化步驟 - 前端的逆襲 - 知乎專欄原文地...

    haobowd 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<