前端 | web应用优化的一些方法步骤



1.javascript压缩和模块打包

可以使用Webpack对CSS和JS进行压缩,以及合并图片。
 

2.按需加载资源(惰性加载)

react-lazy-load处理react惰性加载
  • 减少了像服务器发出的并发请求数量;
  • 减少了浏览器的内存使用率;
  • 减少了服务器端的负载。             
 

3.在使用DOM操作库时用上array-ids

尽可能多的重用已有的节点。
 

4.缓存

Caches用于存储那些被频繁存取的静态数据,便于随后对该数据的请求更快速。
 

5.启用HTTP/2

在延迟和性能方面优于http1,为同一服务器的并发连接带来了好处。
 

6.应用性能分析

chrome提供了Chrome  Dev Tools,其中的时间线和网络视图对于定位延迟问题有很大的帮助。
 

7.使用负载均衡方案

把负载分配到不同的服务器可以给你的用户提供更好的延迟时间,特别是在处理很多的并发请求时。
 

8.为了更快的启动时间考虑一下同构javascript

可以让服务器端来执行页面的首次渲染,先把已渲染的页面发送出去然后再由客户端的脚本接管。
同构js:在客户端和服务器端同时运行
meteor.js对客户端和服务器端混用支持度高
 

9.使用索引加速数据库查询

索引是一个过程,是数据库创建的快速访问数据结构,从内部映射到键,可以提高检索数据的速度。
文档型数据(比如MongoDB),关系型数据库(比如PostgreSQL)都支持索引。
 

10.使用更快的转译方案

使用ECMAScript,并使用相应的转译器。
 

11.避免或最小化javascript和css的使用而阻塞渲染

js和css资源都会阻塞页面的渲染,可以采取某些方式让这些资源尽快被处理。
css 媒体查询可以被设置为<link>标签属性:
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="mobole-device.css"/>
javscript 防止js阻塞,可以将<script>标签设置为异步的
<script src="async.js" async ></script>
限制了DOM访问,但可以让浏览器不管脚本的执行状态而去继续解析和渲染。
 

12.用于未来的一个建议:使用serviceworker+流

主旨是在网站和客户端之间放置一个service worker,可以在获取缺失信息的同时缓存某些数据(比如header和一些不会经常改变的数据),缺失的内容就可以尽可能快速地流向被渲染的页面。
 

13.更新:图片编码优化

使用OptiPNG和jpegtran使用次优的设置进行编码,对于需要大量图片的网站来说可以获得有效的改善。
 
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值