前端性能优化-Cookie
2016-02-01 09:46
246 查看
什么是Cookie
Cookie可以理解成为浏览器内部存储数据的一个数据库,并会随请求一起被发送;Cookie以键-值对的形式存在。可以存储网站的一些数据,这部分数据不会随着浏览器关闭而被清除。如下图为cnblogs的Cookie的形式。![](http://images2015.cnblogs.com/blog/704414/201602/704414-20160201094528616-1833298300.png)
Cookie有哪些优势和不足
Cookie的优势是全系列浏览器全部支持,而且可以不传递参数的情况下与后台进行数据交互,最典型的例子就是自动登录。Cookie的不足就很多了
IE老版本浏览器会有50个限制,超出会被新的Cooke替换
如果域名设置不当,所有请求都会带上Cookie信息,包括图片、css文件等,造成不必要的流量浪费
Cookie的读写性能非常非常的差
有一个小例子来证明上述的观点,点我
在例子中先点击增加Cookie数据,把Cookie写到浏览器中,再点击获取Cookie数据,数据就会被打印到页面上,我们看下Chrome浏览器和IE6浏览器的差异。可见,Chrome是正常全部取出,IE6的前50个已经被替换了,取值为空。
![](http://images2015.cnblogs.com/blog/704414/201602/704414-20160201094530069-1392379533.png)
![](http://images2015.cnblogs.com/blog/704414/201602/704414-20160201094531257-2073396189.png)
当我把域名设置为:主域名和二级域名时,我们看下静态资源的加载情况
我们看一下Cookie在IE6和Chrome下的读写差别;可见,不论现代浏览器还是老版浏览器,性能都非常差
Cookie的解决方案
尽量的少使用Cookie,最好能使用变量来替换使用LocalStorage存储数据(兼容IE6),点我
相关文章推荐
- ReactNative开发中如何去掉iOS状态栏的"Loading from..."
- caffe官网的部分翻译及NG的教程
- Angular.js(出库查看)
- 为js的String对象添加replaceall属性
- React 入门实例教程
- CSS 参考文档
- Angular.js(出库编辑)
- jQuery与Ajax以及序列化
- jquery树形菜单
- js格式化输入框内金额、银行卡号
- jsp/servlet生成验证码图片
- H5小内容(五)
- Web之旅第四站——CSS(Cascading style Sheet) 层叠样式表
- 前端性能优化-域名解析
- 前端性能优化-域名解析
- 继续node爬虫 — 百行代码自制自动AC机器人日解千题攻占HDOJ
- angularjs中的interval定时执行功能
- jquery.tmpl 用法(附上详细案例)
- angularjs中的数据绑定
- jQuery扩展extend一