web前端性能优化之合并静态资源请求

除过在前端编码的时候将css、js等静态资源文件合并压缩之外,我们还可以在页面中将多个css、js的请求合并为一个请求。

比如我们在淘宝的首页源码中可以看到以下的css引用:

<link rel="stylesheet" href="/??tb/global/2.6.0/global-min.css,tb/tb-fp/1.7.2/style-min.css?t=20131231">

这段代码通过一个网络请求完成两个css文件的请求,是怎么做到的呢?

原来是一个叫nginx-http-concat的模块,nginx-http-concat模块是淘宝开发的基于Nginx减少HTTP请求数量的扩展模块,主要是用于合并减少前端用户Request的HTTP请求的数量。

nginx-http-concat是一个nginx扩展模块,需要在安装nginx的服务器上重新编译nginx并加入nginx-http-concat,这个模块可以在github上下载。

安装之后需要重新修改nginx配置:

location /static/css/ {
    concat on;           #是否开启concat,默认是关闭的
    concat_max_files 20; #允许concat的最大文件数,默认是10
}

location /static/js/ {
    concat on;
    concat_max_files 30;
}

nginx重新reload之后,就可以使用类似淘宝的方法将多个css或js文件合并为一个请求。比如:

/css/??global.min.css,index.min.css?t=20140107

以上concat的配置在http、server、location中都能生效,除此之外还有几个参数,不设置也罢。

concat_unique on;                               #是否只对同一类型的MIME types文件进行合并,默认是开启的
concat_types text/css application/x-javascript; #指定可以合并的MIME types,默认是text/css application/x-javascript
concat_delimiter;                               #指定合并文件之间的分隔符。该分隔符会被插入被合并的文件之间。
concat_ignore_file_error off;                   #是否忽略文件错误(403或404等),默认是关闭的。

时间: 2024-09-21 16:42:28

web前端性能优化之合并静态资源请求的相关文章

WEB前端性能优化:HTML,CSS,JS和服务器端优化

文章描述:WEB前端性能优化小结. 对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前端性能优化. HTML部分 语义化HTML:好处在于可以使代码简洁清晰,支持不同设备,利于搜索引擎,便于团队开发: 减少DOM节点:加速页面渲染: 给图片加上正确的宽高值:这可以减少页面重绘,同时防止图片缩放: 防止src属性和link的href属性为空:当值为空

Web前端性能优化全攻略

Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端优化最佳实践之 内容篇Web 前端优化最佳实践之 Server 篇Web 前端优化最佳实践之 Cookie 篇Web 前端优化最佳实践之 CSS 篇Web 前端优化最佳实践之 JavaScript 篇Web 前端优化最佳实践之 图象篇Web 前端优化最佳实践之 Mobile(iPhone) 篇 Yahoo! 的 Exceptional Performance team 在 Web 前端方面作

Web前端性能优化教程:精简JS 移除重复脚本

本文是Web前端性能优化系列文章中的第七篇,主要讲述内容:精简Javascript代码,以及移出重复脚本.完整教程可查看:Web前端性能优化 一.精简javascript 基础知识 精简:从javascript代码中移除所有的注释以及不必要的空白字符(空格,换行和制表符),减少javascript文件的大小. 混淆:和精简一样,会从javascript代码中移除注释和空白,另外也会改写代码.作为改写的一部分,函数和变量的名字将被转换为更短的字符串,所以进一步减少了javascript文件的大小.

Web前端性能 优化进阶路

简单的说,我们的性能优化实践分为三个阶段:初探期.立规期.创新期, 每个阶段大概持续半年左右,有足够的时间形成一些优化思路的沉淀. 一:初探期2010年底我们开始接手搜索List页面,这是中文站历史最为悠久的页面之一,当时它的生命体征正如它的年龄一样,非常虚弱:当时的基调网络监控显示,页面的完全加载的时间是16秒!作为以"快"为核心业务指标的搜索页面,这个状态显然已是无法承担重任了.性能是一定要优化的,但我们也面临着大多数前端同学所面临的共性问题 - 业务需求紧张,况且我们是 刚刚接手

移动HTML 5前端性能优化指南

  前端工程师的菜!最近移动Html 5越来越火,想有一个体验流畅的Html 5 应用,这篇优化指南就别放过咯.腾讯的同学将关键的注意点与优化方法都总结出来,全文高能干货,非常值得深度学习 >>> 概述 PC优化手段在Mobile侧同样适用 在Mobile侧我们提出三秒种渲染完成首屏指标 基于第二点,首屏加载3秒完成或使用Loading 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB Mobile侧因手机配置原因,除加载外渲染速度也是优化重点 基

前端性能优化及技巧_javascript技巧

    前言        为什么要优化性能对于前端工程师如此重要           在行业内有句话不知道大家有没有听说过,'懂得性能优化并且研究过jquery源代码的人和不懂得性能优化写出来的代码对于性能的消耗会相差上百倍甚至上千倍',现在的javascript属于从ECMAscript3到ECMAscript5以及ECMAscript6的一个过渡的过程.在javascript的编写不健全的时候编写代码方法不得当,引起的问题也是不容忽视的.     性能优化     下面将自己对于性能优化的

丰趣海淘:跨境电商平台的前端性能优化实践

原文出自[听云技术博客]:http://blog.tingyun.com/web/article/detail/586 随着互联网的发展,尤其是在2000年之后浏览器技术渐渐成熟,Web产品也越来越丰富,这时我们被浏览器窗口内的丰富"内容"所吸引,关注HTML/CSS,深入研究Dom.Bom和浏览器的渲染机制等,接触JavaScript库,"前端"这个职业,由此而生. 前端技术在这10多年中飞速发展,到了今天,我们可能发现"内容"的美在视觉上是有

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要考虑三方面: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机-内核. 多年前我们一直为IE6兼容烦恼,为它没少加

5173首页前端性能优化实践

从制定计划,到前后端的开发,最后到测试以及上线,历时4个月,5173首页前端性能优化项目终于顺利上线,并达到了预期的性能优化目标.这次的项目并不是改版,而是原来首页的设计和功能不变,只做重构和优化.虽然项目名叫前端的性能优化,但也并不仅仅是前端单方面的工作,要想彻底的把优化做好,就需要前后端的通力配合. 历史背景 老首页应该是09年上线的,首页也是各部门争夺资源的地方,大家都想在首页有一席之地,各部门在首页都有各自的小豆腐块,如果有新项目的上线,大多是打补丁的方式,并且唯一的规范就是能保证功能正