查看分析一下淘宝前端页面

前端页面写出来很简单，但是展现效果和页面优化上很重要却也很难，这里我们就来拿众人知道的电商平台淘宝来分析一下

在浏览器输入www.taobao.com,可以看到网页打开速度很快，整体给用户的感觉非常好，打开浏览器控制台分析一下各文件加载情况

网页文件加载时间分析

头部代码上分析代码

可以看出加载的文件也挺多的，但是加载很快，所用加载时间还是短，这里除了金钱的因素以外，我们具体分析一下他的代码写作方法。

淘宝pc源码

看左侧序号：

序号2：是html5的标准声明；

序号3：向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思；

序号5：表明该页面的字符编码规则为UTF-8，这里UTF-8最好大写，我看过一篇外国网友对这个的讨论https://stackoverflow.com/questions/10888929/should-html-meta-charset-be-lowercase-or-uppercase；

序号6：X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式

序号7：内核控制Meta标签，360浏览器就会在读取到这个标签后，立即切换对应的内核；

序号11：淘宝自定义的的属性；

序号12：淘宝自定义的的属性；

序号13：DNS 实现域名到IP的映射。通过域名访问站点，每次请求都要做DNS解析。目前每次DNS解析，通常在200ms以下。针对DNS解析耗时问题，一些浏览器通过DNS Prefetch 来提高访问的流畅性。 

什么是 DNS Prefetch ?DNS Prefetch 是一种DNS 预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。 目前支持 DNS Prefetch 的浏览器有 google chrome 和 firefox 3.5 

序号26：在ios系统中对icon有一套规范，就是在ios设备的图标统一为“四边圆角”、“高光处理”，至于“图标阴影”，是ios设备中统一为所有桌面元素增加的，所以不作为图标单独处理的样式，由于在视觉上统一最重要的是形状的统一，所以“圆角”是必须的，但是对于“高光”苹果没有做出特别的强调，所以苹果设置当中把“高光”作为可选项，就产生了apple-touch-icon 和 apple-touch-icon-precomposed属性。

序号28：下面style包裹着的样式就是整个页面的样式，这里是针对本页的单独样式，直接写在页面中而不是引用

序号31：页面中的链接都已新开空白页的方式打开

其他方面分析：

淘宝雪碧图

小图标采用雪碧图的方式，减少了请求次数

banner等大图都是采用的webp格式的图(在能保证质量的情况下缩减图片文件的大小)

不需要透明度的图片都用的jpg格式，其他的用的gif和png格式

css选择器大量选择clss选择器，相对来说效率是最好的

原因：选择器效率从高到低的排序列表:id选择器（#id）类选择器（.className）标签选择器（div,h1,p）相邻选择器（h1+p）子选择器（ul>li）后代选择器（lia）通配符选择器（*）属性选择器（a[rel="external"]）伪类选择器（a:hover,li:nth-child）决定选择器性能的几个点：首先选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间，所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器。但是想用更快的选择器之前，还要了解选择器的匹配机制，事实上，浏览器读取选择器时，不是按照我们的阅读习惯从左到右，而是遵循的从选择器的右边到左边进行读取的。那么最右侧的选择器对于性能就起着关键性的作用，它是最先开始查找的，如果最右侧是#id选择器那么性能就很高，如果是标签选择器那么性能就会大打折扣。1、class和id选择器性能最好，其他选择器我看网上说建议不要用虽然id选择器的性能最好，但是因为一个页面内不能出现相同的ID，所以也不可常用。那么最常用的应该就是class类选择器，但是遇到li、td、dd等经常大量连续出现的元素，应该采用class类选择器结合后代选择器进行选择，如.nav>li，而不是在每一个元素上引用class类。2、那么这样的话html文档就会有大量的带有class标签了页面中出现大量的class类是最麻烦的，不仅难以维护，而且复用性是最差的，最头疼的还时常因为选择器优先级问题导致定义的属性值失效，所以这种做法没有任何意义，既没有提高性能，也会造成很多麻烦。

图片懒加载+骨架屏的效果

懒加载就是板块出现在用户可视区域内加载图片；骨架屏就是图片还没加载出来之前先用灰色方块占位，提高用户体验