网站加载速度的优化（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

大图片管理可以使用 七牛云的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