資訊專欄INFORMATION COLUMN
摘要：頁面內(nèi)容就是網(wǎng)站想要傳達(dá)比用戶得信息，但是信息得傳遞也有高效和低效之分，內(nèi)容優(yōu)化得目的就是使用盡可能少的內(nèi)容和更高效的方式，傳達(dá)盡可能多的信息。延遲加載網(wǎng)站有些場(chǎng)景需要呈現(xiàn)大量圖片，例如一個(gè)有多屏的頁面，多數(shù)用戶點(diǎn)擊后不會(huì)完全看完所有內(nèi)容。
頁面內(nèi)容就是網(wǎng)站想要傳達(dá)比用戶得信息，但是信息得傳遞也有高效和低效之分，內(nèi)容優(yōu)化得目的就是使用盡可能少的內(nèi)容和更高效的方式，傳達(dá)盡可能多的信息。
優(yōu)化手段：
可緩存的AJAX
Ajax的好處就是從其后臺(tái)傳輸信息的異步性而為用戶帶來反饋的即時(shí)性。但是，使用Ajax并不能保證用戶不會(huì)在等待異步的JavaScript和XML響應(yīng)上花費(fèi)時(shí)間。在很多應(yīng)用中，用戶是否需要等待響應(yīng)取決于Ajax如何來使用。Ajax是實(shí)時(shí)響應(yīng)的，在瀏覽器接收到新的數(shù)據(jù)前，舊的數(shù)據(jù)被緩存，這樣能夠更好地提高效率。用客戶端語言來判斷用戶當(dāng)前的可視范圍，只加載用戶可視范圍的內(nèi)容。最主要的是圖片，因?yàn)槲淖中畔⑾鄬?duì)較小，其他多媒體內(nèi)容相對(duì)占用服務(wù)器流量更多。
延遲加載
網(wǎng)站有些場(chǎng)景需要呈現(xiàn)大量圖片，例如一個(gè)有多屏的頁面，多數(shù)用戶點(diǎn)擊后不會(huì)完全看完所有內(nèi)容。那么實(shí)際上，頁面在這一過程中是100%的加載了多個(gè)屏幕的所有內(nèi)容，而且如果內(nèi)容過多，瀏覽器狀態(tài)會(huì)一直顯示加載狀態(tài)，給用戶感覺非常不好。如果可以按需加載內(nèi)容，集中加載首屏?xí)r間及用戶可見區(qū)域，不但可以減少加載時(shí)間，還可以減少大量帶寬成本，用戶不可見區(qū)域需要用戶下拉滾動(dòng)條或翻屏?xí)r觸發(fā)加載。
預(yù)加載
預(yù)加載是在瀏覽器空閑時(shí)請(qǐng)求將來可能會(huì)用到的頁面內(nèi)容（圖片，樣式和腳本）。使用這種方法，當(dāng)用戶訪問下一個(gè)頁面時(shí)，頁面中大部分內(nèi)容已經(jīng)加載到緩存中，因此可以大大提高訪問速度。預(yù)加載的幾種方法：
① 無條件加載，觸發(fā)onload事件時(shí)，直接加載額外的頁面內(nèi)容。
② 有條件加載，根據(jù)用戶的操作來有根據(jù)地判斷用戶下面可能去往的頁面并相應(yīng)的預(yù)加載頁面內(nèi)容。
減少DOM元素?cái)?shù)量
一個(gè)復(fù)雜頁面意味著需要下載更多數(shù)據(jù)，同時(shí)也意味著JavaScript遍歷DOM的效率越慢。大量的DOM元素的存在意味著頁面中有可以不用移除內(nèi)容只需要替換元素標(biāo)簽就可以精簡(jiǎn)的部分。
使iframe的數(shù)量最小
iframe優(yōu)點(diǎn)是解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問題。缺點(diǎn)即使內(nèi)容為空，加載也需要時(shí)間，會(huì)阻止頁面加載，盡可能減少iframes。
盡早刷新輸出緩沖
當(dāng)用戶請(qǐng)求一個(gè)頁面時(shí)，無論如何都會(huì)花費(fèi)200-500ms用于后臺(tái)組織HTML文件。在這期間，瀏覽器會(huì)一直空閑等待數(shù)據(jù)返回。在PHP中，可以使用flush()方法，它允許你把已經(jīng)編譯的好的部分HTML響應(yīng)文件先發(fā)給瀏覽器，這時(shí)瀏覽器就可以下載文件中的內(nèi)容（腳本等）而后臺(tái)同時(shí)處理剩余的HTML頁面。輸出緩沖應(yīng)用最好的一個(gè)地方就是緊跟在
使用現(xiàn)代化布局
減少使用table，盡量使用
減少HTML大小
編寫代碼時(shí)為了結(jié)構(gòu)清晰，會(huì)使用空格或者TAB進(jìn)行代碼縮進(jìn)等來保證代碼可讀性。所以，在代碼上線前對(duì)HTML進(jìn)行一次Minify操作。還有一個(gè)減少HTML大小的方案是使用前端模板，將重復(fù)的內(nèi)容（例如列表），以基礎(chǔ)模板的形式發(fā)送到前端，然后使用js到后端獲取以JSON為格式的數(shù)據(jù)，再使用模板引擎將數(shù)據(jù)渲染出來。使用這種“JS+JSON”的方式可以減少后端渲染HTML標(biāo)簽帶來的帶寬浪費(fèi)，從而提高性能。HTML大小減少10%，服務(wù)器的QPS就能提高10%。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54087.html
摘要：淺談網(wǎng)站性能之前端性能優(yōu)化性能優(yōu)化的目的無非是減少用戶流量消耗，提升用戶首屏體驗(yàn)，提升用戶訪問速度，讓用戶專注內(nèi)容本身。前端性能優(yōu)化減少請(qǐng)求數(shù)量基本原理在瀏覽器與服務(wù)器進(jìn)行通信時(shí)，主要是通過進(jìn)行通信。 最近項(xiàng)目慢慢走上正軌，需求趨于平穩(wěn)，這才想起需要對(duì)整站進(jìn)行性能優(yōu)化。經(jīng)過一段時(shí)間的學(xué)習(xí)，結(jié)合現(xiàn)在項(xiàng)目的實(shí)際性能情況，發(fā)現(xiàn)確實(shí)有許多地方可以進(jìn)行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下...
摘要：淺談網(wǎng)站性能之前端性能優(yōu)化性能優(yōu)化的目的無非是減少用戶流量消耗，提升用戶首屏體驗(yàn)，提升用戶訪問速度，讓用戶專注內(nèi)容本身。前端性能優(yōu)化減少請(qǐng)求數(shù)量基本原理在瀏覽器與服務(wù)器進(jìn)行通信時(shí)，主要是通過進(jìn)行通信。 最近項(xiàng)目慢慢走上正軌，需求趨于平穩(wěn)，這才想起需要對(duì)整站進(jìn)行性能優(yōu)化。經(jīng)過一段時(shí)間的學(xué)習(xí)，結(jié)合現(xiàn)在項(xiàng)目的實(shí)際性能情況，發(fā)現(xiàn)確實(shí)有許多地方可以進(jìn)行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下...
摘要：端優(yōu)談?wù)勱P(guān)于前端的緩存的問題我們都知道對(duì)頁面進(jìn)行緩存能夠有利于減少請(qǐng)求發(fā)送，從而達(dá)到對(duì)頁面的優(yōu)化。而作為一名有追求的前端，勢(shì)必要力所能及地優(yōu)化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優(yōu)化問題過早優(yōu)化是萬惡之源。 優(yōu)化向：?jiǎn)雾搼?yīng)用多路由預(yù)渲染指南 Ajax 技術(shù)的出現(xiàn)，讓我們的 Web 應(yīng)用能夠在不刷新的狀態(tài)下顯示不同頁面的內(nèi)容，這就是單頁應(yīng)用。在一個(gè)單頁應(yīng)用中，往往只有一...
摘要：業(yè)務(wù)和架構(gòu)不分家，架構(gòu)是建立在對(duì)業(yè)務(wù)的理解之上的。主鍵最好保持順序遞增，隨機(jī)主鍵會(huì)導(dǎo)致聚簇索引樹頻繁分裂，隨機(jī)增多，數(shù)據(jù)離散，性能下降。沒有索引的更新，可能會(huì)導(dǎo)致全表數(shù)據(jù)都被鎖住。 本博客并非全部原創(chuàng)，其實(shí)是一個(gè)知識(shí)的歸納和匯總，里面我引用了很多網(wǎng)上、書上的內(nèi)容。也給出了相關(guān)的鏈接。 本文涉及的知識(shí)點(diǎn)比較多，大家可以根據(jù)關(guān)鍵字去搜索相關(guān)的內(nèi)容和購(gòu)買相應(yīng)的書籍進(jìn)行系統(tǒng)的學(xué)習(xí)。不對(duì)的地方...
閱讀 3414·2021-10-08 10:15
閱讀 5628·2021-09-23 11:56
閱讀 1479·2019-08-30 15:55
閱讀 457·2019-08-29 16:05
閱讀 2739·2019-08-29 12:34
閱讀 2052·2019-08-29 12:18
閱讀 925·2019-08-26 12:02
閱讀 1661·2019-08-26 12:00
