学习记录：前端

网站

HTML5
CSS3
ECMAScript 5 、6
Promise
Generators
LESS
React
React Router
Redux
Antd
MockJS
DvaJS
UmiJS

优化

首页加载速度

优化项目

在现有框架基础上，不改变框架结构，从纯前端角度加快首页加载速度，减少用户等待时的白屏时间，提升用户体验。
优化思路
采用 localStorage 缓存，在页面加载时，要改动两个内容：
首先判断当前 JS 文件是否有更新，根据 document.scripts 可以拿到页面中所有\标签的内容，将文件名和缓存中的对比来判断是否更新了 JS 文件，如果有更新就不使用缓存，需要重新加载数据。如果是更新了的文件，还需要再将新的文件名缓存下来，下次再进入这个页面时用于判断。
在请求首页数据之前，从 localStorage 中获取当前页面的数据缓存，把缓存设置到 modal 中，之后按照原本的逻辑请求数据

代码举例

在原本进页面后，准备加载数据时增加如下代码：

// 首先获取全部 script 标签
let scrips = document.scripts;
// 获取缓存中的当前文件所在 JS 文件名
let cacheUrl = util.lsGet('NewMyCust','homeDataUrl');
// 遍历 script 标签
for(let si=0;si<scrips.length;si++){
	let ssrc = scrips[si].src;
	// 判断 script 标签的 src，排除 baidu 和 common 的 js 文件
	if(ssrc.indexOf("baidu")<0 && ssrc.indexOf("common")<0 ){
	// 如果当前 js 文件的文件名和缓存中的一样，就从缓存里获取数据，直接渲染
		if(cacheUrl == ssrc){
		// 先从 localStorage 里取数据
		let homeData = util.lsGet('NewMyCust','homeData');
		// 如果 homeData 有值，先覆盖 home
			if(homeData){
				this.props.dispatch({
					type:'home/commonSetState',
					param:homeData
				})
			}
		} else {
			// 如果缓存中的文件名和当前 JS 文件名不一样，把当前文件名缓存
			util.lsSet('NewMyCust','homeDataUrl',ssrc);
		}
	}
}