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