Hibop Yuan
Hibop Yuan
> 现在基本大部分工程都是用git做为版本控制。git是分布式版本控制系统。可以很方便的协调开发。本本总结不不会去从零开始说git，以及git常用命令，这些网上很多。 ## 1. 常用git代码托管平台 国外的有 - github【熟悉的八爪鱼】 - gitlab 【狐狸】 - Bitbucket 【桶】 - gerrit 【以前公司用，挺好用， 据说是大神搭建的，最近找到一篇[搭建指南](https://blog.csdn.net/tq08g2z/article/details/78627653)】 国内的 - 码云 - 马市 - CSDN Code ## 2. git免用户名和密码 使用git...
from: [https://auth0.com/blog/cookies-vs-tokens-definitive-guide/](https://auth0.com/blog/cookies-vs-tokens-definitive-guide/)要点翻译 ## Cookie cookie 验证是用于长时间用户验证，**cookie 验证是有状态的**，意味着验证记录或者会话需要一直在服务端和客户端保持。服务器需要保持对数据库活动会话的追踪，当在前端创建了一个 cookie，cookie 中包含了一个 session 标识符。传统 cookie 会话的验证流程： - 用户登录，输入账号密码 - 服务器验证用户账号密码正确，创建一个 session 存储在数据库（或者 redis） - 将 session ID 放进 cookie 中，被存储在用户浏览器中。 - 再次发起请求，服务器直接通过 session...
> Web业务日益复杂化和多元化，前端开发已经由以WebPage模式为主转变为以WebApp模式为主了。现在随便找个前端项目，都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。 如何进行高效的多人协作？ 如何保证项目的可维护性？ 如何提高项目的开发质量？ 如何组织代码模块化？ 如何打包部署？ 前端工程化主要应该从模块化、组件化、规范化、自动化四个方面来思考 **gulp**是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作 1. 构建工具 2. 自动化 3. 提高效率用 **webpack**是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案 1. 打包工具 2. 模块化识别 3. 编译模块代码方案用
> 有图有真相，先放一个图，熟悉的qi请求，熟悉的味道；  ## TTFB（Time to First Byte）：首字节时间 **首字节时间**是浏览器在接收数据之前需要等待多长时间。换句话说，这是等待初始响应的时间。这就是为什么它非常重要......为了让页面呈现，它需要接收必要的HTML数据。获得该数据所用的时间越长，显示页面所需的时间就越长。 waiting（TTFB）表征了一些事情： - 服务器响应时间 - 传输字节的时间（又名往返延迟） #### 服务器响应时间： 这是服务器生成响应并将其发回的时间。好消息是，如果这是瓶颈，那么你对它有更多的控制权。那么，假设你有权访问服务器。 坏消息是你有一些工作要做。你必须弄清楚你的系统的哪一部分需要时间来响应，这可能是很多事情。 根据Google的[PageSpeed Insights](https://developers.google.com/speed/docs/insights/Server)，您的服务器响应时间应该低于200ms。 如果响应比较慢，说明： - 数据库查询缓慢 - 慢逻辑 - 资源匮乏 - 太多缓慢的框架/库/依赖关系 -...
## React: UI框架 > react只是一个ui框架，关注view层 用脚本进行DOM操作的代价很昂贵。有个贴切的比喻，把DOM和JavaScript各自想象为一个岛屿，它们之间用收费桥梁连接，js每次访问DOM，都要途径这座桥，并交纳“过桥费”,访问DOM的次数越多，费用也就越高。 因此，推荐的做法是尽量减少过桥的次数，努力待在ECMAScript岛上。因为这个原因react的虚拟dom就显得难能可贵了，它创造了虚拟dom并且将它们储存起来，每当状态发生变化的时候就会创造新的虚拟节点和以前的进行对比，让变化的部分进行渲染。整个过程没有对dom进行获取和操作，只有一个渲染的过程，所以react说是一个ui框架。 > 组件化思想：关注业务相关性 react的一个组件很明显的由dom视图和state数据组成，两个部分泾渭分明。state是数据中心，它的状态决定着视图的状态。这时候发现似乎和我们一直推崇的MVC开发模式有点区别，没了Controller控制器，那用户交互怎么处理，数据变化谁来管理？然而这并不是react所要关心的事情，它只负责ui的渲染。与其他框架监听数据动态改变dom不同，react采用setState来控制视图的更新。setState会自动调用render函数，触发视图的重新渲染，如果仅仅只是state数据的变化而没有调用setState，并不会触发更新。 组件就是拥有独立功能的视图模块，许多小的组件组成一个大的组件，整个页面就是由一个个组件组合而成。它的好处是利于重复利用和维护。 > Diff算法 : 性能至上 react的diff算法用在什么地方呢？当组件更新的时候，react会创建一个新的虚拟dom树并且会和之前储存的dom树进行比较，这个比较多过程就用到了diff算法，所以组件初始化的时候是用不到的。react提出了一种假设，相同的节点具有类似的结构，而不同的节点具有不同的结构。在这种假设之上进行逐层的比较，如果发现对应的节点是不同的，那就直接删除旧的节点以及它所包含的所有子节点然后替换成新的节点。如果是相同的节点，则只进行属性的更改。 对于列表的diff算法稍有不同，因为列表通常具有相同的结构，在对列表节点进行删除，插入，排序的时候，单个节点的整体操作远比一个个对比一个个替换要好得多，所以在创建列表的时候需要设置key值，这样react才能分清谁是谁。当然不写key值也可以，但这样通常会报出警告，通知我们加上key值以提高react的性能。 ## React-Router路由 Router就是React的一个组件，它并不会被渲染，只是一个创建内部路由规则的配置对象，根据匹配的路由地址展现相应的组件。Route则对路由地址和组件进行绑定，Route具有嵌套功能，表示路由地址的包涵关系，这和组件之间的嵌套并没有直接联系。Route可以向绑定的组件传递7个属性：children，history，location，params，route，routeParams，routes，每个属性都包涵路由的相关的信息。比较常用的有children（以路由的包涵关系为区分的组件），location（包括地址，参数，地址切换方式，key值，hash值）。react-router提供Link标签，这只是对a标签的封装，值得注意的是，点击链接进行的跳转并不是默认的方式，react-router阻止了a标签的默认行为并用pushState进行hash值的转变。切换页面的过程是在点击Link标签或者后退前进按钮时，会先发生url地址的转变，Router监听到地址的改变根据Route的path属性匹配到对应的组件，将state值改成对应的组件并调用setState触发render函数重新渲染dom。 当页面比较多时，项目就会变得越来越大，尤其对于单页面应用来说，初次渲染的速度就会很慢，这时候就需要按需加载，只有切换到页面的时候才去加载对应的js文件。react配合webpack进行按需加载的方法很简单，Route的component改为getComponent，组件用require.ensure的方式获取，并在webpack中配置chunkFilename。 ```js const helpCenter = (location, cb) => { require.ensure([],...
- reactjs源码分析-上篇（首次渲染实现原理）[https://github.com/purplebamboo/blog/issues/2](https://github.com/purplebamboo/blog/issues/2) - reactjs源码分析-下篇（更新机制实现原理）[https://github.com/purplebamboo/blog/issues/3](https://github.com/purplebamboo/blog/issues/3) - (翻译)使用200行代码创建属于你自己的精简版angular [https://github.com/purplebamboo/blog/issues/1](https://github.com/purplebamboo/blog/issues/1)
#### 在svg中添加交互 [https://www.ibm.com/developerworks/cn/xml/x-svgint/](https://www.ibm.com/developerworks/cn/xml/x-svgint/) #### 基于 HTML5 Canvas 实现用户交互 [https://juejin.im/entry/5926442f2f301e0057b9241a](https://juejin.im/entry/5926442f2f301e0057b9241a) #### 《每周一点canvas动画》——用户交互 [https://segmentfault.com/a/1190000004882447](https://segmentfault.com/a/1190000004882447)
> 先从简单的开始吧——— ### 1. ng-if 跟 ng-show/hide 的区别有哪些？ 第一点区别是，ng-if 在后面表达式为 true 的时候才创建这个 dom 节点，ng-show 是初始时就创建了，用 display:block 和 display:none 来控制显示和不显示。 第二点区别是，ng-if 会（隐式地）产生新作用域，ng-switch 、 ng-include 等会动态创建一块界面的也是如此。 这样会导致，在 ng-if 中用基本变量绑定 ng-model，并在外层 div 中把此...
- 淘宝前端团队（FED）: [http://taobaofed.org/](http://taobaofed.org/) - 淘宝 Node地下铁：node技术沙龙 - 阿里 alinode： - 腾讯 AlloyTeam: - 腾讯 CDC - 腾讯 FERD - 腾讯 TGideas - 腾讯 ISUX - 百度（FEX）:[http://fex.baidu.com/](http://fex.baidu.com/) - 百度（EFE）: - 百度（EUX）...
#### 1. 浏览器的回流与重绘 (Reflow & Repaint) [https://juejin.im/post/5a9923e9518825558251c96a](https://juejin.im/post/5a9923e9518825558251c96a)