优点：无额外请求
缺点：不可缓存、兼容性差、代码冗余、可读性差、维护不便、CPU内存耗损大
适合：体积小复用率低的背景装饰图标
新版首页一共有 70 个图片资源，其中有 49 个是纯色图标，16 个是低色位非纯色图，5 个是高色位图。
49 个纯色图标全部使用了 Iconfont 方法处理，13 个低色位非纯色图使用了合并方法，一共有 62 个图片做了减少额外请求处理，最终图片资源请求数一共只有 14 个，其中纯色图的请求数占 2 个，低色位非纯色图请求数占 6 个， 图片总请求数减少了 80% ，图片合并和 Iconfont 的额外请求处理率分别达到了 56% 和 96%
可以看到 Iconfont 的额外请求处理率相当出色，因为适合应用他的对象特点比较简单，而图片合并会受到合并图片的格式、资源分布、模块分布等情况影响，其额外请求处理率会相对低于 Iconfont。
我们可以得到一个优化图片额外请求的小结论： 纯色图标优先考虑 Iconfont，低色位非纯色图片根据项目实际需要来做合并优化，Base64非特殊图片不使用
资源按需加载新版首页需要加载的图片资源一共有 14个，其中首屏的图片资源有 8 个，可见图片有 5 个，如果不作处理，那么首屏图片资源的利用率只有 35%
如果进行资源按需加载，在非首屏的图片资源实行懒加载，将轮播图不可见的两张图片做触发加载处理，这样首屏的加载图片资源只有 8 个，首屏图片资源利用率则可达到 60%，提高了 70% 的图片资源利用率， 资源按需加载不失为一种避免资源浪费的最挂实践方法
占位提示图提高加载体验
图片加载的时间长短由很多因素决定，如服务器响应时间、用户所用网络带宽、图片大小等，但无论是哪一种情况，总有一个等待的过程，在这过程总会有一个空白时间，特别是占屏面积比较大的首屏轮播大图和采取懒加载的图片，即使图片空白时间很短，用户也会有不同程度的感知，会给用户带来一种唐突或漫长等待的感觉，如果加载过程给图片加上体积比较小的占位提示图，则会让用户有一个图片加载预知，当图片加载完成后再呈现给用户看，这样用户在图片加载过程中看到的都是完整的图片
当图片加载失败的时候，展示占位图，避免系统默认的图片加载失败图标出现
渐进增强优化
渐进增强是指从最基本的功能出发，在保证系统在任何环境中的可用性基础上，逐步增加功能，提高用户体验，
动画性能渐进增强
出现在页面比较重要位置的模块，如轮播图、导航等，如果需要做动画效果的话，在高低端浏览器上都应该能统一实现出来，新旧版首页首屏都以轮播图为主，轮播图切换都使用了渐隐渐现的动画效果。
旧版的动画实现在高低端浏览器都使用了 JQ 第三方动画库
... .. //banner$(".banner-slider").slide({mainCell:".bd ul",effect:"fold",autoPlay:true,interTime:4000,delayTime:1000});$(".box-slider").slide({mainCell: ".bd ul", effect: "left", autoPlay: true, interTime: 5000, scroll: 6, vis: 6});... 其实渐隐渐现的效果 CSS3 动画也能实现。新版首页的轮播图动画设置了 CSS3 动画后，再利用脚本控制样变化以触发 CSS3 动画，这样支持动画属性的浏览器就能以 CSS3 动画实现效果，而不支持的浏览器则通过脚本的属性判断，用 JQ 动画实现：
.fc_item{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; filter: alpha(opacity=0); opacity: 0; background: #fff; @include trst(opacity 0.8s linear);}
// 轮播图切换function imgChange(opt){ ... // 如果支持 transform 属性，使用CSS3动画 if(supports('transform')){ $imgList.eq(opt).addClass('active').css('opacity','1').siblings().removeClass('active').css('opacity','0'); }else{ // 如果不支持 transform 属性，使用JQ动画 $imgList.eq(opt).stop().animate({ 'opacity': '1' },800).addClass('active').siblings().stop().animate({ 'opacity': '0' },800).removeClass('active'); } ...}...
JQ 动画虽然兼容性好，但其动画性能远远不及 CSS3 动画， 因此我们可以用以下的方法对动画性能实现渐进增强：高端浏览器可以通过触发 CSS3 动画实现效果，低端浏览器则使用 JQ 动画实现。
视觉渐进增强
视觉渐进增强通常可以通过 CSS3 属性和增加 CSS3 动画来实现，现主流的网站基本都会对视觉做渐进增强处理。本次首页改版主要在多态元素、切换元素上做了处理
支持 CSS3 动画的 SexyGuy
不支持 CSS3 动画的 PoorGuy
Tab 键锚点聚焦优化
浏览页面的时候，通过 Tab 键可以聚焦页面上的链接锚点，这时候浏览器会在锚点增加一个系统默认边框样式告诉用户锚点已选中，按 Enter 就可以打开选中的锚点，如 Chrome 浏览器上 google 首页的语音搜索按钮：
即使用户在浏览页面的时候鼠标突然失灵了也可以通过键盘操作继续完成浏览网页，这样的设计显然是为了增强页面的可用性。
但很多时候，在一些重要位置的内容，如全站的导航，产品经理或视觉设计师会要求将这个系统的样式去掉，于是很多同学可能会选择设置 outline:none 去掉边框样式，有些甚至会在全局 a 标签上设置，如旧版的京东云首页：
outline:none 设置之后，页面上的所有链接虽然能通过 Tab 键聚焦，但链接并没有被选中的样式，没有办法直观辨出选中的链接
虽然并非所有用户都会用到 Tab 键，但还是会有少数用户会用到，如键盘党，而这种降低可用性的体验存在表明页面并没有健全，因此并不建议去掉 outline 样式。
如果真的有去掉 outline 样式的需求怎么办？其实，页面链接一般都会被设计为多态的，利用链接的多态样式，为链接加上 :focus 伪类选中样式，Tab 选中链接后就会展示 :focus 伪类样式了，如新版首页的导航：
可以为链接加上 :focus 伪类样式
.mod_hd_nav_sub_col{ ... a{ color: #fff; text-decoration: none; outline: none; &:hover,&:focus{ color: #ffe400; text-decoration: none; } } ...} 当选中链接还绑定有事件的时候，也应该为之绑定相应事件
...$navBox.on({ 'mouseenter': function () { ... }, 'focus': function(){ $(this).trigger('mouseenter'); // Tab 操作支持 }, 'mouseleave': function () { ... }, 'blur': function(){ $(this).trigger('mouseleave'); // Tab 操作支持 }}, '.mod_hd_nav_item');... 处理完，虽然 outline 样式去掉了，但依然可以用 Tab 键完成链接的选中
静态资源更新发布
旧版首页所有的静态资源的更新发布方式都是采用覆盖式更新：
... ...
覆盖式更新发布有机会遇到缓存问题以及在发布的时候导致页面错乱问题，详情可以看一下张云龙前辈在知乎对问题『 大公司里怎样开发和部署前端代码？ 』的回答，解决覆盖式更新产生的问题，现主流方法就是使用 MD5 文件名进行非覆盖式发布，京东云新版首页所有的静态资源的更新发布都采用了这种方式。
... ...
OK，优化永远说不完的，以上所说的只是前端优化的冰山一角，业界绝不缺高大上的优秀优化方案，但从业务实际规模出发的话，这些小优化在本次改版中已得到很明显的收益，期待以后有更具规模的项目可以挥霍高大上的优化方案，最后把新旧版的页面都放到预览服务器上了
查看更多关于前端优化实践总结_html/css_WEB-ITnose的详细内容...