日常笔记

@(StuRep)2016.06.11

react+node同构和直出

服务端渲染出首屏，主要为了减少用户等待的时间，缩短白屏时间，在移动数据网络情况下能够获得较好的用户体验。

了解了一下react实现同构和直出的方案，收藏了一些还不错的文章：

文章1
文章2
文章3
文章4
文章5

Mock.js模拟cgi

和后端商量好数据格式，然后可以用mockjs拦截ajax请求并随机生成数据，在后端相关cgi没有开发完全的情况下可以模拟接口，提高开发效率。

函数式编程的几个特点

1. 函数是“第一等公民”
2. 只用表达式，不用语句
3. 没有“副作用”
4. 不修改状态
5. 引用透明

性能优化：

• gzip压缩
• 首屏加载内容不超过300kb
• 保证首次加载的文件请求数缩减到6个以下
• 非首屏所需的静态资源(JS/CSS)需设置延迟加载
• 静态资源需设置长缓存时间
• 保证图片文件最大化压缩
• 音频文件保存为MP3格式
• js的分片和按需加载

构建SPA应用：

参考

• 组件化
• 代码隔离
• 代码合并与加载策略
• 路由与状态的管理
• 缓存与本地存储
• 服务端通信
• 内存管理

• 样式的规划

  • 基准样式的分离
  • 组件样式的划分
  • 堆叠次序的管理

Chrome开发者工具使用

模拟各类网络及瀑布流时间工具

• 在Network里面可以设置模拟网络环境，包括GPRS流量、3G、4G、WIFI等；
• 打开Timeline然后勾选Screenshots再刷新页面，结束之后可以看到资源的加载时间、渲染时间等，还有一个瀑布图及对应的每个时间段的截图，可以清晰的看到各个时间段对应的页面情况。

Timeline在优化渲染时间的时候监控页面情况很有用。