宝丁
- [ ] IUStudioMock的完成 - [ ] go语言实现一个webserver - [ ] preact的原理解析(熟悉那一套基础流程) - [ ] vue1.x版本的源码
[参考资料](http://www.cnblogs.com/lyzg/p/5125934.html) ## 强缓存和协商缓存 **强缓存**： 浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中了，浏览器直接从它自己的缓存中读取资源，不会发送请求到服务器上。假设有某个css文件，浏览器在加载它所在的页面中时，如果css文件的缓存配置命中了强缓存，那么浏览器就直接从缓存中加载这个css文件，连请求都不会发送到网页所在服务器 **协商缓存**：当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端一句资源的一些http header验证这个资源是否命中协商缓存，如果命中，则会返回这个请求，但是不会携带数据，而是会告诉客户端去缓存中加载这个资源 **强缓存和协商缓存的共同点：**如果命中了，都是从客户端缓存中加载资源，而不是从服务器中加载资源数据，强缓存不发请求到服务器，二协商缓存会发请求到服务器 **当协商缓存没有命中时，浏览器直接从服务器加载资源数据** ## 强缓存的原理 强缓存是利用Expires或者Cache-Control这两个http response header 实现的，都用来表示资源在客户端缓存的有效期，前者是利用绝对时间，后者是用相对时间来表示 expires 是一个具体的时间，Cache-Control里面的max-age为相对的秒数 expires因为设置的是绝对时间，所以需要保证服务器时间与客户端时间相差不大，如果相差较大，那么缓存管理容易出现问题 ## 协商缓存的原理 当浏览器某个资源的请求没有命中强缓存，就会发一个请求到服务器，验证协商缓存是否命中，如果协商缓存命中，请求响应返回的http状态为304并会显示一个`Not Modified`的字符串 协商缓存利用的原理是`Last-Modified与If-Modified-Since`和`ETag、If-None-Match`两队Header来管理 前者是通过修改时间来进行判断，后者是通过文件资源的内容来进行判断 ## 强缓存的管理 通常有2种方式来设置是否启用强缓存 * 通过代码的方式，在web服务器返回的响应中添加Expires和cache-control...
[链接](https://segmentfault.com/a/1190000006254212) [链接](https://segmentfault.com/a/1190000006100489) [链接](http://shenzm.cn/blog/message.14) React应用主要的性能在与多余的处理和组件的DOM对比。为了避免这些性能陷阱，你应该尽可能的在shouldComponentUpdate中返回false **加速shouldComponentUpdate的检查** **简化shouldComponentUpdate的检查** React应用的主要性能问题是什么？ * 组件中那些不更新DOM的冗余操作 * DOM比较那些无需更新的叶子结点 因为在JS中的对象是不相等的，因为会比较地址，所以这个时候，最初的想法是会在shouldComponentUpdate中进行深度对比来确保改变的正确跟踪，但是这个方法在性能上的花费是很大的，因为我们需要为每个model写不同的深度对比代码。 ``` //字符串很容易去实现 React.createClass({ propTypes: { value: React.PropTypes.string.isRequired }, shouldComponentUpdate: function(nextProps, nextState) { return this.props.value !== nextProps.value; }, render:...
Rx 的编程模型实际是基于 Observer pattern 和 Iterator pattern 这两种设计模式构建的。 基于 Observable 的模式， 和传统的 Observer pattern有两点本质的不同： Observable 只在至少有一个订阅者时，数据才开始流动 在数据流结束（iterator 不再hasNext）时，Observable会发出通知（onCompleted） Observables 作为被观察者，是一个值或事件的流集合；而 Observer 则作为观察者，根据 Observables 进行处理。 订阅：Observer 通过 Observable 提供的 subscribe() 方法订阅...
优点： * 利于SEO * 加速首屏的渲染 * 服务端和客户端可以共享某些代码，避免重复定义 React能做到服务端渲染，主要是因为你RecatDOM 服务端渲染的API为renderToString、renderToStaticMarkup 和render的区别在于他们返回的是一段HTML字符串 前者是把React元素专成了一个HTML字符串并在服务端标识reactid 后者少了大量的reactid renderToString 和 renderToStaticMarkup 可以在server端渲染你的components，其主要都是讲React Component 在Server 端转化成DOM String，也可以将props往下传，然而事件处理会失效，要到client-side的React接收到吼才会把它加上去（但要注意 server-side 和 client-side 的 checksum 要一致不然会出现错误），这样一来可以提高渲染速度和SEO效果，renderToString和renderToStaticMarkup最大的差异在于renderToStaticMarkup会少加一些React内部使用的DOM属性(eg:data-react-id)因此可以节省一些资源。 不过要注意的是如果有使用 Redux 在 Server...
[使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能](http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles) [页面优化](https://jdc.jd.com/archives/2806) ## 页面卡顿解决方案 [链接1](https://zhuanlan.zhihu.com/p/25166666?refer=dreawer) FPS 表示帧率 jank 因为refolw和repaint导致的大面积失帧 60fps是动画播放比较理想比较基础的要求，如果帧率小于60HZ那么就会觉得页面卡顿 渲染流程： > Javascript > Style > Layout > Paint > Composite JavaScript：JavaScript实现动画效果，DOM元素操作等。 Style（计算样式）：确定每个DOM元素应该应用什么CSS规则。 Layout（布局）：计算每个DOM元素在最终屏幕上显示的大小和位置。由于web页面的元素布局是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫reflow。 Paint（绘制）：在多个层上绘制DOM元素的的文字、颜色、图像、边框和阴影等。 Composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。 首先用js做逻辑处理，还触发了样式变化，style把应用的样式规则计算好之后，把影响到的页面元素重新布局，叫做Layout，再把它画到内存的一个画布里面，paint成了像素，最后把画布刷到屏幕上去，叫做Composite，形成一帧 > 可以通过Chrome控制台的timeline进行分析（勾选jsprofile...
## HTTPS的理解 HTTP协议传输的数据是未加密的，都是明文 SSL(Server Sockets Layer)协议用于对HTTP协议传输的数据进行加密，从而诞生了HTTPS 对SSL3.0的升级，出现了TLS(Transport layer security) **HTTPS的工作原理** 传输数据之前需要浏览器和服务端进行一次握手，在握手过程中将确定双方加密传输数据的password message 对称算法 > AES RC4 3DES 非对称算法 > RSA DSA/DSS HASH算法 > MD5 SHA1 SHA256 **过程** * 浏览器将自己支持的加密规则发送给网站 *...
[DOM](http://blog.jobbole.com/52430/) > DOM(文档对象模型)是针对HTML，XML文档的一个API，DOM描绘了一个层次化的节点树 ## DOM ``` Node---|--Document-------HTMLDocument | |--characterData---|----Text | |----Comment |--Element------HTMLElement---|--HTMLHeadElement | |--... | |--HTMLButtonElement |--Attr ``` ### Node类型 Javascript的所有节点类型都是继承来自Node类型，因此所有的节点类型都共享着相同的基本属性和方法 * nodeType 属性，表明节点的类型 * Node.ELEMENT_NODE(1) * Node.ATTRIBUTE_NODE(2) * Node.TEXT_NODE(3)...
## 基本概念 > AJAX(Asynchronous Javascript And XML)，是指一种创建交互式网页应用的网页开发技术,AJAX是一种用于创建快速动态网页的技术，AJAX = 异步 JavaScript + XML 可以在后台与服务器进行少量的数据交换，AJAX可以使网页实现异步刷新。这意味着不用重新加载整个页面的情况下，对网页的某部分进行更新 ## 建立Ajax的过程 Ajax 的核心是创建XMLHttpRequest对象 ``` // IE6以上 new XMLHttpRequest(); // IE6 new ActiveXObject("Microsoft.XMLHTTP") ``` ``` function createXHR()...
## 通过 background-image的方案解决 ``` // html Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac...