Open soulJF999 opened 3 years ago
setTimeOut是定义一个回调，并且希望这个回调在我们指定的时间间隔后第一时间去执行； setImmediate从意义上将是立即执行的意思，但是它实际上却是在一个固定的阶段后才执行，即poll阶段 在I/O的事件回调中，setImmediate方法的回调永远在setTimeout前
使用普通的子迭代选择器，效果可能是这样的 .container{ width: 1020px } .container > .row {} .container >.row a{}
在前后端分离的天然选择下，node中间层可以承担更多的责任 代理：在开发环境下，我们可以利用代理来解决最常见的跨域问题；在线上环境下，我们可以利用代理，转发请求到多个服务器。 缓存：node中间层可以直接处理一部分缓存需求 限流：node中间层，可以针对接口或者路由做响应的限流。
会导致回流的操作 页面首次渲染 浏览器窗口大小发生改变 元素尺寸或位置发生改变 元素内容变化（文字数量或图片大小等等） 元素字体大小变化 添加或删除可见的DOM元素 激活CSS伪类 查询某些属性或调用某些方法
页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、backgroundColor、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
现代浏览器会对频繁的回流或重绘操作进行优化： 浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值时，浏览器就会将队列清空，进行一次批处理，这样就可以把多次回流和重绘变成一次。 如何避免： CSS： 避免使用table布局； 尽可能在DOM树的最末端改变class 避免设置多层内联样式 将动画效果应用到position属性为absolute或fixed的元素上 避免使用css表达式，比如calc
javaScript 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性 避免频繁操作dom，创建一个documentFragment，在它上面应用所有dom操作，最后再把它添加到文档中。 也可以先为元素设置display:none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘 避免频繁读取会引起回流/重绘的属性，如果需要多次使用，就用一个变量缓存起来 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。
HTTP请求报文：请求行-HTTP头（通用信息头，请求头，实体头）-请求报文主体（只有POST才有报文主体） 请求行：POST HTTP头：HOST、Connection：keep-alive、Content-Length、Accept、Origin、Content-Type、User-Agent、Cookie、Accept-language、Accept-Encoding、 请求报文主体
通用信息头指的是请求和响应报文都支持的头域，分别为cache-control、connection、Date
浏览器每次发起请求，都会先在浏览器中缓存中查找该请求的结果以及缓存标识 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中
强制缓存就是向浏览器缓存查找该请求结果 不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求 存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存（携带该资源的缓存标识，发起http请求） 存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效
当浏览器向服务器发送请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是expires和cache-control，其中cache-control优先级比expires高
expires 其值是服务器返回该请求结果缓存的到期时间，即再次发起该请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果
cache-control：max-age:缓存将在xxx秒失效 no-store:所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存 private:所有内容只有客户端可以缓存，cache-control的默认取值 public:所有内容都将被缓存（客户端和代理服务器端都可缓存） no-cache:客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
由于cache-control的优先级比expires，那么根据Cache-control的值进行缓存，意思就是说在600s内再次发起该请求，则会直接使用缓存结果，强制缓存生效 在无法确认客户端的时间是否与服务端的时间同步的情况下，cache-control相比于expires是更好的选择，所以同时存在时，只有cache-control生效
内存缓存有两个特点：快速读取和时效性 （js和图片等文件解析执行后直接存入内存缓存中） 硬盘缓存：将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘做I/O操作（css文件会存入硬盘中）
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程 协商缓存生效，返回304 协商缓存失效，返回200（该资源更新了，重新返回请求结果，200）
同样，协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的，控制协商缓存的字段分别有：Last-Modified/If-Modified-Since和Etag/If-none-match Last-modified是服务器响应请求时，返回该资源文件在服务器最后被修改的时间 If-modified-since则是客户端再次发起该请求时，携带上次请求返回的Last-modified值，通过此字段告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求，发现请求头含有if-modified-since字段，则会根据if-modified-since的字段与该资源在服务器的最后被修改时间作对比，如果服务器最后被修改的时间大于它，则返回200，重新返回资源；否则返回304，代表资源无更新，可继续使用缓存文件
Etag是服务器响应请求时，返回当前资源文件的一个唯一标识（由服务器生成） if-none-match是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，通过此字段值告诉服务端该资源上次请求返回的唯一标识值。服务器收到该请求后，发现该请求头中含有if-none-match，则会根据if-none-match的字段值与该资源在服务器的Etag值作对比，一致则返回304，代表资源无更新，继续使用；不一致则重新返回资源文件，状态码为200
强缓存优先于协商缓存
setTimeOut是定义一个回调，并且希望这个回调在我们指定的时间间隔后第一时间去执行； setImmediate从意义上将是立即执行的意思，但是它实际上却是在一个固定的阶段后才执行，即poll阶段 在I/O的事件回调中，setImmediate方法的回调永远在setTimeout前
使用普通的子迭代选择器，效果可能是这样的 .container{ width: 1020px } .container > .row {} .container >.row a{}
在前后端分离的天然选择下，node中间层可以承担更多的责任 代理：在开发环境下，我们可以利用代理来解决最常见的跨域问题；在线上环境下，我们可以利用代理，转发请求到多个服务器。 缓存：node中间层可以直接处理一部分缓存需求 限流：node中间层，可以针对接口或者路由做响应的限流。
会导致回流的操作 页面首次渲染 浏览器窗口大小发生改变 元素尺寸或位置发生改变 元素内容变化（文字数量或图片大小等等） 元素字体大小变化 添加或删除可见的DOM元素 激活CSS伪类 查询某些属性或调用某些方法
页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、backgroundColor、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
现代浏览器会对频繁的回流或重绘操作进行优化： 浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值时，浏览器就会将队列清空，进行一次批处理，这样就可以把多次回流和重绘变成一次。 如何避免： CSS： 避免使用table布局； 尽可能在DOM树的最末端改变class 避免设置多层内联样式 将动画效果应用到position属性为absolute或fixed的元素上 避免使用css表达式，比如calc
javaScript 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性 避免频繁操作dom，创建一个documentFragment，在它上面应用所有dom操作，最后再把它添加到文档中。 也可以先为元素设置display:none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘 避免频繁读取会引起回流/重绘的属性，如果需要多次使用，就用一个变量缓存起来 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。
HTTP请求报文：请求行-HTTP头（通用信息头，请求头，实体头）-请求报文主体（只有POST才有报文主体） 请求行：POST HTTP头：HOST、Connection：keep-alive、Content-Length、Accept、Origin、Content-Type、User-Agent、Cookie、Accept-language、Accept-Encoding、 请求报文主体
通用信息头指的是请求和响应报文都支持的头域，分别为cache-control、connection、Date
浏览器每次发起请求，都会先在浏览器中缓存中查找该请求的结果以及缓存标识 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中
强制缓存就是向浏览器缓存查找该请求结果 不存在该缓存结果和缓存标识，强制缓存失效，则直接向服务器发起请求 存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存（携带该资源的缓存标识，发起http请求） 存在该缓存结果和缓存标识，且该结果尚未失效，强制缓存生效
当浏览器向服务器发送请求时，服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是expires和cache-control，其中cache-control优先级比expires高
expires 其值是服务器返回该请求结果缓存的到期时间，即再次发起该请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果
cache-control：max-age:缓存将在xxx秒失效 no-store:所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存 private:所有内容只有客户端可以缓存，cache-control的默认取值 public:所有内容都将被缓存（客户端和代理服务器端都可缓存） no-cache:客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
由于cache-control的优先级比expires，那么根据Cache-control的值进行缓存，意思就是说在600s内再次发起该请求，则会直接使用缓存结果，强制缓存生效 在无法确认客户端的时间是否与服务端的时间同步的情况下，cache-control相比于expires是更好的选择，所以同时存在时，只有cache-control生效
内存缓存有两个特点：快速读取和时效性 （js和图片等文件解析执行后直接存入内存缓存中） 硬盘缓存：将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘做I/O操作（css文件会存入硬盘中）
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程 协商缓存生效，返回304 协商缓存失效，返回200（该资源更新了，重新返回请求结果，200）
同样，协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的，控制协商缓存的字段分别有：Last-Modified/If-Modified-Since和Etag/If-none-match Last-modified是服务器响应请求时，返回该资源文件在服务器最后被修改的时间 If-modified-since则是客户端再次发起该请求时，携带上次请求返回的Last-modified值，通过此字段告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求，发现请求头含有if-modified-since字段，则会根据if-modified-since的字段与该资源在服务器的最后被修改时间作对比，如果服务器最后被修改的时间大于它，则返回200，重新返回资源；否则返回304，代表资源无更新，可继续使用缓存文件
Etag是服务器响应请求时，返回当前资源文件的一个唯一标识（由服务器生成） if-none-match是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，通过此字段值告诉服务端该资源上次请求返回的唯一标识值。服务器收到该请求后，发现该请求头中含有if-none-match，则会根据if-none-match的字段值与该资源在服务器的Etag值作对比，一致则返回304，代表资源无更新，继续使用；不一致则重新返回资源文件，状态码为200
强缓存优先于协商缓存