网站加载速度的优化（1）：优化前端页面

主要以减少dom本身大小、减少或延迟http请求、使用第三方cdn文件托管

一、chrome的Network panel

它记录发起请求的对象、HTTP 状态码、文档类型、文档大小、整个请求从发起到结束的时间。

1.1 Network 面板中5大模块

1.controller，控制 network 面板要启用和关闭的功能
2.filter，过滤出想要查看的请求（只过滤 name 列）
3.overview，各个请求从发起到响应到下载完成的时间信息
4.request table，每个请求的详细信息
5.summary，包含所有请求的总耗时、总的传输流量

1.2 Network 面板中request table

filter 筛选 Doc，为页面输出前逻辑处理
其他可以点击 all XHR JS CSS.... 进行过滤筛选

request table顶部Name（文件名） Status（状态） Type（类型） Initiator（调用者） Size（大小） Time（耗时） Waterfall（周期瀑布）

request table 中的 waterfall，显示了每个请求的处理时间

排队于91.33 ms
开始于332.84 ms

资源调度					耗时
排队中					241.51毫秒

连接开始					耗时
已停止					1.89毫秒

请求/响应				耗时
请求发送					89微秒
等待中（TTFB）			37.93毫秒
内容下载					38.48毫秒
						
						总耗时
						319.90毫秒

waterfall中蓝线和红线

蓝线表示 DOMContentLoaded 事件触发时间
红线表示 Load 事件触发时间

二、 js使用第三方cdn使用

CDN公共库是指将常用的JS库存放在CDN节点，以方便广大开发者直接调用。使用CDN公共库不仅可以为你节省流量，还能通过CDN加速，获得更快的访问速度。

BootCDN公共库：http://www.bootcdn.cn

360 前端静态资源库：http://libs.useso.com

七牛云存储 开放静态文件CDN：http://www.staticfile.org

又拍云JS库CDN服务：http://jscdn.upai.com

新浪云计算CDN公共库：http://lib.sinaApp.com

CDNJS：http://www.cdnjs.com

三、图片延迟加载和 大图片使用第三方cdn处理

产品页面中 产品列表使用jquery.lazyload.min.js

<img class="lazy" data-original="img/bmw_m1_hood.jpg"  />

<script>
	$("img.lazy").lazyload({
		// placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
	  	placeholder : "img/grey.gif",
	    
		// effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
	  	effect: "fadeIn",
	    
		// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
	  	threshold: 200,
	    
		// event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载
	  	event: 'click',
	    
		// container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
	  	container: $("#container"),
	    // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
	  	failurelimit : 10 // 图片排序混乱时
	});
</script>

大图片管理可以使用 七牛云的cdn存储

https://www.qiniu.com/products/qcdn

小图片（3k）可以使用 base64， 减少http请求（转化后记得比较和原图片的大小，自行取舍）

首页轮播大图 做延迟加载,以flexslider为例

$(function() {
	var sliderKey = 1;
	$('.flexslider').flexslider({
		directionNav: true,
		pauseOnAction: false,
		itemWidth: 1100,
		before: function(obj) {
			var curObj = $(obj).find('li').eq(sliderKey);
			if ("" == curObj.attr("data-src")) {
				curObj.css("background", "url(" + curObj.attr("data-original") + ") 50% 0 no-repeat");
				curObj.attr("data-src", "1");
				sliderKey++
			}
		},
		start: function(obj) {
			var curObj = $(obj).find('li').eq(0);
			curObj.css("background", "url(" + curObj.attr("data-original") + ") 50% 0 no-repeat");
			curObj.attr("data-src", "1");
			curObj.find('img').eq(0).attr("src", "")
		}
	})
})

四、使用前端打包工具（webpack）打包，压缩js和css 资源

参考文章：10分钟搞定webpack打包

https://www.cnblogs.com/wanghuoya/p/9286431.html