是不是每次新建一篇文檔，都要把下面的步驟走一遍：

先輸入文字，然后開始排版，先是更改文字格式，設置字體，字號，段落間距，然后點擊鼠標設置上下左右頁邊距，插入頁碼。以上設置頁面，設置文字格式的過程每次都走一遍，才排出來一篇規范的文檔。

有的操作者甚至都不設置頁邊距，就保持著默認模板的頁邊距，左右頁邊距是3厘米多，就像這樣：

那么您有沒有想過，如何進行操作，就能打開word軟件，直接出現一個上下左右默認都是2CM，自動插入好頁碼的頁面，甚至文字格式都已經設置好的文檔？

然后您可以直接開始輸入文字啦，不必再重復版面和格式的設置。這樣就可以避免或減少您的重復性操作。一勞永逸做不到，但至少能省去不少重復性操作啊。

上面的想法當然有辦法做到了，就看您愿意不愿意鉆研一下，嘗試一下，下面介紹給您。

辦法就是找到word的默認文檔模板，因為它作為模板，決定著文檔的版式啊，把它設置好，下次打開word軟件，頁面直接就是設置好您需要的版面格式，您就可以在當前頁面直接輸入文字，就會很快地得到您理想的文檔，不用每一次都進行重復性操作，設置格式了。

不講理論，開始操作。

首先找到word軟件的默認文檔模板，才能修改啊。

操作步驟：

1，打開資源管理器，通過設置文件夾選項，把具有隱含屬性的word默認模板找到，單擊右鍵打開它，進行修改。

同時按住“Win徽標鍵+字母E”，打開“計算機”的資源管理器界面，點擊上面的“工具”菜單，滑動到“文件夾選項”，左鍵打開，進行三項設置，顯示出計算機隱藏的文件夾和文件，目標是找到word默認模板。

附：word默認模板路徑

win 7：C:\Users\Administrator\AppData\Roaming\Microsoft\Templates

win xp：C:\Documents and Settings\Administrator\Application data\Microsoft\Templates

上面是我的探索，在這里和大家抱歉地說一聲，繞路了，嘿嘿，[奸笑]

我也是后來才看到網上有大俠，有大招，快準狠，看：

1、關閉所有打開的Word文檔；

2、復制這條命令：

%appdata%\microsoft\templates

3、開始 → 運行 → 粘貼上面復制的命令 → 確定。

4、在打開的目錄下，找到Normal.dot，右鍵單擊它并選擇“打開”（這是關鍵，不可雙擊打開）；

引用自：https://zhidao.baidu.com/question/148290252.html

2，修改名為Normal.dotm的word默認模板并保存，就設置好了word文檔默認模板的格式。

解釋一下：Normal.dot是office2003默認文檔模板的名字，Normal.dotm是高版本的默認文檔模板的名字，注意區分，找到正確的默認文檔模板。

記得一定要選中Normal.dotm單擊右鍵，選擇“打開”，才能在保存的時候不出現“另存為”問題。

（1），先改頁面邊距，改成適合中文版式的頁邊距。上下左右都設置成2cm或者2.5CM，節約版面，經濟美觀（此為個人設置，有特殊規定的您自己按照要求設置即可）。

（2），設置每一頁自動加上頁碼。這個操作更是本次設置的目的，我喜歡這個操作[微笑]。

新建文檔時候，word打開的是默認模板，不會自動加頁碼，不方便。

經過這個設置，可以省去繁瑣的操作，自動加頁碼。看圖：

此時，頁面的頁眉頁腳處于激活狀態，點擊Esc，關閉頁眉頁腳設置狀態。

●有時候發現設置文檔默認模板后，會發現頁眉有一條橫線，很是討厭。怎么去除，看圖。

點擊頁眉的區域，激活頁眉頁腳設置，轉到頁眉區。

如果不想做過多的設置，到這里就可以按“Ctrl+字母W”，按照提示，選擇“是”，可以關閉文檔，這個文檔其實是word默認文檔模板。

繼續設置默認字體，段落，往下走。

（3），設置文檔默認字體，段落，不要關閉當前頁面，繼續設置。

設置文檔默認字體，段落，這個主要依靠修改“樣式”了，What[震驚]，從來沒有用過”樣式”，那您更得看看下面的操作了。

什么是樣式？

樣式：是指用有意義的名稱保存的字符格式和段落格式的集合，這樣在編排重復格式時，先創建一個該格式的樣式，然后在需要的地方套用這種樣式，就無須一次次地對它們進行重復的格式化操作了。

樣式是Office Word中的重要功能，可以幫助用戶快速格式化Word文檔。

Word2010以上版本才可以直觀地設置樣式，具體操作，以word2013界面為范例，其他版本類似：

至此，全部設置結束，可以按“Ctrl+字母W”關閉文檔，就是默認文檔模板，出現提示選擇“是”，保存所有設置。

此后，再新建word文檔，文檔的版面格式將會自動按照您剛才定義好的方案設置到位并且呈現出來，您就不必再重復性操作了，工作效率由此獲得提高。

趕緊試試吧，探索，實踐和體驗成功的樂趣，由此而得[呲牙][呲牙][呲牙]。

前面一篇文章：「高頻面試題」瀏覽器從輸入url到頁面展示中間發生了什么 中，我們有對瀏覽器的渲染流程做了一個概括性的介紹，今天這篇文章我們將深入學習這部分內容。

對于很多前端開發來說，平常做工主要專注于業務開發，對瀏覽器的渲染階段可能不是很了解。實際上這個階段很重要，了解瀏覽器的渲染過程，能讓我們知道我們寫的HTML、CSS、JS代碼是如何被解析，并最終渲染成一個頁面的，在頁面性能優化的時候有相應的解決思路。

我們先來看一個問題：

HTML、CSS、JS文件在瀏覽器中是如何轉化成頁面的？

如果你回答不上來，那就往下看吧。

按照渲染的時間順序，渲染過程可以分為下面幾個子階段：構建DOM樹、樣式計算、布局階段、分層、柵格化和合成顯示。

下面詳細看下每個階段都做了哪些事情。

1. 構建DOM樹

HTML文檔描述一個頁面的結構，但是瀏覽器無法直接理解和使用HTML，所以需要通過HTML解析器將HTML轉換成瀏覽器能夠理解的結構——DOM樹。

HTML文檔中所有內容皆為節點，各節點之間有層級關系，彼此相連，構成DOM樹。

構建過程：讀取HTML文檔的字節(Bytes)，將字節轉換成字符(Chars)，依據字符確定標簽(Tokens)，將標簽轉換成節點(Nodes)，以節點為基準構建DOM樹。參考下圖：

打開Chrome的開發者工具，在控制臺輸入 document 后回車，就能看到一個完整的DOM樹結構，如下圖所示：

在控制臺打印出來的DOM結構和HTML內容幾乎一樣，但和HTML不同的是，DOM是保存在內存中的樹狀結構，可以通過JavaScript來查詢或修改其內容。

2. 樣式計算

樣式計算這個階段，是為了計算出DOM節點中每個元素的表現樣式。

2.1 解析CSS

CSS樣式可以通過下面三種方式引入：

• 通過link引用外部的CSS文件
• style 標簽內的CSS
• 元素的style屬性內嵌的CSS

和HTML一樣，瀏覽器無法直接理解純文本的CSS樣式，需要通過CSS解析器將CSS解析成 styleSheets 結構，也就是我們常說的 CSSOM樹。

styleSheets結構同樣具備查詢和修改功能：

document.styleSheets

2.2 屬性值標準化

屬性值標準化看字面意思有點不好理解，我們通過下面一個例子來看看什么是屬性值標準化：

在寫CSS樣式的時候，我們在設置color屬性值的時候，經常會用white、red等，但是這種值瀏覽器的渲染引擎不容易理解，所以需要將所有值轉換成渲染引擎容易理解的、標準化的計算值，這個過程就是屬性值標準化。

white標準化后的值為 rgb(255, 255, 255)

2.3 計算DOM樹中每個節點的樣式

完成樣式的屬性值標準化后，就需要計算每個節點的樣式屬性，這個階段CSS有兩個規則我們需要清楚：

• 繼承規則：每個DOM節點都包含有父節點的樣式
• 層疊規則：層疊是CSS的一個基本特征，是一個定義了如何合并來自多個源的屬性值的算法。

樣式計算階段是為了計算出DOM節點中每個元素的具體樣式，在計算過程中需要遵守CSS的繼承和層疊兩個規則。

該階段最終輸出的內容是每個DOM節點的樣式，并被保存在 ComputedStyle 的結構中。

3. 布局階段

經過上面的兩個步驟，我們已經拿到了DOM樹和DOM樹中元素的樣式，接下來需要計算DOM樹中可見元素的幾何位置，這個計算過程就是布局。

3.1 創建布局樹

在DOM樹中包含了一些不可見的元素，例如 head 標簽，設置了 display:none 屬性的元素，所以我們需要額外構建一棵只包含可見元素的布局樹。

構建過程：從DOM樹的根節點開始遍歷，將所有可見的節點加到布局樹中，忽略不可見的節點。

3.2 布局計算

到這里我們就有了一棵構建好的布局樹，就可以開始計算布局樹節點的坐標位置了。從根節點開始遍歷，結合上面計算得到的樣式，確定每個節點對象在頁面上的具體大小和位置，將這些信息保存在布局樹中。

布局階段的輸出是一個盒子模型，它會精確地捕獲每個元素在屏幕內的確切位置與大小。

4. 分層

現在我們已經有了布局樹，也知道了每個元素的具體位置信息，但是還不能開始繪制頁面，因為頁面中會有像3D變換、頁面滾動、或者用 z-index 進行z軸排序等復雜效果，為了更方便實現這些效果，渲染引擎還需要為特定的節點生成專用的圖層，并生成一棵對應的圖層樹(LayerTree)。

在Chrome瀏覽器中，我們可以打開開發者工具，選擇 Elements-Layers 標簽，就可以看到頁面的分層情況，如下圖所示：

瀏覽器的頁面實際上被分成了很多圖層，這些圖層疊加后合成了最終的頁面。

到這里，我們構建了兩棵樹：布局樹和圖層樹。下面我們來看下這兩棵樹之間的關系：

正常情況下，并不是布局樹的每個節點都包含一個圖層，如果一個節點沒有對應的圖層，那么這個節點就從屬于父節點的圖層。

那節點要滿足什么條件才會被提升為一個單獨的圖層？只要滿足下面其中一個條件即可：

• 擁有層疊上下文屬性的元素會被提升為單獨的一個圖層
• 需要剪裁(clip)的地方也會被創建為圖層。

5. 圖層繪制

構建好圖層樹之后，渲染引擎就會對圖層樹中的每個圖層進行繪制。

渲染引擎實現圖層繪制，會把一個圖層的繪制拆分成很多小的繪制指令，然后將這些指令按照順序組成一個繪制列表。

6. 柵格化(raster)操作

繪制一個圖層時會生成一個繪制列表，這只是用來記錄繪制順序和繪制指令的列表，實際上繪制操作是由渲染引擎中的合成線程來完成的。

通過下圖來看下渲染主線程和合成線程之間的關系：

當圖層的繪制列表準備好后，主線程會把該繪制列表提交給合成線程，合成線程開始工作。

首先合成線程會將圖層劃分為圖塊(tile)，圖塊大小通常是 256256 或者 512512。

然后合成線程會按照視口附近的圖塊來優先生成位圖，實際生成位圖的操作是由柵格化來執行的。所謂柵格化，是指將圖塊轉換為位圖。而圖塊是柵格化執行的最小單位。渲染進程維護了一個柵格化的線程池，所有的圖塊柵格化都是在線程池內執行的，運行方式如下圖所示：

7. 合成和顯示

一旦所有圖塊都被光柵化，合成線程就會生成一個繪制圖塊的命令——“DrawQuad”，然后將該命令提交給瀏覽器進程。

瀏覽器進程里面有一個名字叫做 viz 的組件，用來接收合成線程發過來的 DrawQuad 命令，然后根據命令執行。 DrawQuad 命令，將其頁面內容繪制到內存中，最后再將內存顯示在屏幕上。

多年開發老碼農福利贈送：網頁制作，網站開發，web前端開發，從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Vue、React、Ajax，node，angular框架等到移動端小程序項目實戰【視頻＋工具＋電子書＋系統路線圖】都有整理，需要的伙伴可以私信我，發送“前端”等3秒后就可以獲取領取地址，送給每一位對編程感興趣的小伙伴

8. 總結

一個完整的渲染流程可以總結如下：

• 1、渲染進程將HTML內容轉換為瀏覽器能夠讀懂的DOM樹結構。
• 2、渲染引擎將CSS樣式表轉化為瀏覽器可以理解的styleSheets，計算出DOM節點的樣式。
• 3、創建布局樹，并計算所需元素的布局信息。
• 4、對布局樹進行分層，并生成分層樹。
• 5、為每個圖層生成繪制列表，并將其提交到合成線程。
• 6、合成線程將圖層分圖塊，并柵格化將圖塊轉換成位圖。
• 7、合成線程發送繪制圖塊命令給瀏覽器進程。瀏覽器進程根據指令生成頁面，并顯示到顯示器上。

渲染過程中還有兩個我們經常聽到的概念：重排和重繪。在這篇文章中就不細說了，下一篇文章再詳細介紹。