一.想过如何对网站优化:模块化方向
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,内容分发网络
把负载分配不同服务器,缩短延迟时间,使负载均衡
实时根据网络流量和各节点的连接,负载情况以及到用户的距离和响应时间等综合情况,将请求重导向最近的服务节点,解决拥挤,提高响应速度。