**
可能大家都知道，js執行會阻塞dom樹的解析和渲染，那麼css載入會阻塞dom樹的解析和渲染嗎？接下來，我們就一起來分析一下。
那麼為什麼會出現上面的現象呢？我們從瀏覽器的渲染過程來解析下。
不同的瀏覽器使用的核心不同，所以他們的渲染過程也是不一樣的。目前主要有兩個：
webkit渲染過程
gecko渲染過程
從上面兩個流程圖我們可以看出來，瀏覽器渲染的流程如下：
html解析檔案，生成dom tree，解析css檔案生成cssom tree
將dom tree和cssom tree結合，生成render tree(渲染樹)
根據render tree渲染繪製，將畫素渲染到螢幕上。
從流程我們可以看出來
dom解析和css解析是兩個並行的程序，所以這也解釋了為什麼css載入不會阻塞dom的解析。
然而，由於render tree是依賴於dom tree和cssom tree的，所以他必須等待到cssom tree構建完成，也就是css資源載入完成(或者css資源載入失敗)後，才能開始渲染。因此，css載入是會阻塞dom的渲染的。
由於js可能會操作之前的dom節點和css樣式，因此瀏覽器會維持html中css和js的順序。因此，樣式表會在後面的js執行前先載入執行完畢。所以css會阻塞後面js的執行。
而domcontentloaded，顧名思義，就是當頁面的內容解析完成後，則觸發該事件。那麼，正如我們上面討論過的，css會阻塞dom渲染和js執行，而js會阻塞dom解析。那麼我們可以做出這樣的假設
當頁面只存在css，或者js都在css前面，那麼domcontentloaded不需要等到css載入完畢。
當頁面裡同時存在css和js，並且js在css後面的時候，domcontentloaded必須等到css和js都載入完畢才觸發。
我們先對第一種情況做測試：
實驗結果如下圖：
從**我們可以看出來，css還未載入完，就已經觸發了domcontentloaded事件了。因為css後面沒有任何js**。
接下來我們對第二種情況做測試，很簡單，就在css後面加一行**就行了
實驗結果如下圖：
我們可以看到，只有在css載入完成後，才會觸發domcontentloaded事件。因此，我們可以得出結論：
如果頁面中同時存在css和js，並且存在js在css後面，則domcontentloaded事件會在css載入完後才執行。
由上所述，我們可以得出以下結論:
css載入不會阻塞dom樹的解析
css載入會阻塞dom樹的渲染
css載入會阻塞後面js語句的執行、
因此，為了避免讓使用者看到長時間的白屏時間，我們應該盡可能的提高css載入速度，比如可以使用以下幾種方法:
使用cdn(因為cdn會根據你的網路狀況，替你挑選最近的乙個具有快取內容的節點為你提供資源，因此可以減少載入時間)
對css進行壓縮(可以用很多打包工具，比如webpack,gulp等，也可以通過開啟gzip壓縮)
合理的使用快取(設定cache-control,expires,以及e-tag都是不錯的，不過要注意乙個問題，就是檔案更新後，你要避免快取而帶來的影響。其中乙個解決防範是在檔案名字後面加乙個版本號)
減少http請求數，將多個css檔案合併，或者是乾脆直接寫成內聯樣式(內聯樣式的乙個缺點就是不能快取)
可能大家都知道，js執行會阻塞dom樹的解析和渲染，那麼css載入會阻塞dom樹的解析和渲染嗎？接下來，我們就一起來分析一下。
那麼為什麼會出現上面的現象呢？我們從瀏覽器的渲染過程來解析下。
不同的瀏覽器使用的核心不同，所以他們的渲染過程也是不一樣的。目前主要有兩個：
webkit渲染過程
gecko渲染過程
從上面兩個流程圖我們可以看出來，瀏覽器渲染的流程如下：
html解析檔案，生成dom tree，解析css檔案生成cssom tree
將dom tree和cssom tree結合，生成render tree(渲染樹)
根據render tree渲染繪製，將畫素渲染到螢幕上。
從流程我們可以看出來
dom解析和css解析是兩個並行的程序，所以這也解釋了為什麼css載入不會阻塞dom的解析。
然而，由於render tree是依賴於dom tree和cssom tree的，所以他必須等待到cssom tree構建完成，也就是css資源載入完成(或者css資源載入失敗)後，才能開始渲染。因此，css載入是會阻塞dom的渲染的。
由於js可能會操作之前的dom節點和css樣式，因此瀏覽器會維持html中css和js的順序。因此，樣式表會在後面的js執行前先載入執行完畢。所以css會阻塞後面js的執行。
而domcontentloaded，顧名思義，就是當頁面的內容解析完成後，則觸發該事件。那麼，正如我們上面討論過的，css會阻塞dom渲染和js執行，而js會阻塞dom解析。那麼我們可以做出這樣的假設
當頁面只存在css，或者js都在css前面，那麼domcontentloaded不需要等到css載入完畢。
當頁面裡同時存在css和js，並且js在css後面的時候，domcontentloaded必須等到css和js都載入完畢才觸發。
我們先對第一種情況做測試：
實驗結果如下圖：
從**我們可以看出來，css還未載入完，就已經觸發了domcontentloaded事件了。因為css後面沒有任何js**。
接下來我們對第二種情況做測試，很簡單，就在css後面加一行**就行了
實驗結果如下圖：
我們可以看到，只有在css載入完成後，才會觸發domcontentloaded事件。因此，我們可以得出結論：
如果頁面中同時存在css和js，並且存在js在css後面，則domcontentloaded事件會在css載入完後才執行。
由上所述，我們可以得出以下結論:
css載入不會阻塞dom樹的解析
css載入會阻塞dom樹的渲染
css載入會阻塞後面js語句的執行、
因此，為了避免讓使用者看到長時間的白屏時間，我們應該盡可能的提高css載入速度，比如可以使用以下幾種方法:
使用cdn(因為cdn會根據你的網路狀況，替你挑選最近的乙個具有快取內容的節點為你提供資源，因此可以減少載入時間)
對css進行壓縮(可以用很多打包工具，比如webpack,gulp等，也可以通過開啟gzip壓縮)
合理的使用快取(設定cache-control,expires,以及e-tag都是不錯的，不過要注意乙個問題，就是檔案更新後，你要避免快取而帶來的影響。其中乙個解決防範是在檔案名字後面加乙個版本號)
減少http請求數，將多個css檔案合併，或者是乾脆直接寫成內聯樣式(內聯樣式的乙個缺點就是不能快取)
ajax預載入顯示頁面
一下內容以freemark為模版，同時在需要該功能的同時，正常訪問的url需要當引數傳入，http localhost 89 chysoft extajax ajax loadpage.xhtml?url 需要訪問的url包含.do action xhtml 例如 http localhost 89...
css 頁面特殊顯示效果
1.移動端最小設定字型為12px，如果想要更小字型效果 webkit transform scale 0.9 2.文字超過兩行時，末尾顯示點點的效果 overflow hidden text overflow ellipsis display webkit box webkit box orient...
css 頁面特殊顯示效果
1.移動端最小設定字型為12px，如果想要更小字型效果 webkit transform scale 0.9 2.文字超過兩行時，末尾顯示點點的效果 overflow hidden text overflow ellipsis display webkit box webkit box orient...