Articles
Articles copied to clipboard
pfan123
经验文章
## 什么物理引擎？ 物理引擎是一个计算机程序，使用质量、速度、摩擦力和空气阻力等变量，模拟了一个近似真实的物理系统，为刚性物体赋予真实的物理效果，比如重力、旋转和碰撞等效果，让物体的行为表现的更加趋向真实。 > 百度百科，针对 [物理引擎](https://baike.baidu.com/item/%E7%89%A9%E7%90%86%E5%BC%95%E6%93%8E) 解释 物理引擎通常有两种常见类型：实时物理引擎和高精度物理引擎。高精度物理引擎需要更多的处理能力来计算非常精确的物理，通常使用在科学研究（计算物理学）和动画电影制作。实时物理引擎常用于电子游戏并且简化了算法，降低精确度以减少处理时间，使得在游戏中有更好的处理速度。 ## 物理引擎在游戏中的应用 在前端开发领域，物理引擎是比较小众的话题，通常作为游戏开发引擎附属工具出现。物理引擎仿真在计算机的虚拟世界中模拟物体在真实世界的表现（动力学仿真最为常见），让画面中物体的运动表现更符合玩家对现实世界的认知，比如在《愤怒的小鸟》游戏中被弹弓发射出去小鸟或是因为被撞击而坍塌的物体堆。  物理引擎可以帮助开发者更快速地实现诸如碰撞反弹、摩擦力、单摆、弹簧、布料等等不同类型的仿真效果。物理引擎通常并不需要处理和画面渲染相关的事务，而只需要完成计算仿真的部分就可以了。Matter.js 提供了基于 canvas2D API 的渲染引擎，可以结合 p2.js 与 CreateJS 或 Egret 渲染引擎使用。 > 游戏引擎和物理引擎的联合使用并没有想象中那么复杂，实际上只需要完成不同引擎之间的坐标系映射就可以了。  ## Matter.js 介绍 [Matter.js...
# 01 引言 随着前端系统的越发复杂，前端的性能也受到越来越多的重视。Google也不断在推进新的性能相关指标，从原先的Performance API中的指标逐步演进成用户性能体验相关的指标。  对于用户而言，First Paint、First Meaningful Paint和TTI这几个指标可以直接影响到用户体验。关于前端性能优化有非常多的最佳实践可以参考，这篇文章会重点介绍前端渲染的方案及其优劣。 # 02 CSR vs SSR **CSR：Client Side Rendering**  浏览器(Client)渲染顾名思义就是所有的页面渲染、逻辑处理、页面路由、接口请求均是在浏览器中发生。其实，现代主流的前端框架均是这种渲染方式，这种渲染方式的好处在于实现了前后端架构分离，利于前后端职责分离，并且能够首次渲染迅速有效减少白屏时间。同时，CSR可以通过在打包编译阶段进行预渲染或者骨架屏生成，可以进一步提升首次渲染的用户体验。 但是由于和服务端会有多次交互（获取静态资源、获取数据），同时依赖浏览器进行渲染，在移动设备尤其是低配设备上，首屏时间和完全可交互时间是比较长的。 **SSR：Server Side Rendering**  服务端渲染则是在服务端完成页面的渲染，在服务端完成页面模板、数据填充、页面渲染，然后将完整的HTML内容返回给到浏览器。由于所有的渲染工作都在服务端完成，因此网站的首屏时间和TTI都会表现比较好。 但是，渲染需要在服务端完成，并不能很好进行前后端职责分离，而且白屏时间也会比较长，同时，对于服务端的负载要求也会比较高。 **基于Hydration的SSR和CSR融合**  SSR和CSR均有各自的优点和缺点，因此，业界提出前后端渲染同构的方案来整合SSR和CSR。...
来源： https://tech.meituan.com/2015/02/26/serialization-vs-deserialization.html ## 摘要 序列化和反序列化几乎是工程师们每天都要面对的事情，但是要精确掌握这两个概念并不容易：一方面，它们往往作为框架的一部分出现而湮没在框架之中；另一方面，它们会以其他更容易理解的概念出现，例如加密、持久化。然而，序列化和反序列化的选型却是系统设计或重构一个重要的环节，在分布式、大数据量系统设计里面更为显著。恰当的序列化协议不仅可以提高系统的通用性、强健性、安全性、优化系统性能，而且会让系统更加易于调试、便于扩展。本文从多个角度去分析和讲解“序列化和反序列化”，并对比了当前流行的几种序列化协议，期望对读者做序列化选型有所帮助。 ## 简介 文章作者服务于美团推荐与个性化组，该组致力于为美团用户提供每天billion级别的高质量个性化推荐以及排序服务。从Terabyte级别的用户行为数据，到Gigabyte级别的Deal/Poi数据；从对实时性要求毫秒以内的用户实时地理位置数据，到定期后台job数据，推荐与重排序系统需要多种类型的数据服务。推荐与重排序系统客户包括各种内部服务、美团客户端、美团网站。为了提供高质量的数据服务，为了实现与上下游各系统进行良好的对接，序列化和反序列化的选型往往是我们做系统设计的一个重要考虑因素。 本文内容按如下方式组织： - 第一部分给出了序列化和反序列化的定义，以及其在通讯协议中所处的位置。 - 第二部分从使用者的角度探讨了序列化协议的一些特性。 - 第三部分描述在具体的实施过程中典型的序列化组件，并与数据库组建进行了类比。 - 第四部分分别讲解了目前常见的几种序列化协议的特性，应用场景，并对相关组件进行举例。 - 最后一部分，基于各种协议的特性，以及相关benchmark数据，给出了作者的技术选型建议。 ## 一、定义以及相关概念 互联网的产生带来了机器间通讯的需求，而互联通讯的双方需要采用约定的协议，序列化和反序列化属于通讯协议的一部分。通讯协议往往采用分层模型，不同模型每层的功能定义以及颗粒度不同，例如：TCP/IP协议是一个四层协议，而OSI模型却是七层协议模型。在OSI七层协议模型中表示层（Presentation Layer）的主要功能是把应用层的对象转换成一段连续的二进制串，或者反过来，把二进制串转换成应用层的对象–这两个功能就是序列化和反序列化。一般而言，TCP/IP协议的应用层对应与OSI七层协议模型的应用层，展示层和会话层，所以序列化协议属于TCP/IP协议应用层的一部分。本文对序列化协议的讲解主要基于OSI七层协议模型。 - 序列化： 将数据结构或对象转换成二进制串的过程 - 反序列化：将在序列化过程中所生成的二进制串转换成数据结构或者对象的过程 ### 数据结构、对象与二进制串...
## lo ``` # loopback 本机主机地址 # flag=8049:网络设备状态标识 # UP:网卡处于启动状态 # LOOPBACK:IP数据包回送到本机上,通常用于测试网络配置和本地程序之间通信用 # RUNNING:代表网卡的网线被接上 # MULTICAS:网卡可以发送多播包 # mtu:最大传输单元(这里设置的16384是否以太网设置的？) lo0: flags=8049 mtu 16384 # 参数? 可以设置值 options=1203 # ipv4地址 127.0.0.1 子网掩码...
WebGL（Web图形库）是一个 JavaScript API，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点，该 API 可以在 HTML5 [``](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas)元素中使用。 这种一致性使 API 可以利用用户设备提供的硬件图形加速。 目前支持 WebGL 的浏览器有：[Firefox](https://developer.mozilla.org/zh-CN/Firefox) 4+, [Google Chrome](http://www.google.com/chrome/) 9+,...
## 一. protocol buffers 是什么？ Protocol buffers 是一种语言中立，平台无关，可扩展的序列化数据的格式，可用于通信协议，数据存储等。 Protocol buffers 在序列化数据方面，它是灵活的，高效的。相比于 XML 来说，Protocol buffers 更加小巧，更加快速，更加简单。一旦定义了要处理的数据的数据结构之后，就可以利用 Protocol buffers 的代码生成工具生成相关的代码。甚至可以在无需重新部署程序的情况下更新数据结构。只需使用 Protobuf 对数据结构进行一次描述，即可利用各种不同语言或从各种不同数据流中对你的结构化数据轻松读写。 **Protocol buffers 很适合做数据存储或 RPC 数据交换格式。可用于通讯协议、数据存储等领域的语言无关、平台无关、可扩展的序列化结构数据格式**。 ## 二. 为什么要发明 protocol buffers...
Blob 与 ArrayBuffer 早期 JS 一直没有比较好的可以直接处理二进制的方法。而 Blob 的存在，允许我们可以通过JS直接操作二进制数据。ArrayBuffer 是 Blob 数据格式的组成部分。 ## Blob **Blob(Binary Large Object)** 表示二进制类型的大对象。Blob 的概念在一些数据库中有使用到，如 MYSQL 中的 BLOB 类型就表示二进制数据的容器。在 JavaScript 中 Blob 类型的对象表示**不可变的类似文件对象**的原始数据，会存储在内存中。 File 接口基于 Blob ，继承了...
## git revert Git 的 revert 命令可以用来撤销提交（commit），对于常规的提交来说，revert 命令十分直观易用，相当于做一次被 revert 的提交的「反操作」并形成一个新的 commit，但是当你需要撤销一个合并（merge）的时候，事情就变得稍微复杂了一些。 ### Merge Commit 在描述 merge commit 之前，先来简短地描述一下常规的 commit。每当你做了一批操作（增加、修改、或删除）之后，你执行 `git commit` 便会得到一个常规的 Commit。执行 `git show ` 将会输出详细的增删情况。 Merge commit 则不是这样。每当你使用...
## 什么是UML？ 统一建模语言（UML）是一种通用的可视化建模语言，可以用来描述、可视化、构造和文档化软件密集型系统的各种工件。 UML是独立于过程的，它适用于各种软件开发方法、软件生命周期的各个阶段、各种应用领域以及各种开发工具。 > 注：UML不是一种程序设计语言，其描述的模型可以和各种编程语言相联系。 **UML的目标** 1.为建模者提供可用的、富有表达力的、可视化的建模语言，以开发和交换有意义的模型。 2.提供可扩展性和特殊化机制以延伸核心概念。 3.支持独立于编程语言和开发过程的规范。 4.为理解建模语言提供正式的基础。 5.推动面向对象建模工具市场的成长。 6.支持更高级的开发概念。 **UML的应用范围**  **UML的主要包括三种构造块：** （1）事物：构成模型图的一些基本图示符号，它们表示一些面向对象的基本概念；  （2）关系：是模型元素之间具体化的语义连接，负责联系UML的各类事物，构造出结构良好的UML模型； - 关联关系：描述不同类元的实例之间的连接。 - 依赖关系：描述一对模型元素之间的内在联系。 - 泛化关系：描述特殊到一般的一种归纳和分类关系。 - 实现关系：描述规格说明和其实现的元素之间的连接的一种关系。 （3）图：特定的视角对系统所作的抽象描述。 - 结构图：捕获事物与事物之间的静态关系，用来描述系统的静态结构模型。...
OmniGraffle 是 Mac 上的绘图利器，曾获2002年苹果设计奖。Graffle 在很多方面对标 Windows 系统上的 Microsoft Visio，是制作各种文档的绝妙工具。这篇文章作为 Graffle 系列教程的第二篇，会手把手带着大家做一个简单的流程图，希望诸位能在实践中理解软件的功能。 [whose.design - 发现更多设计工具www.whose.design](https://link.zhihu.com/?target=http%3A//www.whose.design) ## **相关下载：** - 软件下载：[OmniGroup 官方网址下载](https://link.zhihu.com/?target=https%3A//www.omnigroup.com/download/latest/omnigraffle/) - 教学材料：[百度网盘](https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1hrLnf60) ## **效果预览：**  上图简单的还原了当年赵瑞龙公子来吕城筹建赵家印钞机的流程。  ## **第一步，绘制流程图元素：**  首先需要了解流程图里都有哪些元素，各自的定义是什么。上图就是我在平时绘制流程图时常用的元素，大家可以做个参考。...