前端架构与性能优化那些事

一个准则：小！！！
遵守雅虎军规性能优化 --->小学课本

============开始阶段=========
1.html要小 减少http请求文件大小 加载 html dom ready 可见可操作时间提前，减少dom元素，可以用:before或者after来减少div的数量
2.html css after before outset 阴影 渐变 模拟 dom 元素 1div 7div 压缩
3.css 动画 绘制 gpu参与
详细介绍请参照：
http://blog.csdn.net/zjjnwpu/article/details/56008466?fps=1&locationNum=7
http://www.jb51.net/css/348357.html
http://developer.51cto.com/art/201508/488053.htm

4.硬件加速 如何开启 transform: translate3d(-2600px, 0px, 0px); 让元素开启硬件加速 一层
5.减少css的体积 压缩工具 直接结束
6.减少js的体积 代码的执行时长 函数js用 benchmark 跑分
7.图片 png 无损压缩 webp no images时代 纯色系的话 css Symbol
webp的详细了解参考链接:https://www.zhihu.com/question/27201061

======以上的小儿科===============
8.移动端 网络昂贵的 请求的珍贵性 etag -> expires time
9.缓存 离线缓存的一些介质 localStorage 同步读取 5m 2.5m
if("a.js" = "xxx4546") {
localStorage
}
a.js a.xxx4546.js
a.xxx4546.js js代码内容..... 增量更新上线
10.任何的限制 js css 。。。更新资源的时候 弹个框 刷新 一旦缓存 更新不进去！！！
a f版本 PWA !!!!
11.异步的读取 50m nosql 关系型 localStorage扩容机制 postmessage
12.backbone.js mvc model.js 发送请求 view.js 绑定事件 controll.js 用户路由 业务逻辑 js

13. xxxxx -》网站-》壳-》js -> controll.js -> view.js -》 model.js -《view.js 用户白屏时间 js堵塞
    a/b -> c/d pushstate 刷新页面 js -》 ajax
14. xxxxx -》网站(前端代码长征 打包 送到后台去 直出) 内容吐出来(nodejs+swig) 大文件 先吐核心的 再通过bigpipe 往回打
15. controll.js #hash路由 真正的nodejs路由
    16.model.js 转移到后端去了 数据直接打给swig
    17.view.js 点击逻辑 全部靠view去实现
    18.nodejs项目 真正的业务逻辑 多页 jqeury.js
    19.views spa js CSS html 拼进去 ssr spa vue webapp 内部打开的话 加载局部的页面 全部刷新打开 整体加载页面
    2012技术 页面请求太珍贵了 4G WIFI spdy vue~ssr
    20.ssr 百度 不支持ajax seo heaers~~~ spa

=========算是入门阶段=========================
21.深 脑洞打开 /mobile/simple/static/common/pkg/common_sync_js_0_cb55e17.js
删掉 新建 全变？？ a.js b.js c.js d.js => common_sync_js_0_cb55e17 js-》diff 一小块
22.图片 + canvas 请求数据 手机 研究 深入埋点 a.gif?白屏时间=图对应的阶段& navigator.sendBeacon("a.php") ua
用户画像 最优解 机型 灰度上线 百度 AB 全量
23.图片 网速 img 波动性 ip -> 手机型号 网速 wise window._WISE_INFO 定制用户内容 降级 看 用！！
24.http请求 cdn 5个js 3个headers 压缩 轻
25.nodejs 性能 权衡集群情况 qps 27.7

=========合格的性能优化=========
1.k8s+docker
2.图形学的时候 性能超高 js语言+c

性能优化领域 小字为先 网络第一 渲染第二 语言特性