整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
【技术等级】初级
【承接文章】《CSS实现图片精灵，原来要这样使用背景属性，前端设计师必备知识》
本文小海老师为大家讲解利用CSS处理HTML中的列表，也就是CSS有关列表的属性。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
列表属性是指可以对HTML中的<ol></ol>标记对和<ul></ul>标记对进行样式设置的属性。这一组CSS属性包括以下三个：
list-style-type
list-style-image
list-style-position
一、设置列表的项目符号或编号：
CSS技术使用 list-style-type 设置列表的项目符号或编号
在HTML中，主要操作的列表有两种：
无序列表：用<ul></ul>标记对实现。无序列表项中左侧的标识我们把它称为“项目符号”。
有序列表：用<ol></ol>标记对实现。有序列表项中左侧的标识我们把它称为“编号”。
有序列表与无序列表
CSS技术利用 list-style-type 属性来设置HTML列表左侧标识的样式。并且在CSS看来，<ul></ul>和<ol></ol>两个标记对不再进行有序和无序的区分，使用list-style-type属性设置为哪个取值，就是对应的哪种列表。
该属性包括以下几种取值：
none，列表项无标记。
disc，默认值，标记为实心圆。
circle，标记为空心圆。
square，标记为实心方块。
decimal，标记为数字。
decimal-leading-zero，标记为0开头的数字（01、02、03 等）。
lower-roman，标记为小写罗马数字（i、ii、iii等）。
upper-roman，标记为大写罗马数字（I、II、III等）。
lower-alpha，标记为小写英文字母（a、b、c等）。
upper-alpha，标记为大写英文字母（A、B、C等）。
二、使用自定义图片来代替项目符号和编号：
CSS技术利用 list-style-image 属性来设置列表左侧的标识为指定的图片
CSS技术利用 list-style-image 属性来设置列表左侧的标识为指定的图片。
格式：list-style-image:url(Image_URL);
例如：ul{list-style-image:url(../images/01.jpg);}
三、设置列表中列表项的缩进：
CSS技术利用 list-style-position 属性来设置列表项的缩进
CSS技术利用 list-style-position 属性来设置列表项的缩进。
该属性包括以下两种取值：
loutside，默认值，列表项不缩进。
linside，列表项缩进。
这个属性使用在列表项<li></li>标记对上的，不能用在<ol></ol>或<ul></ul>之上。
下一篇文章中，小海老师会继续为大家向下讲解CSS属性，下一次我们讲解CSS中最为重要的一组属性：定位属性。这是CSS中非常常用的一组属性，希望大家千万不要错过！
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
面几篇文章我们聊了如何解析HTML标签，这篇文章我们聊一下解析CSS的模块——css。
npm install csscss模块提供了一个解析css内容的方法parse，它返回css内容的抽象语法树（AST）。
图1
图1执行结果如下：
图2
parse方法还可以传入第二个参数，这个参数是个对象，它有两个属性，其中一个属性是source，代表css文件的路径，如果参数中存在source属性，在parse方法返回的抽象语法树结果中或者在解析报错时的信息中都会带上文件的路径。另外一个属性是silent，如果设置了这个属性，即使在解析中出错，parse方法也不会抛出错误。
图3
stringify方法的第一个参数是css内容的抽象语法树对象，返回的结果是css内容，此方法的作用和parse正好相反，如下图所示。
图4
stringify方法的第二个参数也是一个对象，对象属性有indent、compress、sourcemap、inputSourcemaps。
indent代表输出的css内容的缩进，默认是两个空格。利用这个属性就可以做一个css格式化工具。
图5
compress表示css的内容是否需要被压缩，压缩时会移除所有的空格和注释。
图6
sourcemap用于生成css的sourceMap。
图7
图7红色区域中sourceMap的json串的原理是什么？不了解的同学可以参考作者之前的一篇文章《深度解析前端代码打包过程中是如何生成sourceMap的？》，我相信一定难不倒聪明的你，这里就不再熬述了。
inputSourcemaps表示在生成sourcemap时可以读取已存在的sourcemap引用，默认是true。因为有些打包好的css文件中已经存在了sourcemap的引用，所以在解析时这个模块会自动读取map信息。
在作者看来，AST是前端皇冠上的明珠，就像发动机之于飞机，石油之于工业。有了AST，前端的页面可以在浏览器上渲染出来，有了AST，就可以自由的开发自己的框架。它即很重要，却也很难掌握，所以这个知识点放在以后讲。
本文主要分享了一个css的解析模块，那它到底有什么用呢？我们平常用的语法校验、格式校验、sourcemap等都和它相关，所以如果需要开发一个和css相关的node工具，就可以考虑使用这个模块。
喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，共同成长！
前端界面显示的速度一般要求是：60fps
10ms中处理的流程为：
javascript > style > layout > paint > composite
如果JS的操作影响到了界面样式的变化，则有上面的处理流程
如果style的操作影响到布局，则会进入layout，反之亦然；style改了transform属性，在blink和edge浏览器里面不需要layout和paint
避免head标签JS堵塞
异步加载JS: HTML5 的script 属性 defer
JS写在body后面
Tips: 可能有时候JS库，还没加载完就要执行了，可能会报错
减少 head 中的 CSS 资源
CSS 会影响到 layout ，写在Body里面会界面闪烁，但写在Head里面如果太多会影响渲染
不要写太多base64，虽然很方便，但会改变文件大小
如果CSS文件没有达到三位数的大小，可以直接写到Html界面中，因为如果使用外链样式，则可能会花费更多时间，如DNS解析，建立链接，下载等
优化图片，使用响应式图片，图片的srcset 属性，会有兼容问题
<img srcset='photo_w350.jpg 1x photo_w640.jpg 2x' src='phtot_w350.jpg' alt=''>
使用picture按需加载，需要写在HTML中，如果使用JS来调用，则无效
<picture>
<source srcset='baner_w1000.jpg' media="(min-width:801px)"> # source 还有其它的优化属性，不过会有兼容问题: type='image/webp'
<source srcset='baner_w800.jpg' media="(max-width:800px)">
<img src='baner_w800.jpg' alt=''> # picture 必需有 img 标签，只有img标签才会触发onload事件; picture 与 source 都不触发 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 写为此值不会报错，也对浏览器友好
</picture>
监听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("//") < 0){
$img.attr("src", $img.data("src"));
this.shownCount++;
}
}
init(){
//初始化
var leftSpace = 0;
this.showImage(leftSpace);
//滑动
$window.on("scroll", this, this.throttleShow);
}
ensureImgSrc($container){
//如果全部显示，off掉window.scroll
if(this.shownCount >= this.allCount){
$window.off("scroll", this.throttleShow);
}
}
指定图片尺寸，避免 reflow
作用
第一个是把200变成304，避免资源重新传输，
第二个是让浏览器直接从缓存取，连http请求都不用了，这样对于第二次访问页面是极为有利的。
开启压缩 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;
}
此方法会在返回的请求响应头中添加 Cache-Control: max-age=604800 ， 且 max-age 的优先级会大于 last-modified
开启 nginx last-modified 字段，在响应头中： last-modified 字段接收nginx的数据，在请求头中： If-Modified-Since 字段返回给nginx
这个办法得查手册
使用etag，在响应头中是： Etag 字段 ，在请求头中会记录在 If-None-Match 字段
server {
etag on;
}
DNS预读取
<link rel="dns-prefection" href="https://www.google.com"> # 在Head标签中添加相应的域名，由于它是并行的，不会堵塞页面渲染
HTML优化
删除注释、缩进，除了 pre 或 code 这样的标签不能删除，其它的都可以
代码优化
例如说html别嵌套太多层，否则加重页面layout的压力
CSS的选择器别写太复杂，不然匹配的计算量会比较大
JS的滥用闭包，闭包会加深作用域链，加长变量查找的时间
代替图片 或 LocalStorage、 Offline Storage
*请认真填写需求信息，我们会在24小时内与您取得联系。
