我們知道從url輸入到頁面渲染是乙個比較複雜且耗時的過程,這個過程就從http請求開始,比如請求html、css、js和。
乙個完整的http請求會經歷dns查詢->tcp3次握手->瀏覽器傳送http請求->伺服器接收請求->伺服器處理請求並返回響應->瀏覽器接收響應。
減少請求的場景:
http2的優勢:
當瀏覽器發起跨域請求時,非簡單請求會發起一次預檢(也就是options請求),簡單請求則不會。
mdn: 跨域資源共享
服務端渲染:服務端只返回html檔案,客戶端只需要解析html檔案。服務端渲染主要針對首屏顯示速度有強需求的場景,不過這樣會增大伺服器的壓力。
cdn(內容分發網路)是一組分布在多個不同地理位置的web伺服器。
我們知道當被請求資源的伺服器離使用者越遠,網路傳輸耗時越久,cdn就是為了解決這一問題,在多個位置部署伺服器,讓使用者離伺服器更近,從而減少請求時間。
瀏覽器渲染程序的gui渲染執行緒和js引擎執行緒是互斥的,因此,當瀏覽器在處理js**的時候,會阻塞html的解析和渲染,如果把js放在底部,瀏覽器可以優先解析前面的html,html中的外部資源引用也不會被底部的js阻塞傳送請求的時機,css放在頭部,方便解析成cssom。
webkit渲染引擎流程如下圖:
gecko渲染引擎流程如下圖:
瀏覽器先查詢瀏覽器快取資料表,沒有a的快取資訊,就向伺服器傳送請求a,瀏覽器返回a和a的快取規則,瀏覽器把a和a的快取規則存入快取表
瀏覽器先查詢瀏覽器快取資料表,命中協商快取,返回etag和last-modified,瀏覽器在request header中加上etag和last-modified,伺服器判斷得知這個資源未修改,返回狀態碼304,客戶端從本地快取中讀取資源
webpack用外掛程式壓縮檔案:
伺服器也可以通過向http請求頭中的accept-encoding新增gzip標識來開啟這一功能。
盡可能用css3效果代替
使用webp格式的,webp的優勢在於它具有更優的影象資料壓縮演算法,能帶來更小的體積,而且擁有肉眼識別無差異的影象質量
重繪不一定導致重排,重排一定導致重繪。
事件委託利用了事件冒泡機制,子元素的某個事件會冒泡到父元素的同名事件,因此,可以指定給父元素乙個事件處理程式,就可以管理所有子元素的這類事件了。
使用事件委託可以節省記憶體,因為,不用為所有的子元素都指定這個事件,按鈕事件、多數滑鼠事件、鍵盤事件都可以採用事件委託來做
如果頁面中有乙個動畫或漸變效果或使用者正在滾動頁面,那麼瀏覽器渲染動畫或頁面的每一幀的速率也應該和裝置的重新整理頻率(60次/秒)保持一致。
前端面試題效能優化的方法
儘量減少http請求次數 壓縮合併js css精靈 內聯。src用data url scheme 避免空的src和href 為檔案頭指定expires 過期時間 或者cache control頭部。使用gzip壓縮內容 服務端 把css放到頂部 把js放到底部 避免使用css表示式 將css和js放...
iOS面試題 效能優化篇
降低包大小需要從兩方面著手 1 模擬器debug中color blended layers紅色區域表示圖層發生了混合 2 instrument 選中core animation 勾選color blended layers 避免圖層混合 uilabel圖層混合解決方法 ios8以後設定背景色為非透明...
通過面試題看效能優化
不管是自己之前面試還是看網上的面試題,都會碰到乙個經典的面試題 從輸入url到頁面載入完成,發生了什麼?首先說一下自己對於這道題的理解和回答 使用者在瀏覽器中輸入url 瀏覽器通過dns,把url解析為ip 和ip位址建立tcp連線,傳送http請求 伺服器接收請求,進行相關操作後返回的htpp相應...