今日完成的事

       优化了下代码，学习了一些前端优化的手段

明日计划的事

       继续优化代码

收获

       前端开发优化的一些常见方法

页面中每发送一次HTTP请求，都需要完成请求加响应这个完整的HTTP事务，会消耗一些时间，也可能会导致HTTP链接通道的阻塞，为了提高页面的加载速度和运行的性能，我们应该减少HTTP的请求次数和减少请求内容的大小（请求的内容越大，消耗的时间越长）。

CSS合并成一个，JS最好也合并成一个

首先通过一些工具（例如：webpack）把合并后的CSS或者JS压缩成xxx.min.js，减少文件的大小

服务器端开启资源文件的GZIP压缩

通过一些自动化工具完成CSS以及JS的合并压缩，或者在完成LESS转CSS，ES6转ES5等操作，我们把这种自动化构建模式，称之为前端工程化开发

采用图片的懒加载技术，在页面开始加载的时候，不请求真实图片的地址，而是用默认图占位，当页面加载完成后，再根据相关的条件依次加载真实图片（减少页面首次加载HTTP请求的次数）

开始图片都不加载，页面首次加载完成，先把第一屏幕中可以看见的图片进行加载，随着页面的滚动，再把下面区域中能够呈现出来的图片进行加载

根据图片的懒加载技术，我们还可以扩充出数据的懒加载

开始加载页面的时候，我们只把首屏或者前两屏的数据从服务端进行请求（有些网站首屏数据是后台渲染好，整体返回给客户端呈现的）

当页面下拉，滚动到哪个区域，在把这个区域需要的数据进行请求（用请求回来的数据进行数据的绑定以及图片的延迟加载等）

分页展示技术采用的也是数据的懒加载思想实现的：如果我们请求获取很多的数据，我们最好分批请求，开始只请求第一页的数据，当用户点击第二页（微博是下拉到一定距离后，在请求第二页数据...）的时候在请求第二页的数据

对于不经常更新的数据，最好采用浏览器的304缓存做处理（主要由服务器端处理）

比如

第一次请求CSS和JS下来，浏览器会把请求的内容缓存起来，如果做了304处理，用户再次请求CSS和JS，直接从缓存中读取，不需要再去服务器获取了（减少了HTTP请求的次数）

当用户强制刷新页面（CTRL+F5）或者当前缓存的CSS或者JS发生了变动，都会重新从服务器端拉取

对于客户端来讲，我们还可以基于localStorage来做一些本地存储，例如：第一次请求的数据或者不经常更新的CSS和JS，我们都可以把内容存储到本地，下一次页面的加载，我们从本地获取即可，我们设定一定的期限或者一些标识，可以控制在某个阶段重新从服务器获取

使用字体图标代替页面中的一些位图（图片），这样不仅做适配的时候方便，而且更加轻量级，而且减少了HTTP请求次数（类似于雪碧图）

在客户端和服务器端进行数据通信的时候，我们尽量采用JSON格式进行数据传输

[优势]

JSON格式的数据，能够清晰明了的展示出数据结构，而且也方便我们获取和操作

相对于很早以前的XML传输，JSON格式的数据更加轻量级

客户端和服务器端都支持JSON数据的处理，处理起来非常的方便

并不是所有的数据都要基于JSON，我们尽可能这样做，但是对于某些特殊需求（例如：文件流的传输或者文档传输），使用JSON就不合适了

· 使用首屏加载

首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化

· 按需加载

将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量

PS：按需加载会导致大量重绘，影响渲染性能

a) LazyLoad

b) 滚屏加载

c) 通过Media Query加载

· 预加载

大型重资源页面（如游戏）可使用增加Loading的方法，资源加载完成后再显示页面。但Loading时间过长，会造成用户流失

对用户行为分析，可以在当前页加载下一页资源，提升速度

a) 可感知Loading(如进入空间游戏的Loading)

b) 不可感知的Loading（如提前加载下一页）