手机版 欢迎访问it开发者社区(www.mfbz.cn)网站

当前位置: > 开发

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

时间:2021/5/29 17:54:39|来源:|点击: 次

文章目录

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


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

Copyright © 2002-2019 某某自媒体运营 版权所有