一.想过如何对网站优化:模块化方向

本文介绍六种提升网站性能的方法:包括资源文件的压缩合并、利用CSS Sprites减少HTTP请求、设置合理的缓存策略、实现懒加载、应用HTTP/2协议及部署CDN,帮助开发者从多角度优化用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一.想过如何对网站优化:模块化方向

1.Js压缩合并和模块化

如果可以,尽可能将外部脚本样式多个合为一个。

Css,js,html都可压缩,推荐一个css简写工具:YUI Compressor(java开发,css和js,雅虎yui工具包,)

cssgaga(更极限)

function echo(stringA,stringB){

	var hello="hi";
	
	alert("hello world");
	
}
压缩后:
function echo(stringA,stringB){var hello="hi";alert("hello world")}; 

 

图片,利用canvas的drawimage来绘制图片

 

 

2.用css sprites

css精灵,用于网页图片处理,其思想在于减少请求次数。客户端每显示一张图都会向服务器端发出请求,次数一多,造成延迟的可能性大

故根本在于减少网页的http请求


blob(binary large object):二进制大对象,存储二进制文件的容器



3.减少http请求数

首先,从设计上简化页面,参考百度页面

其次,要想炫的效果,只能合理设置缓存。很少变化的图片资源可以通过http中的expires设置一个很长的失效日期,last-modified:一些变化频率不大的图片。


注:expires和cache-control:max-age标头:用于指定相应时间段使用缓存,设置标头并下载资源后,浏览器不会为资源发出任何get请求,除非过期日期到期或达到时间最大值,或清除缓存。

last-modified和etag标头:last-modified标头中指定的为日期,失效条件:可在用户明确重加载页面时发出get请求。有效更新已缓存资源。除非在服务器端更改资源,否则条件式get请求不会返回完整响应,故延迟小。



4.lazy load(按需加载资源)

惰性加载,只在必要的时候才去加载资源(如图片,视频)

这里有react-lazy-load插件


5.http/2

为同一服务器并发链接,延迟和性能方面秒杀1!


6.CDNs,内容分发网络

把负载分配不同服务器,缩短延迟时间,使负载均衡

实时根据网络流量和各节点的连接,负载情况以及到用户的距离和响应时间等综合情况,将请求重导向最近的服务节点,解决拥挤,提高响应速度。






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值