前端性能优化-传输加载优化

一、启用压缩Gzip

Nginx开启Gzip压缩功能, 可以使网站的css、js 、xml、html 文件在传输时进行压缩,提高访问速度, 进而优化Nginx性能! Web网站上的图片,视频等其它多媒体文件以及大文件,因为压缩效果不好,所以对于图片没有必要支压缩,如果想要优化,可以图片的生命周期设置长一点,让客户端来缓存。 开启Gzip功能后,Nginx服务器会根据配置的策略对发送的内容, 如css、js、xml、html等静态资源进行压缩, 使得这些内容大小减少,在用户接收到返回内容之前对其进行处理,以压缩后的数据展现给客户。这样不仅可以节约大量的出口带宽,提高传输效率,还能提升用户快的感知体验, 一举两得; 尽管会消耗一定的cpu资源,但是为了给用户更好的体验还是值得的。

二、启用Keep Alive

Nginx关于keepalive连接保持的特性,实际上就是在一次TCP连接中,可以持续处理多个客户请求,而不断开连接。通过该机制可以减少TCP连接的建立次数,减少TIME_WAIT的状态连接。从而增加服务的吞吐量和整体服务质量。

三、HTTP资源缓存

强制缓存和协商缓存
推荐阅读:https://www.jianshu.com/p/037a4478c504

四、Service workers技术,给网站提速

Service worker 提供了很多新的能力,使得 web app 拥有与 nativeapp 相同的离线体验、消息推送体验。
推荐阅读: https://www.jianshu.com/p/768be2733872

五、HTTP 2的性能提升

HTTP2优势
多路复用
二进制分帧
首部压缩
服务推送
推荐阅读: https://www.jianshu.com/p/8ac6baf4728c

六、用流行的SSR技术给前端减负

SSR是Server Side Render简称;页面上的内容是通过服务端渲染生成的,浏览器直接显示服务端返回的html就可以了。
推荐阅读: https://www.jianshu.com/p/10b6074d772c

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 思维导图 一.npm run build 缩小打包的体积 首先来看我未作任何处理的一个打包 这个包很大,里面有很多...
    来了啊小老弟阅读 1,102评论 0 3
  • 1. 用户体验 软件是用户通往资源的通道。例如:滴滴对应司机、乘客;淘宝、天猫对应购物;饿了么、美团对应周边生活;...
    nimw阅读 514评论 0 1
  • 记录了自己的博客在禁用缓存的情况下,从八九秒加载时间到最终985ms的优化实践,开启缓存的情况下能达到138ms的...
    辉夜真是太可爱啦阅读 9,933评论 12 25
  • 衡量网站的性能的指标有很多,其中有项重要的指标就是网站的首屏时间,为此前端工程师们都是绞尽脑汁想尽办法进行优化自己...
    coder勇阅读 309评论 0 0
  • 我最近也经常面试外包同事。面试的时候,总会有个问题,“你说一下性能优化的手段”。百分之八十的人都会说,压缩js和c...
    brandonxiang阅读 400评论 1 2