- 01-11 – 部署內嵌CSS
第一部分 – 第11章
當你的移動網站頁面需要使用大塊CSS樣式代碼時,最好的方式就是在一個外部文件(或者多個外部文件)中包括所有需要的CSS。這種CSS設置將最大化移動網站頁面的加載速度。
在其他一些情況下,當你的移動網站頁面僅需要使用很少的CSS代碼時,使用外部文件包括CSS代碼就不再有太大意義了。更好的方式是將CSS代碼內嵌到移動網站頁面的HTML代碼中。這種設置將會減少對外部CSS文件的http請求數量,並能允許頁面更快加載。
給網頁添加CSS
當增加內嵌的CSS代碼到移動網站頁面時,必須添加到head部分的style標籤內。例如:
<head> <style> body { background-color: ffffff; } h1 { color: maroon; margin-left: 10px; } p, ul, ol{margin-top:0;line-height:180%;} a{text-decoration:underline;color:#C20000;} </style> </head>
這種設置方式也有不足之處,網絡瀏覽器將不會像緩存外部CSS文件一樣緩存內嵌的CSS內容。
- 上一章:合併多個JavaScript文件
- 下一章:部署內嵌JavaScript
移動網站性能技術白皮書在2017年3月正式出版。
英文版:Implement Inline CSS – 簡體中文版:部署內嵌CSS
移動網站性能技術白皮書上的內容按下列許可協議發布: CC Attribution-Noncommercial 4.0 International