【计算机网络】前端优化总结

2024-01-27 20:40:40

文章目录

一、采用css雪碧图技术
二、把css或者js文件进行合并或者压缩
三、图片懒加载技术
四、设置视频音频标签为none
五、传输格式使用json
六、采用cdn加速
七、采用事件委托（时间代理）
八、减少闭包使用
九、尽量使用异步编程
十、使用websocket
十一、建立心跳机制

一、采用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进行重连操作

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

码农公寓