# 3、浏览器访问优化
# 1、减少HTTP请求
减少HTTP请求
每发送一次请求都要完成一次HTTP事务，会消耗时间，也可能会导致HTTP链接通道的堵塞，为了提高页面加载速度，我们要减少HTTP请求次数和请求资源的大小(请求内容越大，消耗时间越长)
1）合并
CSS、合并JS、CSS Sprites：将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。图片也可以合并，多张图片合并成一张，合并成的图片大小应该是图片本身的大小。通过background-position来控制需要显示的图片位置。如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。2）合理设置
HTTP缓存：原则很简单，能缓存越多越好，能缓存越久越好。例如，很少变化的图片资源可以直接通过HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。- 1、
Expires/Cache-Control Header是控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只是Cache-Control比Expires可以控制的多一些， 而且Cache-Control会重写Expires的规则。 - 2、
Last-Modified/If-Modified-Since和ETag/If-None-Match是浏览器发送请求到服务器后判断文件是否 已经修改过，如果没有修改过就只发送一个304回给浏览器，告诉浏览器直接从自己本地的缓存取数据；如果修改过那就整个数据重新发给浏览器。
- 1、
3）启用
Gzip压缩 Gzip的思想就是把文件先在服务器端进行压缩，然后再传输。 客户端可以通过HTTP请求头中的Accept-Encoding属性来标识对压缩的支持（Accept-Encoding:gzip,deflate），服务器看到请求中有这个头，就会使用客户端列出的一种方法来压缩响应。这样可以显著减少文件传输的大小。传输完毕后浏览器会 重新对压缩过的内容进行解压缩，并执行。一般Gzip的压缩率为85%左右；4）图片延迟加载与数据懒加载：这条策略实际上并不一定能减少
HTTP请求数，但是却能在某些条件下或者页面刚加载时减少HTTP请求数。对于图片和数据而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片和数据。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片和数据请求就都节省了。5）使用字体图标代替页面中的位图，可以减少
HTTP请求次数（类似雪碧图）6）配置
ETags：Etag是服务器告诉浏览器缓存，缓存里的内容是否已经发生变化的一种机制，通过Etag，浏览器就可以知道现在的缓存中的内容是不是最新的，需不需要重新从服务器上下载
# 2、使用浏览器缓存（使用loaclstorage）
- 对一个网站而言，
CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，将这些文件通过loaclstroge缓存在浏览器中，可以极好的改善性能。
# 3、使用CDN（内容发布网络）
- CDN是一组分布在多个不同地理位置的web服务器，如果web服务器离服务器更近，则一个
HTTP请求的响应时间将缩短。每个服务器都拥有所有网站的文件副本，用户访问网站时，就可以从离用户最近的服务器发送所需的文件给客户端。
# 4、将CSS放在顶部head中，JS放在body尾部
由于CSS放在document底部时，在IE下，为了防止重画页面元素，会禁止HTML正常加载顺序，会等到CSS加载完之后再加载HTML，那么在这段期间用户只能看到空白页面。火狐浏览器不会禁止HTML正常加载，但是意味着css下载后，有些元素样式要重画，这样就会导致页面闪烁的问题；
将脚本放在顶部或页面中，浏览器会对script标签内的内容进行解析，从而阻塞样式的渲染。除此之外，
HTTP1.1规范建议浏览器从每个主机并行的下载两个组件，在高版本的IE和chrome、Firefox等浏览器则支持并行下载六个组件。但script会阻塞并行下载。因此我们应该将脚本放在底部
# 5、避免CSS表达式
- CSS表达式具备求值计算能力，然而每次页面发生重绘时，CSS表达式会影响页面的加载时间。
# 6、减少cookie传输
- 一方面，cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，因此哪些数据需要写入cookie需要慎重考虑，尽量减少cookie中传输的数据量。另一方面，对于某些静态资源的访问，如CSS、script等，发送cookie没有意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发送cookie，减少cookie传输次数。
# 7、Javascript代码优化
- 1）
DOM存在映射机制（浏览器默认构建的机制），操作DOM的时候获取DOM元素集合为一个类数组集合，在JS中，document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection类型的集合，在平时使用的时候大多将它作为数组来使用，因为它有 length属性，也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多，原因是这个集合并不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的“访问集合” 包括读取集合的 length属性、访问集合中的元素。 因此，当你需要遍历HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将length属性、成员保存到局部变量后再使用局部变量。- 2）
DOM操作还需要考虑浏览器的回流和重绘，当元素的样式发生改变(不修改元素位置的样式)，浏览器会把当前元素重新的进行渲染(DOM性能消耗低)。当元素的位置发生改变，浏览器会把整个页面的DOM结构进行重新计算，计算出所有元素的最新位置，然后再渲染(DOM性能消耗非常大)。这些都是需要消耗资源的；- 3）给
DOM绑定事件的时候避免一个个绑定，而是采用性能更高的事件委托来实现；- 4）避免使用
eval和Function函数，每次eval或Function构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。- 5)使用异步编程：同步编程可能会有阻塞作用，如
AJAX请求，我们一般都要使用异步编程，最好事基于promise设计模式进行管理- 6）JS中尽量少使用闭包：闭包会形成一个不销毁的栈内存，过多的栈内存累积会影响页面的性能，还会导致内存泄露；
# 8、保持Js和CSS外部引用
- 使用外部文件通常会加快页面速度，因为这样
js,css文件可以被浏览器缓存。如果js,css采用内嵌式，每次请求页面的时候都会重新加载。这样虽然减少了http请求数量，但是增加了html的大小。从另一方面来说，如果js,css在外部文件中并且被浏览器缓存，那么后续请求不会增加html文档大小，也不会增加http请求数量(外部文件从浏览器缓存中取，不经过http请求了)。
内联可以降低http请求，使用外部文件缓存也有好处。通常的处理是首页内联js,css，当也加载完成之后再动态下载外部文件，这样后续页面就可以从浏览器缓存中获取这些文件。
# 9、压缩以及剔除重复的CSS和JS
# 10、减少DNS查询
DNS查询有时间开销，通常一个浏览器查找一个给定主机名的IP地址需要20-120ms。缓存DNS：缓存DNS查询可以很好地提高网页性能，一旦缓存了DNS查询，之后对于相同主机名的请求就无需进行再次的DNS查找，至少短时间内不需要。所以在使用页面中URL、图片、js文件、css文件等时，不要使用过多不同的主机名。
# 11、避免重定向
- 重定向的英文是
Redirect，用于将用户从一个URL重新跳转到另一个URL。最常见的Redirect就是301和302两种。在我们实际开发中避免重定向最简单也最容易被忽视的一个问题就是，设置URL的时候，最后的“/”，有些人有时候会忽略，其实你少了“/”，这时候的URL就被重定向了，所以在给页面链接加URL的时候切记最后的“/”不可丢。
# 12、使Ajax可缓存
- 针对页面中主动的
Ajax请求返回的数据要缓存到本地，当然这个是针对短期内不会变化的数据。如果不确定数据变化周期的话，可以增加一个修改标识的判断，我正常处理过程中会给一些Ajax请求返回的数据增加一个MD5值的判断，每次请求会判断当前MD5是否变化，如果变化了取最新的数据，如果不变化，则不变。
# 13、客户端与服务器端通信时尽量采用JSON格式数据进行传输
优势
- 1、
JSON数据能够清晰明了的展示出数据解构，而且也方便我们获取和操作 - 2、相对于
XML，JSON数据更加轻量级 - 3、客户端和服务器端都支持
JSON数据的处理，使用起来方便；
并不是所有数据都可以用JSON，如：文件流的传输或者文档的传输，用JSON就不合适了；
# 14、CSS选择器优化
1、尽量减少标签选择器的使用
2、尽可能少使用ID选择器，多使用样式雷选择器（通用性强）
3、减少选择器前的前缀
← 2、SEO与SEM优化 4、HTTP协议 →