之前想深入的了解学习下HTTP，所以就买了本砖头《HTTP权威指南》。最近一直在看，可是发现看书只有输入并没有输出，不行。所以就打算把自己的理解写成一系列的笔记，供以后翻阅。

大概画了张本章内容的思维导图：（画工渣渣，字丑(⊙﹏⊙)b）将就呗~

第一章 HTTP概述 其实就是简要的概述了接下来每一章的点。

可以用一句话来概括本章的内容：web客户端通过和服务器端建立连接，建立连接成功就通过HTTP传递请求，往服务器的特定位置获取需要的多媒体资源，再返回给web客户端。

1.HTTP——互联网的多媒体信使

HTTP其实是web客户端和服务端的信使。通俗的可以这样理解：用户在京东上买东西，快递员就充当信使的角色。这里的用户就是web客户端，京东就是服务器，而快递员就是我们的HTTP了。

2.web客户端和服务器

上面提及的web客户端和服务器端，一般情况下，我们用浏览器访问一个页面就会涉及到HTTP，而我们的浏览器就充当web客户端的角色，然后通过输入的网址发送请求，访问远端的服务器索取需要的资源，而服务器就是存放各类资源的容器，服务器获取到请求后，知道浏览器要什么，就告诉浏览器响应请求，把浏览器需要的资源返回给它，浏览器就能显示漂亮的界面啦。

什么是重排，重绘？

在我还是菜菜菜鸟时，有人就问我了。你知道什么操作会引起重排吗？

当时就在想，重排是个什么东东。。。于是，Google了一下（说谷歌显的高大上点(⊙﹏⊙)b）
当然，提到重排重绘，就理所当然会提及DOM树和渲染树等等~ 这就让我们一个个慢慢道来。

高性能JavaScript里是这么说的：

“浏览器下载完页面中的所有组件————HTML标记、JavaScript、CSS、图片————之后就会解析并生成两个内部数据结构”

DOM树

表示页面结构

渲染树

表示DOM节点如何显示

DOM树和渲染树就是相互存在的一种数据结构，DOM树里每一个需要显示的节点在渲染树里至少会有一个对应的节点（当然，隐藏的DOM元素在渲染树里是没用节点的）渲染树的节点可以叫“帧”或者“盒”，可以理解为CSS里面的盒子吧，就可以把对应的页面元素理解为一个具有padding，margin，border和position（位置）的盒子。一旦这DOM树和渲染树相互构建完成之后，浏览器就可以要是显示（绘制paint）页面元素了。

可是怎么理解呢，就举个栗子吧，不知道大家画过画没，数字油画呢？就用它来说栗子：

1. 比如我要画个柯南，你要想把，柯南肯定是个人吧，有眼睛，鼻子，嘴巴，耳朵各种五官吧，当然还要穿衣服吧，可以还可以把他爱人小兰画上吧。就是你画像需要显示的内容就是对应DOM树的节点，他们的集合就构成一棵DOM树吧；
2. 那当你决定要画的时候，就要构造柯南的头有多大，眼睛大小之类的吧，上什么色吧，就像数字油画给你的那个有数字，不同格子填什么色的，这个格子就是可以当成渲染树的节点，那这个集合构成就是渲染树啦；
3. 最后，我这个大画家就要开始作画啦，那你画到画布上的过程就是绘制painting啦，painting这个词形象生动O(∩_∩)O~

不知道这样说，清楚没呢~

所以，一旦DOM树变化，影响了页面元素的几何属性（宽高）————比如，改变了元素border或者给段落添加文字增加了行数————这样的话，浏览器就要重新计算元素的几何属性，以及其他受影响的元素。这时浏览器起作用啦，就会让渲染树受影响部分失效，进行重新计算，再重新构造渲染树，这个过程就叫做“重排热flow”，重排完成后，浏览器会把受影响部分的元素重新显示（绘制）到屏幕上，这一过程就叫做“重绘”。就这样理解嘛，活字印刷术里，你要写文字，你的文字都还没有排好，怎么进行印刷呢。

但是呢，并不是有了重排才会有重绘，就比如，你页面元素的几何属性就修改背景颜色，其他都不改，这个行为是没有触发重排的（因为没有修改元素的布局），但是浏览器需要进行一次重绘，把新的背景颜色绘制到屏幕上。

重排怎么触发（发生）？

当页面布局和几何属性改变时就需要重排。举栗子

• 添加或删除可见DOM元素，注意是可见，不可见的根本就不在渲染树上好吗；
• 元素位置改变；就如把A移动到B，B移动到A
• 元素尺寸改变（包括：padding，margin，border，width，height等属性改变时）；
• 内容改变，如文本改变，或者图片被另一个不同尺寸的图片替换
• 页面渲染器初始化
• 浏览器窗口尺寸变化，这里我就有点疑问，那要是我每次缩放浏览器不都会触发吗？？？
• 最后，页面出现滚动条时也会触发。。。

p.s：本文摘至野狗公众号发的文章

浏览器工作流步骤

总的来说，浏览器工作流就是以下几个步骤：

1. 创建DOM树
2. 创建渲染树
3. 布局（reflow）
4. 绘制（painting）

图解

NOTE：在下面这张图中，配图文字使用的是Webkit引擎的术语。所有的浏览器都是遵循类似的工作流，仅在细节处略有不同。

Module(模块)模式

能清晰分离和组织项目中的代码单元

通常有以下四种方式实现：

• 对象字面量

  var myModule = {
    myProperty: 'someProperty',
    myMethod: function() {
        return "this is myMethod"
    }
  }
  myModule.myMethod();    // 调用方法
  

• Module模式

  var myModule = (function() {
    var myProperty;
    return {
        myMethod: function() {
            return "this is myMethod";
        }
    }
  })();
  

• AMD模式
• CommonJS模块
• ECMAScript Harmmory模块
  上面三种迟点写例子介绍、

Module模式： 在传统软件工程中，是为类提供私有和公有的封装方法，主要是使用闭包封装私有状态和组织，提供一种包装公有私有和变量的方式，防止其泄露至全局作用域。

模式变化

包括以下两种：

引入混入

这种就是DOJO，ExtJS，JQ等的实现

引出

就是上面Module模式的实现

优缺点

优点： 支持私有数据
缺点：

1. 改变数据可见性，修改时，需要每个修改
2. 无法为使用为私有成员创建自动化测试

easyUI渲染方式（html&js二者只能选其一）

渲染遇到的坑啊，attention！！！

关于问题：
Q：为什么只能二者选其一？
A：就是两种渲染方式其实是一样，如果两种都使用，就重复了。

我自己的坑：
Q：用html的方式渲染了之后，用js的方式操作添加（add）等方法，会出现js写的方法里的出不来甚至报错！
A：这是因为，js是异步的，可能是在html方式渲染之前就已经执行了js的代码（是要渲染后才能执行的），所以就会出现显示不出来或报错问题！

可以做个试验检验：用下面代码加上这里，加个定时器，就可以进行检验

setTimeout(function() {
    $('#tt').tabs('add', {
        title: 'New Tab',
        content: 'Tab Body',
        closable: true,
        tools: [{
            iconCls: 'icon-mini-refresh',
            handler: function() {
                alert('refresh');
            }
        }] 
    });
}, 5000);