基础

HTML软件的架构

C/S： 客户端/服务器端

一般我们使用的软件都是C/S架构
比如系统中的软件QQ、360、office等
C表示客户端，用户通过客户端来使用软件
S表示服务器，服务器主要负责处理软件的业务逻辑

特点

1. 软件使用前必须安装
2. 软件更新时，服务器和客户端必须同时更新
3. C/S架构的软件不可以跨平台使用
4. C/S架构的软件客户端和服务器通信采用的是自有协议，相对来说比较安全

B/S：浏览器/服务器端

B/S本质上也是C/S，只不过B/S架构的软件是使用浏览器作为软件的客户端
B/S架构软件通过使用浏览器访问网页的形式，来使用软件
比如：京东、淘宝、12306等

特点

1. 软件不需要安装，直接使用浏览器访问指定的网址即可
2. 软件更新时，客户端不需要更新
3. 软件可以跨平台，只要系统中有浏览器，就可以使用
4. B/S架构的软件，客户端和服务器之间通信采用的是通用的http协议，相对来说不是很安全

输入网站回车解析过程

浏览器的地址栏输入www.baidu.com，然后回车，看一下回车的这一瞬间到我们看到页面发生了什么？？？
http的header会给我们的请求进行包装：

1. 域名解析，根据域名知道服务器的IP
2. 发起TCP的3次握手
3. 建立TCP连接后发起http请求
4. 服务器响应http请求，浏览器得到html代码
5. 浏览器解析html代码，并请求html中的资源(js,css,图片等)
6. 浏览器对页面进行渲染并呈现给用户

CSS优化

CSS优化主要是从下面2个方面：

网络性能：把CSS写到字节数最少，加快下载速度，可以让页面渲染的更快一些

语法性能：主要是优化CSS语法

CSS压缩

就是把CSS中没用的空白符等删去，达到缩减字符个数的目的，一些常用的工具如：YUI Compressor、SASS等

gzip压缩

Gzip是一种流行的文件压缩算法，现在的应用十分广泛，尤其是在Linux平台，这个不止是对CSS，当应用Gzip压缩到一个纯文本文件时，效果是非常明显的，大约可以减少70％以上的文件大小（这取决于文件中的内容）

在没有gzip压缩的情况下，Web服务器直接把html页面、CSS脚本、js脚本发送给浏览器，而支持gzip的Web服务器将把文件压缩后再发给浏览器，浏览器（支持gzip）在本地进行解压和解码，并显示原文件。这样我们传输的文件字节数减少了，自然可以达到网络性能优化的目的。gzip压缩需要服务器的支持，所以我们需要在服务器端进行配置

在IIS上启用Gzip压缩(HTTP压缩)

apache启用gzip压缩方法

Nginx Gzip 压缩配置

合写CSS

主要是通过少写CSS属性来达到减少CSS字节的目的

.test{
 background-color: #000;
 background-image: url(image.jpg);
 background-position: left top;
 background-repeat: no-repeat;
}

合并以后：
.test{
  background: #000 url(image.jpg) top left no-repeat;
} 

利用继承

CSS的继承机制也可以帮我们再一定程度上缩减字节数，我们知道CSS有很多属性是可以继承的即在父容器设置了默写属性，子容器会默认也使用这些属性，因此如果我们希望全文字体尺寸是14px，大可不必为每个容器设置，只需要在body上设置就可以了。应用这个技巧，把CSS属性在可能的情况下提到父容器是可以帮我们节省CSS字节的，顺便说一下哪些属性可以继承

所有元素可继承：visibility和cursor

内联元素和块元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction

块状元素可继承：text-indent和text-align

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image

表格元素可继承：border-collapse

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi

抽离、拆分CSS，不加载所有CSS

抽离CSS是指把一些通用的CSS放到一个文件内，而不是写到各个页面，这样一次下载后，其它页面用到的时候就可以利用缓存了，减少不必要的重复下载。

CSS sprites

CSS图片精灵

CSS放在head中，减少repaint和reflow

浏览器渲染页面大概是这样的，当浏览器从上到下一边下载html生成DOM tree一边根据浏览器默认及现有CSS生成render tree来渲染页面，当遇到新的CSS的时候下载并结合现有CSS重新生成render tree，刚才的渲染工作就白费了，如果我们把所有CSS都放到页面顶部，这样就没有重新渲染的过程了

浏览器缓存

简介说明

在chrome浏览器中的控制台Network中size栏通常会有三种状态：

1. from memory cache
2. from disk cache
3. 资源本身的大小(如：1.5k)

三种状态的区别

from memory cache

该项资源是直接从内存中拿到的，不会重新请求服务器获取数据
该项资源一般是已经加载过该资源且缓存在了内存当中
当关闭该页面时，此资源就被内存释放掉了，再次重新打开相同页面时不会出现from memory cache的情况

from disk cache

该项资源是从磁盘当中取出的，也是在已经在之前的某个时间加载过该资源，不会请求服务器但是此资源不会随着该页面的关闭而释放掉，因为是存在硬盘当中的，下次打开仍会from disk cache

资源本身大小数值

当http状态为200是实实在在从浏览器获取的资源，当http状态为304时该数字是与服务端通信报文的大小，并不是该资源本身的大小，该资源是从本地获取的

chrome采取措施的准则

什么时候是from memory cache 什么时候是from disk cache 呢？

即哪些资源会放在内存当中，哪些资源浏览器会放在磁盘上呢，结果如下下表所示

1. 样式表一般在磁盘中，不会缓存到内存中去，因为css样式加载一次即可渲染出网页
2. 但是脚本却可能随时会执行，如果脚本在磁盘当中，在执行该脚本需要从磁盘中取到内存当中来，这样的IO开销是比较大的，有可能会导致浏览器失去响应

不同浏览器策略是否一致

1. 以上的数据及统计都是在chrome浏览器下进行的，在Firefox下并没有from memory cache以及from disk cache的状态展现；
2. 相同的资源在chrome下是from disk/memory cache，但是Firefox统统是304状态码，即Firefox下会缓存资源，但是每次都会请求服务器对比当前缓存是否更改，chrome不请求服务器，直接拿过来用，所以一般可以看到chrome比较快