前端性能优化一:合并css\javascript
来源:互联网 发布:怎么避免淘宝找相似 编辑:程序博客网 时间:2024/06/05 15:41
作为前端工程师的我们都知道阿里在前端技术方面是佼佼者,所以我有空没空会经常逛淘宝,不是为购物,实则是为了查看淘宝是否推出了什么新技术,前几天按F12查看淘宝源码的时候,发现了一个奇怪的问题,一个link引用多个CSS文件或者一个JS的SRC引用了多个JS文件,中间用逗号隔开(如下图),作为菜鸟的我甚是好奇。
这个叫静态资源打包,因为浏览器下载静态文件的时候是有线程数限制的:同一时间针对同一域名下的请求有一定数量限制,超过限制数目的请求会被阻塞。为了提高性能,服务器端会把js/css合并成一个文件(因为都是文本嘛)再向客户端输出,这样页面能更快的展现,用户等待的时间就会减少,你留住用户的机会将会大大增加。我想淘宝也是基于这种技术的。
各个浏览器公布的资源并发数限制个数,各位看官有兴趣可以自己研究下。
可是有人会说这样压缩合并的css\js不方便调试,比如我把压缩之后的打包文件发上去了,发现线上出bug了怎么办?
我推荐你用这种方案,和开发配合起来,比如后台是php,我可以在引用style-min.css的时候这么写:
if(isset($_GET['cssDebug'])){ echo ' <link href="http://***/style.css">';}else{ echo ' <link href="http://***/style-min.css">';}这样在线上,你可以在url后面加上cssDebug参数(当然你可以随便定义参数名称),那么页面就引用了没有压缩过的css样式,你也可以任意调试,而普通访客进来,没有加这个参数,全部是引用的style-min.css这个压缩之后的脚本。
回归重点,怎么样压缩合并css\javascript文件呢,百度搜索啊,各种各样的都有,有在线合并压缩的,有各种前端自动化工具帮你合并压缩,包括但不限于webpack,gulp,grunt等,就看你自由发挥啦,因为我也是菜鸟,一起学习共勉。
阅读全文
0 0
- 前端性能优化一:合并css\javascript
- 网站前端性能优化之javascript和css
- 前端面试总结之前端性能优化( http css JavaScript images HTML)
- 前端性能优化:CSS 选择器性能
- 性能优化--JS、CSS压缩合并
- 前端性能优化:尽可能使用CSS动画
- 前端性能优化(CSS动画篇)
- 前端性能优化(CSS动画篇)
- 前端性能优化(CSS动画篇)
- 前端性能优化之-css阻塞渲染
- 前端性能优化(CSS动画篇)
- 前端性能优化(CSS动画篇)
- 前端性能优化(CSS动画篇)
- 前端性能优化(CSS动画篇)
- 前端性能优化:javascript的加载顺序
- 前端性能优化(JavaScript篇)
- 前端性能优化(JavaScript补充篇)
- 前端性能优化小知识点(javascript)
- 点量OTT IPTV互联网电视软件系统可以实现的功能有哪些
- iOS关键帧动画-动态画折线
- Android 颜色透明度换算
- struts2-7指定struts2处理的请求后缀
- SharedPreferences util工具类封装
- 前端性能优化一:合并css\javascript
- Python实现TFTP
- 排序算法之简单选择排序
- TensorFlow基础环境搭建(Windows)
- 利用jso实现vivo x20手机评论的爬取
- 办公一定要有哪些基础软件?
- Android监听软键盘打开收起事件
- mysql按某字段排序查询时,怎么样始终把某条记录放在第一个呢?
- kubernetes1.8.4 安装指南 -- 9. calico