1.文件上傳樣式處理
- 使用label標簽點擊，觸發file類型的input，input可直接display: none
2.隱藏元素的方法
- display： none不會渲染這個元素
- visibility： hidden隱藏元素，但是元素還是占位置，元素不可觸發點擊事件
- opacity： 0；設置元素的不透明度為0，元素還是可以觸發點擊事件的
3.域名發散和域名收歸
- 域名發散
為了利用現代瀏覽器的多線程并發下載能力，由于瀏覽器的限制，每個瀏覽器允許對每個域名的連接數一般是有上限的，每個域名的最大連接數是6個，為了提高最大并行度 - 域名收歸
在移動端的http請求中DNS解析比較耗時，盡量減少域名的個數
4.瀏覽器重繪與回流
- html頁面呈現流程
1.瀏覽器將HTML代碼解析成一個DOM樹，DOM樹種包含所有HTML標簽，包括display：none和js動態添加的元素等
2.瀏覽器將css解析成css樹，解析過程中會去掉瀏覽器不能識別的樣式，比如瀏覽器前綴
3.DOM樹和css樹組合后構建渲染樹，渲染樹能識別樣式，同時渲染樹不包含隱藏的節點
4.渲染樹構建完畢后，瀏覽器就根據渲染樹來繪制頁面
-
回流
當渲染樹種的一部分因為元素的尺寸，布局，隱藏等改變時需要重新構建，就稱為回流
回流時，瀏覽器會使得渲染樹種受到影響的部分失效，并重新構造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程稱為重繪- 回流是指的重新構造渲染樹，而重繪是指的瀏覽器重新繪制的過程
- 回流必將引起重繪，而重繪不一定會引起回流
回流發生的條件，頁面布局和幾何尺寸改變時就需要回流 - 添加和刪除DOM節點
- 元素位置改變
- 元素尺寸改變——邊框，填充，邊框，寬度和高度
- 元素內容改變
- 頁面渲染初始化
- 瀏覽器窗口尺寸改變——resize事件發生時
-
優化
瀏覽器本身會維護一個隊列，將所有引起回流，重繪的操作放入這個隊列，等隊列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器就會執行隊列中的批處理，這樣就會讓多次回流和重繪變成一次回流重繪
但是當我們查詢節點的style屬性，如調用offsetWidth，就會讓瀏覽器執行隊列中的任務- 應該減少對渲染樹的多次操作，盡量通過改變元素的類來實現多個樣式的改變
- 將需要多次重排的元素，position設置為absolute或fixed，這樣元素就脫離了文檔流，它的變化就不會影響到其他元素
- 減少DOM操作的次數
- 對隱藏元素的操作不會引發其他元素的重排，如果對一個元素進行復雜操作時，可以先隱藏它，操作完成后再顯示，這樣只有在隱藏和顯示時觸發2次重排
- 將經常要用到的那些引起瀏覽器重排的屬性值，緩存到變量
5.requestAnimationFrame
- 不需要設置時間間隔
- 大多數顯示器刷新頻率是60Hz，每秒鐘重繪60次，即使重繪頻率超過顯示器的重繪頻率用戶體驗也不會提升，最平滑的動畫最佳循環間隔為16.6ms
- 瀏覽器在窗口處于非激活的狀態下，requestAnimationFrame是不會執行
- requestAnimationFrame使用系統時間間隔，保持最佳的繪制效率，不會因為時間間隔過短造成過度繪制，也不會因為時間間隔過長，使用動畫卡頓不流暢
6.base64編碼
- 所有二進制文件，都可以轉化為可打印文本編碼，一般會比原圖大一些，不能緩存，除非放到js和css中
- 能夠對文本進行簡單的加密
- 將大圖片放如html中，會使得體積明顯增加，明顯影響首屏加載
如果用外鏈圖片，圖片可以在頁面渲染完成后繼續加載，不會造成阻塞 - 使用webpack中的url-loader 可以自動根據文件大小決定要不要做成內斂base64
7.HTTPS的原理
- 訪問HTTPS網站，網站將證書給你
- 驗證包含公鑰的證書，然后生成一個隨機密碼串，并用公鑰加密的這個密碼，然后發送給服務端
- 服務端用私鑰解密發送過來的數據，會得到隨機生成的密碼，并把網頁內容全部用密碼加密起來，并發送給你
- 瀏覽器用密碼對稱解密服務端返回的數據，得到你可讀的內容
- 之后發出的請求數據，都是用密碼進行加密
