前端的一些問題 1

2021-10-02 22:45:26 字數 859 閱讀 1885

減少 http 請求數量

在瀏覽器與伺服器進行通訊時,主要是通過 http 進行通訊。

瀏覽器與伺服器需要經過三次握手,每次握手需要花費大量時間。

而且不同瀏覽器對資源檔案併發請求數量有限(不同瀏覽器允許的併發數不同),一旦 http 請求數量達到一定數量,資源請求就存在等待狀態

解決方法:

1.css sprites:國內俗稱 css 精靈,這是將多張合併成一張達到減少 http 請求的一種解決方案,可以通過 css background 屬性來訪問內容。這種方案同時還可以減少總位元組數。

2.合併 css 和 js 檔案:現在前端有很多任務程化打包工具,如:grunt、gulp、webpack等。

3.採用 lazyload:俗稱懶載入,可以控制網頁上的內容在一開始無需載入,不需要發請求,等到使用者操作真正需要的時候立即載入出內容。

控制資源檔案載入優先順序

瀏覽器在載入 html 內容時,是將 html 內容從上至下依次解析,解析到 link 或者 script 標籤就會載入 href 或者 src 對應鏈結內容,為了第一時間展示頁面給使用者,就需要將 css 提前載入,不要受 js 載入影響。

一般情況下都是 css 在頭部,js 在底部。

解決方法:

1.利用瀏覽器快取

2.減少重排(reflow):重排是 dom 的變化影響到了元素的幾何屬性(寬和高),瀏覽器會重新計算元素的幾何屬性,會使渲染樹中受到影響的部分失效,瀏覽器會驗證 dom 樹上的所有其它結點的 visibility 屬性,這也是 reflow 低效的原因。如果 reflow 的過於頻繁,cpu 使用率就會急劇上公升。盡量使用 增加 class 屬性,而不是通過 style 操作樣式

3.圖示使用 iconfont 替換

寫前端樣式遇到的一些問題

同樣的 會出現很多 超連結,但是超連結之間有分割線 就是 如導航欄 上各個欄目之間的小豎線。可以通過 下乙個兄弟選擇器來選擇 除第乙個以外的所有兄弟,再border left設定即可。乙個div裡面放乙個img,如果div的高度不夠高,設定了img的寬和高之後,div可能包裹不住img,因為img是...

String 一些問題

前言 等號 對於基本型別,比較的是值,對於引用型別,比較的是記憶體位址。1.在物件池中建立,如果常量池中已經存在則返回常量池中已經有的。private static void test1 結果 true 2.乙個在string pool中,乙個在堆中。private static void test...

C 一些問題

1 if else語句和switch case語句的效率分析對比 switch效率高。switch的效率與分支數無關,當只有分支比較少的時候,if效率比switch高,因為switch有跳轉表。分支比較多,那當然是switch 根據大量的實際程式測試 不考慮不同的編譯器優化程度差異,假設都是最好的優...