一个准则：小！！！
遵守雅虎军规性能优化 --->小学课本
============开始阶段=========
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
- xxxxx -》网站-》壳-》js -> controll.js -> view.js -》 model.js -《view.js 用户白屏时间 js堵塞
a/b -> c/d pushstate 刷新页面 js -》 ajax - xxxxx -》网站(前端代码长征 打包 送到后台去 直出) 内容吐出来(nodejs+swig) 大文件 先吐核心的 再通过bigpipe 往回打
- controll.js #hash路由 真正的nodejs路由
16.model.js 转移到后端去了 数据直接打给swig
17.view.js 点击逻辑 全部靠view去实现 <a href="b.php">
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
性能优化领域 小字为先 网络第一 渲染第二 语言特性
网友评论