望收藏了我寫的文章的你同時(shí)可以關(guān)注一下“小海前端”，因?yàn)檫@些文章都是連載的，并且是經(jīng)過我系統(tǒng)的歸納過的。

【技術(shù)等級(jí)】初級(jí)

【承接文章】《CSS實(shí)現(xiàn)圖片精靈，原來要這樣使用背景屬性，前端設(shè)計(jì)師必備知識(shí)》

本文小海老師為大家講解利用CSS處理HTML中的列表，也就是CSS有關(guān)列表的屬性。本文屬于前端開發(fā)的初級(jí)教程，適合于剛剛開始接觸CSS技術(shù)的學(xué)習(xí)者。

列表屬性是指可以對(duì)HTML中的<ol></ol>標(biāo)記對(duì)和<ul></ul>標(biāo)記對(duì)進(jìn)行樣式設(shè)置的屬性。這一組CSS屬性包括以下三個(gè)：

• list-style-type

• list-style-image

• list-style-position

一、設(shè)置列表的項(xiàng)目符號(hào)或編號(hào)：

CSS技術(shù)使用 list-style-type 設(shè)置列表的項(xiàng)目符號(hào)或編號(hào)

在HTML中，主要操作的列表有兩種：

• 無序列表：用<ul></ul>標(biāo)記對(duì)實(shí)現(xiàn)。無序列表項(xiàng)中左側(cè)的標(biāo)識(shí)我們把它稱為“項(xiàng)目符號(hào)”。

• 有序列表：用<ol></ol>標(biāo)記對(duì)實(shí)現(xiàn)。有序列表項(xiàng)中左側(cè)的標(biāo)識(shí)我們把它稱為“編號(hào)”。

有序列表與無序列表

CSS技術(shù)利用 list-style-type 屬性來設(shè)置HTML列表左側(cè)標(biāo)識(shí)的樣式。并且在CSS看來，<ul></ul>和<ol></ol>兩個(gè)標(biāo)記對(duì)不再進(jìn)行有序和無序的區(qū)分，使用list-style-type屬性設(shè)置為哪個(gè)取值，就是對(duì)應(yīng)的哪種列表。

該屬性包括以下幾種取值：

• none，列表項(xiàng)無標(biāo)記。

• disc，默認(rèn)值，標(biāo)記為實(shí)心圓。

• circle，標(biāo)記為空心圓。

• square，標(biāo)記為實(shí)心方塊。

• decimal，標(biāo)記為數(shù)字。

• decimal-leading-zero，標(biāo)記為0開頭的數(shù)字（01、02、03 等）。

• lower-roman，標(biāo)記為小寫羅馬數(shù)字（i、ii、iii等）。

• upper-roman，標(biāo)記為大寫羅馬數(shù)字（I、II、III等）。

• lower-alpha，標(biāo)記為小寫英文字母（a、b、c等）。

• upper-alpha，標(biāo)記為大寫英文字母（A、B、C等）。

二、使用自定義圖片來代替項(xiàng)目符號(hào)和編號(hào)：

CSS技術(shù)利用 list-style-image 屬性來設(shè)置列表左側(cè)的標(biāo)識(shí)為指定的圖片

CSS技術(shù)利用 list-style-image 屬性來設(shè)置列表左側(cè)的標(biāo)識(shí)為指定的圖片。

格式：list-style-image:url(Image_URL);

例如：ul{list-style-image:url(../images/01.jpg);}

三、設(shè)置列表中列表項(xiàng)的縮進(jìn)：

CSS技術(shù)利用 list-style-position 屬性來設(shè)置列表項(xiàng)的縮進(jìn)

CSS技術(shù)利用 list-style-position 屬性來設(shè)置列表項(xiàng)的縮進(jìn)。

該屬性包括以下兩種取值：

• loutside，默認(rèn)值，列表項(xiàng)不縮進(jìn)。

• linside，列表項(xiàng)縮進(jìn)。

這個(gè)屬性使用在列表項(xiàng)<li></li>標(biāo)記對(duì)上的，不能用在<ol></ol>或<ul></ul>之上。

文章預(yù)告

下一篇文章中，小海老師會(huì)繼續(xù)為大家向下講解CSS屬性，下一次我們講解CSS中最為重要的一組屬性：定位屬性。這是CSS中非常常用的一組屬性，希望大家千萬不要錯(cuò)過！

小海教材

如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會(huì)免費(fèi)將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。

小海聲明

在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識(shí)，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗(yàn)，每寫一篇時(shí)我都盡量把握好措辭，用簡單易懂的語言描述，同時(shí)精心設(shè)計(jì)版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費(fèi)小海老師很久的時(shí)間。

希望收藏了我寫的文章的你同時(shí)可以關(guān)注一下“小海前端”，因?yàn)檫@些文章都是連載的，并且是經(jīng)過我系統(tǒng)的歸納過的。

關(guān)注“小海前端”，我會(huì)繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅(jiān)持的走下去。

1. 基本要求

前端界面顯示的速度一般要求是：60fps

2. 根據(jù)要求 1s / 60 = 16.67ms 即：處理一個(gè)界面的時(shí)間，除了瀏覽器自己需要的時(shí)間，開發(fā)者能使用的時(shí)間大概10ms

10ms中處理的流程為：

javascript > style > layout > paint > composite

如果JS的操作影響到了界面樣式的變化，則有上面的處理流程

如果style的操作影響到布局，則會(huì)進(jìn)入layout，反之亦然；style改了transform屬性，在blink和edge瀏覽器里面不需要layout和paint

3. 減少渲染堵塞

避免head標(biāo)簽JS堵塞

異步加載JS: HTML5 的script 屬性 defer

JS寫在body后面

Tips: 可能有時(shí)候JS庫，還沒加載完就要執(zhí)行了，可能會(huì)報(bào)錯(cuò)

減少 head 中的 CSS 資源

CSS 會(huì)影響到 layout ，寫在Body里面會(huì)界面閃爍，但寫在Head里面如果太多會(huì)影響渲染

不要寫太多base64，雖然很方便，但會(huì)改變文件大小

如果CSS文件沒有達(dá)到三位數(shù)的大小，可以直接寫到Html界面中，因?yàn)槿绻褂猛怄湗邮剑瑒t可能會(huì)花費(fèi)更多時(shí)間，如DNS解析，建立鏈接，下載等

優(yōu)化圖片，使用響應(yīng)式圖片，圖片的srcset 屬性，會(huì)有兼容問題

<img srcset='photo_w350.jpg 1x photo_w640.jpg 2x' src='phtot_w350.jpg' alt=''>

使用picture按需加載，需要寫在HTML中，如果使用JS來調(diào)用，則無效

<picture>

<source srcset='baner_w1000.jpg' media="(min-width:801px)"> # source 還有其它的優(yōu)化屬性，不過會(huì)有兼容問題: type='image/webp'

<source srcset='baner_w800.jpg' media="(max-width:800px)">

<img src='baner_w800.jpg' alt=''> # picture 必需有 img 標(biāo)簽，只有img標(biāo)簽才會(huì)觸發(fā)onload事件; picture 與 source 都不觸發(fā) layout

</picture>

判斷瀏覽器是否支持：

var supportSrcset = 'srcset' in document.createElement('img');

var surportPicture = 'HTMLPictureElement' in window;

延遲加載

<picture>

<source data-srcset="photo_w350.jpg 1x, photo_w640.jpg 2x">

<img data-src="photo_w350.jpg" src="about:blank" alt=""> # src 寫為此值不會(huì)報(bào)錯(cuò)，也對(duì)瀏覽器友好

</picture>

監(jiān)聽Scroll事件

showImage(leftSpace = 500){

var scrollTop = $window.scrollTop(), $containers = this.$imgContainers, scrollPosition = $window.scrollTop() + $window.height();

for(var i = 0; i < $containers.length; i++){

//如果快要滑到圖片的位置了

var $container = $containers.eq(i);

if($container.offset().top - scrollPosition < leftSpace) {

this.ensureImgSrc($container);

}

}

}

ensureImgSrc($container) {

var $source = $container.find("source");

if($source.length && !$source.attr("srcset")){

$source.attr("srcset", $source.data("srcset"));

}

var $img = $container.find("img:not(.loading)");

if($img.length && $img.attr("src").indexOf("http://") < 0){

$img.attr("src", $img.data("src"));

this.shownCount++;

}

}

init(){

//初始化

var leftSpace = 0;

this.showImage(leftSpace);

//滑動(dòng)

$window.on("scroll", this, this.throttleShow);

}

ensureImgSrc($container){

//如果全部顯示，off掉window.scroll

if(this.shownCount >= this.allCount){

$window.off("scroll", this.throttleShow);

}

}

指定圖片尺寸，避免 reflow

4. 壓縮與緩存

作用

第一個(gè)是把200變成304，避免資源重新傳輸，

第二個(gè)是讓瀏覽器直接從緩存取，連http請求都不用了，這樣對(duì)于第二次訪問頁面是極為有利的。

開啟壓縮 gzip

server {

gzip on;

gzip_types text/plain application/javascript application/x-javascript text/html text/css text/xml text/javascript

}

緩存 Cache-Control

location ~* \.(jpg|gif|png|webp) {

expires 30d;

}

location ~* \.(css|js) {

expires 1d;

}

此方法會(huì)在返回的請求響應(yīng)頭中添加 Cache-Control: max-age=604800 ， 且 max-age 的優(yōu)先級(jí)會(huì)大于 last-modified

開啟 nginx last-modified 字段，在響應(yīng)頭中： last-modified 字段接收nginx的數(shù)據(jù)，在請求頭中： If-Modified-Since 字段返回給nginx

這個(gè)辦法得查手冊

使用etag，在響應(yīng)頭中是： Etag 字段 ，在請求頭中會(huì)記錄在 If-None-Match 字段

server {

etag on;

}

5. 其它優(yōu)化

DNS預(yù)讀取

<link rel="dns-prefection" > # 在Head標(biāo)簽中添加相應(yīng)的域名，由于它是并行的，不會(huì)堵塞頁面渲染

HTML優(yōu)化

刪除注釋、縮進(jìn)，除了 pre 或 code 這樣的標(biāo)簽不能刪除，其它的都可以

代碼優(yōu)化

例如說html別嵌套太多層，否則加重頁面layout的壓力

CSS的選擇器別寫太復(fù)雜，不然匹配的計(jì)算量會(huì)比較大

JS的濫用閉包，閉包會(huì)加深作用域鏈，加長變量查找的時(shí)間

6. 利用HTML5或CSS3

代替圖片 或 LocalStorage、 Offline Storage