前端首页白屏问题

之所以写这篇文章，主要是最近有在面试中经常会被人问道这个方向，作为一个资深前端，这个是必须了解的。但是我技术一般，所以还是需要了解一下，总结一下原因和解决方案。

白屏原因

1-在弱网络下(2G网路或者GPRS网络) ,网络延迟，JS加载延迟 ,会阻塞页面

2-客户端存在bug，缓存模块错乱，不缓存js等后来挂起的文件，以及乱缓存index.html

---

统计白屏数量：

监听某个主DIV的变化（因为是单页面的应用，所以总会有个入口DIV来监听），白屏即是该DIV没有在规定时间内被放入东西，所以只要在规定时间内该DIV没有变化，那就可以进行白屏统计了。

---

现象：

1-首页直出时间过长

2-依赖js没加载完全

3-文件依赖关系表map.js加载不正确

4-接口调用时间过长

---

解决方案：

（1） 如果是基于 Cake[3] 工具开发的，也可以直接用首屏填充伪标签。

（2） 尽量同步输出，异步输出请尽量 mock 出现在首屏的模板。

（3） 需要使用nodejs直出了，通过在服务端增加一个nodejs中间层，由nginx将前端的请求转发到nodejs上，nodejs响应请求，加载资源，向底层的cgi进行API请求，之后进行拼接，返回html页面，这样资源跟api的请求时间都在服务端完成，缩短了时间，至于模板之类的，还是能够用到前端。当然nodejs也会有请求资源错误的情况，这个时候就需要返回错误标志给前端，前端再发起原来的异步请求，这种方式相当于一种容灾保障。

（4）因为是应用方式，所以总是难免存在一些基础依赖，比如modjs，backbone, underscore, jquery等，这种一般都会通过打包成一个js来减少http请求以及文件大小。针对这种情况，只能通过打包模式，加载资源的模式进行改进。强烈按照“首页必须”进行开发，按需加载，其他的资源可以放在二屏，毕竟首页决定着是否还会继续使用。

（5） 尽量减少文件夹的嵌套，文件名不要过长
接口调用时间过长也会导致单页面应用的加载时间过长，这种我们主要是前端需要给接口设置timeout

（6）可订制的客户端，也可以仿照（manifest/appcache，不完善不适合）做一个缓存机制，即是判断服务器版本是否与客户端保存的资源一致，不一致即下载新的，一致即直接使用本地的，这样就变成一个类本地应用了。
注意：fis的mod.js和map.js的坑