整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
站打開速度慢？網站加載圖片慢？網站容易卡頓？身為站長和網站用戶的你有沒有遇到過這種情況？沒錯，這些都是網站頁面體積惹的禍。解決辦法是通過技術手段去掉臃腫雜亂的代碼，減小網頁文件大小，加快網頁加載速度，替身網站打開速度。
網頁精簡代碼主要涉及以下幾個要點：
1.CSS樣式精簡
網頁制作應通過CSS（層疊樣式表單）來統一定制字體風格。例如：
(bstyle="color:red;font-size:16px;")測試(/b)
(divid="divmain"style="font-size:12px;")DIV(/b)
(divstyle="color:red;")紅色(bstyle="color:green;")綠色(/b)(/div)
----------------------
(styletype="text/css")
b（color:red;font-size:16px;）/*通用對象*/
#divmain（font-size:12px;）/*ID對象*/
.red（color:red;）/*定制類別*/
.redb（color:green;）/*定制類別下的通用對象*/
(/style)
(b)測試(/b)
(divid="divmain")DIV(/b)
(divclass="red")紅色(b)綠色(/b)(/div)
CSS精簡代碼示例文件把文字的字體、字號、顏色、背景色等統一起來，不用對每段文字單獨進行格式定義，從而減少大量重復性標簽。注意把所有css文件單獨存放在命名為css的外部文件中。
語法：(linkrel="stylesheet"type="text/css"href="/common/client.css")
作用的優先級：自身的style屬性)頁面的內部style對象)頁面外部css文件。
下載：css幫助
2.JavaScript精簡：
1.簡化js中的函數名稱和變量。
例如：Google，里面的函數名稱只有1個或者2個字符。
2.將網頁的公共部分轉換為腳本并存于js文件里。這樣可以減少文件大小，加快下載速度，同時也方便管理。不過不能將導航等等優化的關鍵代碼轉換成js，否則搜索引擎搜索不到。
轉換方式：
原來：(h1)天天收藏夾(/h1)
腳本：document.write(“(h1)天天收藏夾(/h1)”);
例如：華軍軟件園源代碼，將標題、導航等等都放著js文件里，將導航放在js里面就不太好了。
3.使用base標簽精簡：
Base標簽是一個全集控制的標簽。
比如：
(Atarget=”_blank”)代碼一(/A)
(Atarget=”_blank”)代碼一(/A)
其中http://www.llsffx.com和target=”_blank”:多次重復，增加無用的代碼。
修改為：
(head)
(basehref=”http://www.llsffx.com/”target=”_blank”)
(/head)
(body)
(ahref=”/code/1.htm”)代碼一(/a)
(ahref=”/code/2.htm”)代碼二(/a)
(/body)
4.慎用網頁精簡代碼工具
通常的網頁精簡代碼工具，對htm精簡代碼具有一定的破壞性，常常為了精簡代碼將標簽的后半個標簽刪除，造成網頁的不完整。
處理前：(table)(tr)(td)第一行(/td)(/tr)(tr)(td)第二行(/td)(/tr)(/table)
處理后：(table)(tr)(td)第一行(tr)(td)第二行(/table)
處理后(/td)(/tr)被去掉了，使頁面不完整。
5.刪除空格和回車
機智的精簡代碼是連多余的空格和回車都刪除的一干二凈。這樣能夠使網頁文件大小下降不少。但是這樣的做后果是容易使代碼排列雜亂，加大程序猿修改代碼進度。
注：()替換成<>和{}
eb前端技術由html、css和 javascript三大部分構成，是一個龐大而復雜的技術體系，其復雜程度不低于任何一門后端語言。而我們在學習它的時候往往是先從某一個點切入，然后不斷地接觸和學習新的知識點，因此對于初學者很難理清楚整個體系的脈絡結構。本文將對Web前端知識體系進行簡單的梳理，對應的每個知識點點到為止，不作詳細介紹。目的是幫助大家審查自己的知識結構是否完善，如有遺漏或不正確的地方，希望共勉。
HTML 篇
1、BOM
BOM 是 Browser Object Model
的縮寫，即瀏覽器對象模型，當一個瀏覽器頁面初始化時，會在內存創建一個全局的對象，用以描述當前窗口的屬性和狀態，這個全局對象被稱為瀏覽器對象模型，即BOM。BOM的核心對象就是window，window
對象也是BOM的頂級對象，其中包含了瀏覽器的 6個核心模塊：
document -
即文檔對象，渲染引擎在解析HTML代碼時，會為每一個元素生成對應的DOM對象，由于元素之間有層級關系，因此整個HTML代碼解析完以后，會生成一個由不同節點組成的樹形結構，俗稱DOM樹，document
用于描述DOM樹的狀態和屬性，并提供了很多操作DOM的API。
frames - HTML 子框架，即在瀏覽器里嵌入另一個窗口，父框架和子框架擁有獨立的作用域和上下文。
history - 以棧(FIFO)的形式保存著頁面被訪問的歷史記錄，頁面前進即入棧，頁面返回即出棧。
location - 提供了當前窗口中加載的文檔相關信息以及一些導航功能。
navigator - 用來描述瀏覽器本身，包括瀏覽器的名稱、版本、語言、系統平臺、用戶特性字符串等信息。
screen - 提供了瀏覽器顯示屏幕的相關屬性，比如顯示屏幕的寬度和高度，可用寬度和高度。
2、DOM 系統
DOM 是 Document Object Model 的縮寫，即 文檔對象模型，是所有瀏覽器公共遵守的標準，DOM
將HTML和XML文檔映射成一個由不同節點組成的樹型結構，俗稱DOM樹。其核心對象是document，用于描述DOM樹的狀態和屬性，并提供對應的DOM操作API。隨著歷史的發展，DOM
被劃分為1級、2級、3級，共3個級別：
1級DOM - 在1998年10月份成為W3C的提議，由DOM核心與DOM
HTML兩個模塊組成。DOM核心能映射以XML為基礎的文檔結構，允許獲取和操作文檔的任意部分。DOM
HTML通過添加HTML專用的對象與函數對DOM核心進行了擴展。
2級DOM - 鑒于1級DOM僅以映射文檔結構為目標，DOM
2級面向更為寬廣。通過對原有DOM的擴展，2級DOM通過對象接口增加了對鼠標和用戶界面事件（DHTML長期支持鼠標與用戶界面事件）、范圍、遍歷（重復執行DOM文檔）和層疊樣式表（CSS）的支持。同時也對DOM
1的核心進行了擴展，從而可支持XML命名空間。
3級DOM -
通過引入統一方式載入和保存文檔和文檔驗證方法對DOM進行進一步擴展，DOM3包含一個名為“DOM載入與保存”的新模塊，DOM核心擴展后可支持XML1.0的所有內容，包括XML
Infoset、 XPath、和XML Base。
瀏覽器對不同級別DOM的支持情況如下所示：
從圖中可以看出，移動端常用的 webkit 內核瀏覽器目前只支持DOM2，而不支持DOM3 。
新手福利獲取方式：
1.在你手機的右上角有【關注】選項，或點擊我的頭像，點擊關注！（關注我）
2.關注后，手機客戶端點擊我的主頁面，右上角有私信，請私信發我：html
其實作為一個開發者，有一個學習的氛圍跟一個交流圈子特別重要這里請私信我“html”不管你是小白還是大牛歡迎入住大家一起交流成長。小編會在里面不定期分享干貨源碼，包括我精心整理的一份零基礎教程。歡迎各位感興趣的的小伙伴。
學習思路：
3、事件系統
事件是用戶與頁面交互的基礎，到目前為止，DOM事件從PC端的 鼠標事件(mouse) 發展到了 移動端的 觸摸事件(touch) 和
手勢事件(guesture)，touch事件描述了手指在屏幕操作的每一個細節，guesture 則是描述多手指操作時更為復雜的情況，總結如下：
第一根手指放下，觸發 touchstart，除此之外什么都不會發生
手指滑動時，觸發touchmove
第二根手指放下，觸發 gesturestart
觸發第二根手指的 touchstart
立即觸發 gesturechange
任意手指移動，持續觸發 gesturechange
第二根手指彈起時，觸發 gestureend，以后將不會再觸發 gesturechange
觸發第二根手指的 touchend
觸發touchstart (多根手指在屏幕上，提起一根，會刷新一次全局touch) _ ___
彈起第一根手指，觸發 touchend
更多關于手勢事件的介紹請參考：
gesture事件處理復雜手勢
DOM2.0 模型將事件處理流程分為三個階段，即 事件捕獲階段 、 事件處理階段 、 事件冒泡階段， 如圖所示：
事件捕獲 ：當用戶觸發點擊事件后，頂層對象document 就會發出一個事件流，從最外層的DOM節點向目標元素節點傳遞，最終到達目標元素。
事件處理 ：當到達目標元素之后，執行目標元素綁定的處理函數。如果沒有綁定監聽函數，則不做任何處理。
事件冒泡 ：事件流從目標元素開始，向最外層DOM節點傳遞，途中如果有節點綁定了事件處理函數，這些函數就會被執行。
利用事件冒泡原理可以實現 事件委托
，所謂事件委托，就是在父元素上添加事件監聽器，用以監聽和處理子元素的事件，避免重復為子元素綁定相同的事件。當目標元素的事件被觸發以后，這個事件就從目標元素開始，向最外層元素傳遞，最終冒泡到父元素上，父元素再通過event.target
獲取到這個目標元素，這樣做的好處是，父元素只需綁定一個事件監聽，就可以對所有子元素的事件進行處理了，從而減少了不必要的事件綁定，對頁面性能有一定的提升。
4、HTML解析過程
瀏覽器加載 html 文件以后，渲染引擎會從上往下，一步步來解析HTML標簽，大致過程如下：
用戶輸入網址，瀏覽器向服務器發出請求，服務器返回html文件；
渲染引擎開始解析 html 標簽，并將標簽轉化為DOM節點，生成 DOM樹；
如果head 標簽中引用了外部css文件，則發出css文件請求，服務器返回該文件，該過程會阻塞后面的解析；
如果引用了外部 js 文件，則發出 js 文件請求，服務器返回后立即執行該腳本，這個過程也會阻塞html的解析；
引擎開始解析 body 里面的內容，如果標簽里引用了css 樣式，就需要解析剛才下載好的css文件，然后用css來設置標簽的樣式屬性，并生成渲染樹；
如果 body 中的 img 標簽引用了圖片資源，則立即向服務器發出請求，此時引擎不會等待圖片下載完畢，而是繼續解析后面的標簽；
服務器返回圖片文件，由于圖片需要占用一定的空間，會影響到后面元素的排版，因此引擎需要重新渲染這部分內容；
如果此時 js 腳本中運行了 style.display="none"，布局被改變，引擎也需要重新渲染這部分代碼；
直到 html 結束標簽為止，頁面解析完畢。
5、重繪 和 回流
當渲染樹中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流。比如上面的img文件加載完成后就會引起回流，每個頁面至少需要一次回流，就是在頁面第一次加載的時候。
當渲染樹中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如 background-color。則就叫稱為重繪。
從上面可以看出，回流必將引起重繪，而重繪不一定會引起回流。會引起重繪和回流的操作如下：
添加、刪除元素(回流+重繪)
隱藏元素，display:none(回流+重繪)，visibility:hidden(只重繪，不回流)
移動元素，比如改變top,left的值，或者移動元素到另外一個父元素中。(重繪+回流)
對style的操作(對不同的屬性操作，影響不一樣)
還有一種是用戶的操作，比如改變瀏覽器大小，改變瀏覽器的字體大小等(回流+重繪)
另外，transform
操作不會引起重繪和回流，是一種高效率的渲染。這是因為transform屬于合成屬性，對合成屬性進行transition/animation
動畫時將會創建一個合成層，這使得動畫元素在一個獨立的層中進行渲染，當元素的內容沒有發生改變，就沒必要進行重繪，瀏覽器會通過重新復合來創建動畫幀。
6、本地存儲
本地存儲最原始的方式就是 cookie,cookie 是存放在本地瀏覽器的一段文本，數據以鍵值對的形式保存，可以設置過期時間。 但是 cookie
不適合大量數據的存儲，因為每請求一次頁面，cookie 都會發送給服務器，這使得 cookie
速度很慢而且效率也不高。因此cookie的大小被限制為4k左右(不同瀏覽器可能不同,分HOST)，如下所示：
Firefox和Safari允許cookie多達4097個字節，包括名(name)、值(value) 和 等號。
Opera允許cookie多達4096個字節，包括：名(name)、值(value) 和 等號。
Internet Explorer允許cookie多達4095個字節，包括：名(name)、值(value) 和 等號。
在所有瀏覽器中，任何cookie大小超過限制都被忽略，且永遠不會被設置。
html5 提供了兩種在客戶端存儲數據的新方法：localStorage 和 sessionStorage, 它們都是以key/value
的形式來存儲數據，前者是永久存儲，后者的存儲期限僅限于瀏覽器會話(session)，即當瀏覽器窗口關閉后，sessionStorage中的數據被清除。
localStorage的存儲空間大約5M左右(不同瀏覽器可能不同，分
HOST)，這個相當于一個5M大小的前端數據庫，相比于cookie，可以節約帶寬，但localStorage在瀏覽器隱私模式下是不可讀取的，當存儲數據超過了localStorage
的存儲空間后會拋出異常。
此外，H5還提供了逆天的websql和
indexedDB，允許前端以關系型數據庫的方式來存儲本地數據，相對來說，這個功能目前應用的場景比較少，此處不作介紹。
7、瀏覽器緩存機制
瀏覽器緩存機制是指通過 HTTP 協議頭里的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag)
等字段來控制文件緩存的機制。
Cache-Control 用于控制文件在本地緩存有效時長。最常見的，比如服務器回包：Cache-Control:max-age=600
表示文件在本地應該緩存，且有效時長是600秒 (從發出請求算起)。在接下來600秒內，如果有請求這個資源，瀏覽器不會發出 HTTP
請求，而是直接使用本地緩存的文件。
Last-Modified 是標識文件在服務器上的最新更新時間。下次請求時，如果文件緩存過期，瀏覽器通過 If-Modified-Since
字段帶上這個時間，發送給服務器，由服務器比較時間戳來判斷文件是否有修改。如果沒有修改，服務器返回304告訴瀏覽器繼續使用緩存；如果有修改，則返回200，同時返回最新的文件。
Cache-Control 通常與 Last-Modified 一起使用。一個用于控制緩存有效時間，一個在緩存失效后，向服務查詢是否有更新。
Cache-Control 還有一個同功能的字段：Expires。Expires 的值一個絕對的時間點，如：Expires: Thu, 10 Nov
2015 08:45:11 GMT，表示在這個時間點之前，緩存都是有效的。
Expires 是 HTTP1.0 標準中的字段，Cache-Control 是 HTTP1.1
標準中新加的字段，功能一樣，都是控制緩存的有效時間。當這兩個字段同時出現時，Cache-Control 是高優化級的。
Etag 也是和 Last-Modified 一樣，對文件進行標識的字段。不同的是，Etag
的取值是一個對文件進行標識的特征字串。在向服務器查詢文件是否有更新時，瀏覽器通過 If-None-Match
字段把特征字串發送給服務器，由服務器和文件最新特征字串進行匹配，來判斷文件是否有更新。沒有更新回包304，有更新回包200。Etag 和
Last-Modified 可根據需求使用一個或兩個同時使用。兩個同時使用時，只要滿足基中一個條件，就認為文件沒有更新。
另外有兩種特殊的情況：
手動刷新頁面(F5)，瀏覽器會直接認為緩存已經過期(可能緩存還沒有過期)，在請求中加上字段：Cache-Control:max-age=0，發包向服務器查詢是否有文件是否有更新。
強制刷新頁面(Ctrl+F5)，瀏覽器會直接忽略本地的緩存(有緩存也會認為本地沒有緩存)，在請求中加上字段：Cache-Control:no-cache
(或 Pragma:no-cache)，發包向服務重新拉取文件。
8、History
用戶訪問網頁的歷史記錄通常會被保存在一個類似于棧的對象中，即history對象，點擊返回就出棧，跳下一頁就入棧。 它提供了以下方法來操作頁面的前進和后退：
window.history.back( ) 返回到上一個頁面
window.history.forward( ) 進入到下一個頁面
window.history.go( [delta] ) 跳轉到指定頁面
HTML5 對History Api 進行了增強，新增了兩個Api 和一個事件，分別是pushState、replaceState 和
onpopstate：
pushState是往history對象里添加一個新的歷史記錄，即壓棧。
replaceState 是替換history對象中的當前歷史記錄。
當點擊瀏覽器后退按鈕或 js調用history.back 都會觸發 onpopstate 事件。
與其類似的還有一個事件：onhashchange，onhashchange是老API，瀏覽器支持度高，本來是用來監聽hash變化的，但可以被利用來做客戶端前進和后退事件的監聽，而onpopstate是專門用來監聽瀏覽器前進后退的，不僅可以支持hash，非hash的同源
url 也支持。
9、HTML5離線緩存
HTML5離線緩存又叫Application
Cache，是從瀏覽器的緩存中分出來的一塊緩存區，如果要在這個緩存中保存數據，可以使用一個描述文件（manifest file），列出要下載和緩存的資源。
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。manifest 文件可分為三個部分：
- CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存
- NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
- FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
離線緩存為應用帶來三個優勢：
離線瀏覽 - 用戶可在應用離線時使用它們
速度 - 已緩存資源加載得更快
減少服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。
10、Web語義化 和 SEO
Web語義化是指使用語義恰當的標簽，使頁面有良好的結構，頁面元素有含義，能夠讓人和搜索引擎都容易理解。
SEO是指在了解搜索引擎自然排名機制的基礎之上，對網站進行內部及外部的調整優化，改進網站在搜索引擎中關鍵詞的自然排名，獲得更多的展現量，吸引更多目標客戶點擊訪問網站，從而達到互聯網營銷及品牌建設的目標。
搜索引擎通過爬蟲技術獲取的頁面就是由一堆 html 標簽組成的代碼，人可以通過可視化的方式來判斷頁面上哪些內容是重點，而機器做不到。
但搜索引擎會根據標簽的含義來判斷內容的權重，因此，在合適的位置使用恰當的標簽，使整個頁面的語義明確，結構清晰，搜索引擎才能正確識別頁面中的重要內容，并予以較高的權值。比如h1~h6這幾個標簽在SEO中的權值非常高，用它們作頁面的標題就是一個簡單的SEO優化。
言
對于項目，那就是我們的親兒子啊，作為一個前端菜鳥，面向用戶就是將自己的兒子介紹給別人認識，肯定要讓他白白凈凈，漂漂亮亮的啦，給別人一眼就喜歡上的感覺咯，哈哈哈~
常在河邊走，哪有不濕鞋，在我們編程的工程中，尤其是前端的同學，肯定少不了跟Css打交道，命名、縮寫、書寫順序等都是有一定規范，這個規范可能來源于你、我、或者瀏覽器等不定向人群（這個規范是我瞎編的），今天自己整合收集，以及個人項目用到的html+css的書寫規范送給在"編程界"奮斗的小伙伴，你 不是一個人在戰斗。
話不多說，鍋燒空氣，鍋熱放油，放入寫好的html+css炸一遍，撈出，控油，裹上雞蛋液，粘上面包糠，再炸，隔壁小孩都饞哭了，不好吃你來打我。
一 命名規則說明
1、所有的命名最好都小寫
2、屬性的值一定要用雙引號("")括起來，且一定要有值如class="app",id="app"
3、每個標簽都要有開始和結束，且要有正確的層次，排版有規律工整例如：<div></div>
4、空元素要有結束的tag或于開始的tag后加上"/" <br />、<img />
5、表現與結構完全分離，代碼中不涉及任何的表現元素，如style、font、bgColor、border等
6、<h1>到<h6>的定義，應遵循從大到小的原則，體現文檔的結構，并有利于搜索引擎的查詢,因此，請不要利用標題標簽來改變同一行中的字體大小。相反，我們應當使用層疊樣式表定義來達到漂亮的顯示效果。
7、給每一個表格和表單加上一個唯一的、結構標記id
8、給圖片加上alt標簽,alt屬性是一個必需的屬性，它規定在圖像無法顯示時的替代文本。假設由于下列原因用戶無法查看圖像，alt 屬性可以為圖像提供替代的信息：網速太慢、src 屬性中的錯誤、瀏覽器禁用圖像、用戶使用的是屏幕閱讀器。
9、盡量使用英文命名原則
10、盡量不縮寫，除非一看就明白的單詞如btn。
11、命名方式(BEM)：類-體（例：g-head）、類-體-修飾符（例：u-btn-active）。
12、scss中的變量、函數、混合、placeholder采用駝峰式命名
13、后代選擇器：體-修飾符即可（例：.m-page .cut{}）注：后代選擇器不要在頁面布局中使用，因為污染的可能性較大；
14、減少id命名，id在JS是唯一的，不能多次使用，id的優先級優先與class，所以id應該按需使用，而不能濫用。
二 網頁外層重要部分CSS樣式命名
wrap ------------------ 用于最外層 header ---------------- 用于頭部 main ------------------ 用于主體內容（中部） main-left ------------- 左側布局 main-right ------------ 右側布局 nav ------------------- 網頁菜單導航條 content --------------- 用于網頁中部主體 footer ---------------- 用于底部
三 樣式屬性順序
1. 定位：positionz-indexleftrighttopbottomclip等。
2. 自身屬性：widthheightmin-heightmax-heightmin-widthmax-width等。
3. 文字樣式：colorfont-sizeletter-spacing, colortext-align等。
4. 背景：background-imageborder等。
5.文本屬性: text-alignvertical-aligntext-wraptext-transformtext-indenttext-decoration letter-spacingword-spacingwhite-spacetext-overflow等。
6. css3中屬性：content、box-shadow、animation、border-radius、transform等
/* yes */
.example {
z-index: -1;
display: inline-block;
font-size: 16px;
color: red;
background-color: #eee;
}
/* no */
.example {
color: red;
background-color: #eee;
display: inline-block;
z-index: -1;
font-size: 16px;
}
目的：減少瀏覽器reflow(回流)，提升瀏覽器渲染dom的性能。
關注我的頭條號，分享更多的技術學習文章，我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
文檔加載完成到完全顯示之間瀏覽器的渲染流程為：
1）瀏覽器解析html構建dom樹，解析css構建cssom樹即css rule tree：將html和css都解析成樹形的數據結構；dom樹的構建過程是一個深度遍歷過程：當前節點的所有子節點都構建好后才會去構建當前節點的下一個兄弟節點。2）構建render樹：DOM樹和cssom樹合并之后形成render樹。為了構建渲染樹，瀏覽器大體完成了下列工作：從DOM樹的根節點開始遍歷每個可見節點。對于每個可見節點，為其找到適配的CSSOM規則并應用它們。發射可見節點，連同其內容和計算的樣式。渲染樹中包含了屏幕上所有可見內容及其樣式信息。3）布局render樹：有了render樹，瀏覽器已經知道網頁中有哪些節點，各個節點的css定義以及它們的從屬關系，接著就開始布局，計算出每個節點在屏幕中的位置和大小。(html采用了一種流式布局的布局模型，從上到下，從左到右順序布局，布局的起點是從render樹的根節點開始的，對應dom樹的document節點，其初始位置為(0,0)，詳細的布局過程為：每個renderer的寬度由父節點的renderer確定。父節點遍歷子節點，確定子節點的位置(x,y)，調用子節點的layout方法確定其高度，父節點根據子節點的height, margin, padding確定自身的高度)。4）渲染，繪制render樹：瀏覽器已經知道啦哪些節點要顯示，每個節點的css屬性是什么，每個節點在屏幕中的位置是哪里。就進入啦最后一步，按照計算出來的規則，通過顯卡把內容畫在屏幕上。瀏覽器并不是一獲取到css樣式就立馬開始解析而是根據css樣式的書寫順序按照dom樹的結構分布render樣式，完成第（2）步，然后開始遍歷每個樹節點的css樣式進行解析，此時的css樣式的遍歷順序完全是按照之前的的書寫順序，在解析過程中，一旦瀏覽器發現某個元素的定位變化影響布局，則需要倒回去重新渲染。例如css樣式：{width: 100px; height: 100px; background-color: red; position: absolute;}當瀏覽器解析到position的時候突然發現該元素是絕對定位元素需要脫離文檔流，而之前卻是按照普通元素進行解析的，所以不得不重新渲染，解除該元素在文檔中所占位置，然而由于該元素的占位發生變化，其他元素也可能會受到回流的影響而重新排位，最終導致（3）步驟花費時間太久而影響到（4）步驟的顯示，影響了用戶體驗。
注：render樹的結構不等同于DOM樹的結構，一些設置display:none的節點不會被放在render樹中，但會在dom樹中。
有些情況，比如修改了元素的樣式，瀏覽器并不會立刻回流(reflow)或重繪(repaint)，而是把這些操作積攢一批，然后做一次reflow，這也叫做異步reflow。但是在有些情況下，比如改變窗口大小，改變頁面默認字體等瀏覽器會馬上進行reflow。為了更好的用戶體驗，渲染引擎將會盡可能早的將內容呈現在屏幕上，并不會等到所有html都解析完成之后再去構建和布局render樹。它是解析完一部分內容就顯示一部分內容，同時，可能還在網絡上下載其余內容。
四 css樣式書寫規范
使用CSS縮寫屬性
CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時又能提高用戶的閱讀體驗。
去掉小數點前的“0”
簡寫命名(前提是要讓人看懂你的命名才能簡寫哦)
16進制顏色代碼縮寫
連字符CSS選擇器命名規范
1.長名稱或詞組可以使用中橫線來為選擇器命名。2.不建議使用“_”下劃線來命名CSS選擇器，為什么呢？
功能
狀態
注釋的寫法
/* Header */ 內容區 /* End Header */
id的命名
1)頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體佈局寬度：wrapper
左右中：left right center(2)導航
導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary
(3)功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：register
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標籤頁：tab
文章列表：list
提示信息：msg
當前的: current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權：copyright
CSS樣式表文件命名
主要的 master.css
模塊 module.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
打印 print.css
五 HTML5-語義化
距HTML5標準規范制定完成并公開發布已經有好些年了，但是多數公司還是用的不是很多，可能一部分原因是部分用戶在使用低版本瀏覽器吧。
什么是語義化？就是用合理、正確的標簽來展示內容，比如h1~h6定義標題。
語義化優點：
1、header
<header>定義文檔或者文檔的部分區域的頁眉，應作為介紹內容或者導航鏈接欄的容器。在一個文檔中，您可以定義多個<header>元素，但需要注意的是<header>元素不能作為<address>、<footer>或 <header>元素的子元素。
2、nav
<nav>描述一個含有多個超鏈接的區域，該區域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表。在一個文檔中，可定義多個元素。
3、main
<main>定義文檔的主要內容，該內容在文檔中應當是獨一無二的，不包含任何在文檔中重復的內容，比如側邊欄，導航欄鏈接，版權信息，網站logo，搜索框（除非搜索框作為文檔的主要功能）。需要注意的是在一個文檔中不能出現多個<main>標簽。
4、article
<article>元素表示文檔、頁面、應用或網站中的獨立結構，是可獨立分配的、可復用的結構，如在發布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件，或者其他獨立的內容項目。當<article>元素嵌套使用時，則該元素代表與外層元素有關的文章。例如，代表博客評論的元素可嵌套在代表博客文章的元素中。
5、aside
<aside>元素表示一個和其余頁面內容幾乎無關的部分，被認為是獨立于該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現為側邊欄或嵌入內容。
6、footer
<footer>定義最近一個章節內容或者根節點元素的頁腳。一個頁腳通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息。使用footer插入聯系信息時，應在 footer 元素內使用 元素。注意不能包含<footer>或者<header>
7、section
<section>表示文檔中的一個區域（或節），比如，內容中的一個專題組。
如果元素內容可以分為幾個部分的話，應該使用 <article>而不是 <section>。不要把 <section>元素作為一個普通的容器來使用，特別是當<section>僅僅是為了美化樣式或方便腳本使用的時候，應使用<div>。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
