前言 今天白天的時候我們一起學習了塊級元素，晚上的時候本來想繼續學習CSS，但是發現還是有一點累，所以我們還是來研究點大家都感興趣的東西，前端優化。 什么是reflow？ 這個單詞字面意思就是回流，這里舉一個例子： 我們這里有個dom樹： 我們如果刪除了其中一個節點 ...

1、什么是reflow? reflow(回流)是指瀏覽器為了重新渲染部分或者全部的文檔,重新計算文檔中的元素的位置和幾何構造的過程。 因為回流可能導致整個Dom樹的重新構造,所以是性能的一大殺手。 以下操作會引起回流： ① 改變窗口大小 ② font-size大小改變 ③ 增加 ...

首先要清楚頁面呈現的具體過程： 1. 瀏覽器把獲取到的HTML代碼解析成1個DOM樹，HTML中的每個tag都是DOM樹中的1個節點，根節點就是我們常用的document對象。DOM樹里包含了所有HTML標簽，包括display:none隱藏，還有用JS動態添加的元素等。 2. ...

1.瀏覽器渲染原理解析 想要提高網頁的性能，首要的便是要理解瀏覽器渲染原理，下面關於瀏覽器的原理解析，我們以chrome內核webkit為例，其他內核的瀏覽器原理也基本大同小異，可觸類旁通。 如上圖所示，瀏覽器解析頁面步驟可分為： * 解析HTML（HTML Parser） * 構建 ...

根據自己平時在測試工作中的經驗總結及向其他測試大佬的學習，對一個Web頁面的登錄測試總結如下： 一、功能測試 1、輸入正確的用戶名及密碼，點擊提交按鈕，驗證是否能正確登錄，登錄成功后跳轉至對應的頁面 2、輸入錯誤的用戶名或者錯誤的密碼，點擊提交會登錄失敗，並且有相應的錯誤提示框 3、用戶名 ...

工作中有個需求，就是產品頁面通過iframe引用顯示產品協議頁，要求不要橫向滑動，只需要豎向滑動，但在iphone中引用的iframe會撐開父頁的寬度，而在android端瀏覽器這不會。 通過在iframe添加一滑動層，overflow-x: hidden; 會直接將iframe ...

一、靜態web頁面 在靜態web程序中，客戶端使用web瀏覽器經過網絡連接到服務器上，使用HTTP協議發起一個請求（Request)，告訴服務區我現在需要得到哪個頁面，所有的請求交給web服務器，之后web服務器根據用戶的需求，從文件系統（存放了所有靜態頁面的磁盤）取出內容。之后通過web ...

幾個月之前我接到一個新的開發任務，要在一個舊的Web頁面上面增添一些新的功能。在開發的過程中發現舊的代碼中有很多常見的不合適的寫法，結合這些問題，如何寫出更好的，更規范的，更可維護的代碼，就是這篇文章要闡述的內容。 首先我查看了該Web頁面的HTML代碼，發現了一些典型的問題： HTML ...