web资源优化之图片加载的时机
- - SegmentFault 最新的文章图片资源是 WEB项目中很重要的组成部分，也是交互设计中一个很重要的体现，往往一张图能胜过千言万语，所谓“一图胜白言”就是这个道理. 然后大量的图片也会给服务器带来很大的压力，据统计：图片内容已经占到了互联网内容总量的62%，也就是说超过一半的流量和时间都用来下载图片，那么问题就来了. 如何最大化优化图片资源，图片优化的手段有那些.
web资源优化之图片加载的时机
标签：
web
前端性能
图片处理
| 发表时间：2014-12-19 16:04 | 作者：两仪
出处：http://segmentfault.com/blogs
前言
图片资源是 WEB项目中很重要的组成部分，也是交互设计中一个很重要的体现，往往一张图能胜过千言万语，所谓“一图胜白言”就是这个道理。然后大量的图片也会给服务器带来很大的压力，据统计：图片内容已经占到了互联网内容总量的62%，也就是说超过一半的流量和时间都用来下载图片，那么问题就来了。如何最大化优化图片资源，图片优化的手段有那些？本章就首先谈谈通过图片的加载时机来优化WEB性能。
即时加载机制
即时加载是最常见的加载方式了，我们一般都是通过给 img标签指定具体的src值，那么等页面渲染的时候，遇到该标签的话，就会下载该指定的URL图片，并且渲染出来。常用的形式如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="http://img.wallpapersking.com/Big7/1440900/2008320/22220017.jpg" alt=""/>
<img src="http://img.wallpapersking.com/Big7/1440900/2008320/22220017.jpg" alt=""/>
<img src="http://www.kpbz.net/uploads/allimg/091103/1233HD334-7.jpg" alt=""/>
<img src="http://pic3.bbzhi.com/xitongbizhi/gaoduibidujingmeigaoqingkuan/computer_kuan_193023_18.jpg" alt=""/>
</body>
</html>
如果在现代浏览器运行上面的代码你会发现以下几点：
- 大部分浏览器都会并发下载图片，图片的下载没有阻塞。
-
src的值如果相同，也只会下载一次，也就是说相同的图片，不会多次下载。 - 图片的下载和渲染会阻塞整个页面的渲染。
- 图片越大，下载的时间也就越长。
通过上面的几点的阐述，我们可以即时加载的机制运用的场景是：图片量少，页面少于3屏比较适合这种技术，向一般的企业宣传网站比较适合采取这种选型。
预先加载机制
预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。
和上面介绍的一样，预先加载的原理是预知用户将发生行为，提前加载后用户所需的图片。还不够理解嘛，那假设你是一个爱好动漫的动漫迷，那也应该经常看相应的漫画吧。以下面的漫画为例。
一般，一页的漫画有好几屏，等页面把漫画加载好了，我们就慢慢地品味、鉴赏漫画，慢慢底往下拉动滚动条，看完了当前页，我们按下链接跳到下一页面，重复如此。
我们有没有想过这样的问题：当当前页面加载好了的时候，我们慢慢欣赏漫画的这段时间，能不能用来加载后一页或者两页的漫画呢。当我们看完当前页，进入下一页的时候，由于前面已经加载完毕，页面瞬间加载完毕，这种赶紧，是不是很爽呢。这就运用到了前面前面所说的预先加载技术。
对于预先加载技术的实现，大家可以参考下面帮助文档中第一个链接来根据自己运用的场景来实现。
延迟加载机制
图片延迟加载也称懒加载，通常应用于图片比较多的网页，如果一个页面图片比较多，且页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片，当页面滚动的时候，图片进入了可视区域再进行加载，这样可以显著的提高页面的加载速度，更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留，还可以节省流量。如果TAB中的图片较多，也同样可以应用于TAB中，当触发TAB时再进行图片的加载。
图片延迟加载的原理：页面初次加载时获取图片在页面中的位置并缓存(每次取offset的值会引发页面的reflow)，计算出可视区域，当图片的位置出现在可视区域中，将src的值替换成真实的地址，此时图片就开始加载了。
当页面滚动的时候，再判断图片已经缓存的位置值是否出现在可视区域内，进行替换src加载。当所有的图片都加载完之后，将相应的触发事件卸载，避免重复操作引起的内存泄漏。将整个窗口看成是一个大容器，那么也可以在页面中设置一个小容器，在小容器中也同样可以实现图片的延迟加载。
像淘宝、天猫等电商就大量采用了该技术，因为对它们来说，要展示的图片太多了，即时加载又非常耗时间，而且用户不一定会看完所有的图片。采用延迟的加载基本上就能解决图片过多的问题。
延迟加载的机制实现可以参考 雨夜带刀《图片延迟加载的实现》的文章。如果你使用Jquery的话，它有一个插件也是来解决这方面的问题，github地址为： https://github.com/tuupola/jquery_lazyload/，就本人感觉而言，使用非常简单，文档详细，所以极力推荐给大家用。
PS:由于本文只对核心原理做介绍，并不会过多涉及到代码设计这块。
帮助文档
相关 [web 资源 优化] 推荐：
Web前端优化
- - JavaScript - Web前端 - ITeye博客优点：直接使用浏览器内存的缓存数据，减少网站后台压力，用户体验（速度）好. 缺点：对于时时变化的动态页面，这种情况就不能容忍了，因为每次访问的都是第一次访问的内容，这样即使所请求的页面已经变化了，用户也不可能知道，所以此场景必须要消除这种缓存的影响. 延迟加载，将资源延迟到需要的时候的加载，例如detail页面，相关产品推荐，当用户浏览更多的信息往下拉动滚动时，才进行加载，异步加载可以大幅减少对后端资源的使用，在需要的时候加载，是资源合理使用常用的方式，但是也带来一个问题，当往下拉才去加载，如果性能不够好，用户的体验其实是不好的，“菊花”转动的时间会比较长，同时异步加载对前端性能的作用也是非常明显的，渲染的节点数量大幅减少.
Web性能优化
- - SegmentFault 最新的文章Web网站的性能细线在几个方面：. 通过分析浏览器的渲染原理、资源对渲染的影响，得出优化网站性能的办法. Chrome的 Timeline面板录制网页加载的过程，分析记录浏览器渲染过程中每个过程的耗时. 关闭Chrome扩展或者启用隐身模式. 根据使用场景，模拟真实的网络加载情况：. 2.2 Timeline工具的各个组成.
WEB优化Favicon请求
- - ITeye博客总是被命名为favicon.ico. 我们常常看到这样的一个请求/favicon.ico. 它总是显示在浏览器地址栏,网址的左边. 当访问一个页面的时候，不管怎么样，浏览器都会请求这个文件，即/favicon.ico. 可以通过在页面的部分加入元素来重新指定它的位置. ico格式可以是不同分辨率的图像，比如16×16, 32×32等.
Web性能优化：prefetch, prerender
- - Harttle Land本文从预加载的角度介绍如何优化页面载入和渲染的性能，在展开内容之前先了解一下浏览器显示页面的过程：
首先是DNS解析，然后建立TCP连接，接着下载HTML内容以及资源文件，最后才是整个页面的渲染. 图片来源： https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o/present?slide=id.gc03305a_0106.
Web性能优化之图片优化
- - 极客521 | 极客521HTTP Archieve有个统计，图片内容已经占到了互联网内容总量的62%，也就是说超过一半的流量和时间都用来下载图片. 从性能优化的角度看，图片也绝对是优化的热点和重点之一，Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段，本文覆盖了Web图片优化的方方面面，从基本的图片格式选择、到尚未被广泛支持的响应式图片均有所提及.
最好的开源Web开发资源
- 陈晖 - Solidot51开源社区 写道 "B2bweb.fr对“开源中最好的Web开发的资源（中文）进行了汇总.
一堆开源的Web开发资源
- - 可咔酷 | 网络杂货铺一堆的Web相关的开源资料，涵盖HTML、JS、PHP、服务器等方面的资料，而且都是开源的，收集起来，方便以后学习使用. 学习HTML 5编程和设计. HTML5 Rocks : Major Feature Groups 的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码. HTML5 Dashboard – Mozilla，效果很炫.
Web前端优化最佳实践
- Jimmy - 中文热文榜|最新还有 Jason, Bixuan, 曦, 推荐，查看全部 8 个推荐. 博评 - Sting的网经发表于2010-08-08 08:41:10. Google的前端优化最佳实践
Yahoo的前端优化最佳实践. Web前端优化最佳实践之Content篇. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests).
web前端性能优化进阶路
- - 阿里巴巴（中国站）用户体验设计部博客Web前端性能优化WPO，相信大多数前端同学都不会陌生，在各自所负责的站点页面中，也都会或多或少的有过一定的技术实践. 可以说，这个领域并不缺乏成熟技术理论和技术牛人：例如Yahoo的web站点性能优化 黄金法则，以及大名鼎鼎的优化大师 Steve Souders. 本文并非一篇讨论性能优化技术方法的文章，而更多的是对中文站 搜索List页面持续两年多的前端性能优化实践的 思路总结.