文章目录
- 一、采用css雪碧图技术
- 二、把css或者js文件进行合并或者压缩
- 三、图片懒加载技术
- 四、设置视频音频标签为none
- 五、传输格式使用json
- 六、采用cdn加速
- 七、采用事件委托（时间代理）
- 八、减少闭包使用
- 九、尽量使用异步编程
- 十、使用websocket
- 十一、建立心跳机制
一、采用css雪碧图技术
采用css雪碧图，将一些小图合并到一张大图上，使用时通过背景图片定位，定位到具体的某一张小图上。
二、把css或者js文件进行合并或者压缩
特别是在移动开发端时，如果css或者js内容不是很多，那么我们可以采用内嵌式，以此减少http的请求次数，加快页面加载速度。
三、图片懒加载技术
在页面开始加载时候，不请求真实图片地址，而是默认图占位，当前页面加载完成后，根据相关条件依次添加真实图片–减少页面首次加载http请求次数。
四、设置视频音频标签为none
五、传输格式使用json
在客户端与服务端进行数据通信时，尽量采用json格式进行通信，json能够清晰明了的展示数据结构也方便获取和操作，传输更加轻量级。
六、采用CDN加速
cdn：分布式（地域分布式）
七、采用事件委托（时间代理）
把事件绑定给外层容器，当里面的后代元素相关行为被触发，外层容器绑定的方法也会被执行（冒泡传播机制导致）通过事件源是谁，做出不同的操作即可。
八、减少闭包使用
九、尽量使用异步编程
使用异步编程，防止堵塞，进行独立加载。
十、使用websocket
websocket是一个持久化的协议，它只需要一次http请求就能够做到源源不断的信息传递，服务端会一直知道你的信息，直到你关闭请求，这样就解决了反复解析http协议的麻烦
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
十一、建立心跳机制
应用层建立心跳机制的好处是能够及时发现链路故障问题，尽早的建立新的连接进行故障转移。
如客户端每隔3s通过长连接通道发送一个心跳请求到服务端，连续失败5次就断开连接
具体实现：
每隔一段固定的时间就向服务端发送一个ping数据，如果在正常的情况下，服务器就会返回一个pong给客户端，如果客户端通过onmessage监听到的话，说明请求正常，如果没有的话，使用ws.close关闭连接，然后再通过reconnect进行重连操作
码字不易~， 各位看官要是看爽了，可不可以三连走一波，点赞皆有好运！，不点赞也有哈哈哈~~~
