项目静态资源性能优化从响应30S变成1S内

本文介绍了如何通过优化静态资源,将项目加载时间从30秒缩短到1秒内。主要措施包括:调整CSS与JS的位置、合并文件、使用CDN加速、删除不必要的引用及启用gzip压缩。通过这些方法,实现了显著的性能提升。
摘要由CSDN通过智能技术生成

由于部署到服务器上面的项目,受带宽限制,受资金限制,导致不得不把项目优化到极致,下面就把思路分析给朋友们,喜欢的就点赞,不喜欢也不要喷。(备注一下 这里优化的是静态资源,程序的优化(大多看设计思想和架构了)

未优化前:
100 requests请求 --传输 1.3M --finish 完成大概20多S (这个根据服务器带宽而且,1M带宽 传输大概125kb/s 越大带宽钱越多,当然传输越快,速度越快)

这个从服务器地址访问的截图 --优化效果图:
26 requests 请求 — 传输141KB — finish完成 355ms

在这里插入图片描述

从哪些方面下手优化呢:
(1)css放到页面前面 js放到末尾 (面试题哟)

 CSS放头部在加载html生成DOM tree的时候,就可以同时对DOM tree进行渲染。
 javascript可能会改变DOM tree的结构,所以需要一个稳定的DOM tree。
 javascript加载后会立即执行,中断html的解析过程 如果外部脚本加载时间很长 同时会阻塞后面的资源加载。

(2) 多个css 合并成一个css 多个js合并成一个js
通过自动化构建工具gulp webpack这些都可以搞定

(3) 适当采用CDN加速,通过国内的CDN加速 效果还是比较明显
CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求
重新导向离用户最近的服务节点上 。如果你服务器加载访问资

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值