【计算机网络基础——系列8】前端优化总结

系列文章总结

【计算机网络基础——系列1】-matlab与python使用socket udp进行进程间通信
【计算机网络基础——系列2】-matlab与python使用socket tcp进行进程间通信
【计算机网络基础——系列3】输入url后页面会遇到的问题
【计算机网络基础——系列4】关于HTTP请求的相关内容
【计算机网络基础——系列5】前端遇到的三种网络攻击
【计算机网络基础——系列6】浏览器缓存之cookie、session、localstorage
【计算机网络基础——系列7】浏览器缓存之—http缓存
【计算机网络基础——系列8】前端优化总结
【计算机网络基础——系列9】restful规范；dns劫持
【计算机网络基础——系列10】osi网络结构；tcp协议保持传输的可靠性；SSL
【计算机网络基础——系列11】实现python作为服务端与qt进行udp通信

---

一、采用css雪碧图技术

采用css雪碧图，将一些小图合并到一张大图上，使用时通过背景图片定位，定位到具体的某一张小图上。

---

二、把css或者js文件进行合并或者压缩

特别是在移动开发端时，如果css或者js内容不是很多，那么我们可以采用内嵌式，以此减少http的请求次数，加快页面加载速度。

---

三、图片懒加载技术

在页面开始加载时候，不请求真实图片地址，而是默认图占位，当前页面加载完成后，根据相关条件依次添加真实图片–减少页面首次加载http请求次数。

---

四、设置视频音频标签为none

对Audio或者Video标签设置其preload为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进行重连操作

---

码字不易~， 各位看官要是看爽了，可不可以三连走一波，点赞皆有好运！，不点赞也有哈哈哈~~~