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

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

============开始阶段=========
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

  1. xxxxx -》网站-》壳-》js -> controll.js -> view.js -》 model.js -《view.js 用户白屏时间 js堵塞
    a/b -> c/d pushstate 刷新页面 js -》 ajax
  2. xxxxx -》网站(前端代码长征 打包 送到后台去 直出) 内容吐出来(nodejs+swig) 大文件 先吐核心的 再通过bigpipe 往回打
  3. 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

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 115,491评论 24 450
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,742评论 2 19
  • 在腾讯上看到这样一条视频《女生公车上玩手机身旁大叔发飙:电磁波侵害了我的大脑》,看完之后我感慨万千。 关于电磁波到...
    唯妈养娃阅读 596评论 2 4
  • “星辰大法!” 当夏侯那蕴含着阴寒的声音,回荡在这巨殿之内时,所有人都是能够感觉到,一股无法形容的滔滔灵力,在此时...
    混沌天书阅读 122评论 0 0
  • 生活就像一个“变态”。它无时无刻不在挑逗着人类,潜出你内心的焦躁,让你变得崩溃。
    馨湘潭阅读 135评论 0 0

友情链接更多精彩内容