精减代码 清除网页中一些冗余的代码,网上有这样的工具,可以辅助完成,如果需要的话,我们可以把代码中的注释去掉,甚至空行之类的也去掉,尽量的减少代码量,从而减小页面体积. CSS Sprites 通俗点讲,就是图片合并,可以把网站中一些比较通用的小图片,合并到一张图片上,然后利用CSS技术来分别调用图片不同的部分.这样可以大大的减少HTTP的请求量,在网页加载的时候,速度就快很多,现在很多大中型网站都在用这个前端加速技术,效果也是很不错的. 为图片指定宽度与高度 这也是很多人比较容易忽略的,在页面…

单页or多页 本文仅代表个人观点,不足请见谅,欢迎赐教. webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,webapp究竟是好还是不好真是一言难尽哟! webapp使用JavaScript修改页面:紧接着再从服务器传递更多数据然后再修改页面,如此循环. 从性能的角度看,在现代浏览器中单页面Web App已经能够和普通native应用程序相媲美,而且几乎所有的操作系统都支持现代的浏览器. 所以,很多人认为weba…

Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎PageSpeedYSlow 摘要:前端的性能对于Web应用的用户体验来说非常重要.不要以为你的Web应用的性能已经足够好了,其实还会有很多可以提升的地方.本文将介绍Google和雅虎关于前端优化的最佳实践以及工具,你可以逐一检验你的Web应用. 前端的性能对于一个Web应用来说非常重要,如果一个Web应用的…

原文网址: http://lunax.info/archives/3090.html Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献.广为人知的优化规则也由 13 条到 14 条,再到 20 条,乃至现在的 34 条–真是与时俱进啊.最新的 34 条也针对不同的角度做了分类. 面向内容的优化规则目前有 10 条. 1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条…

九.网站前端优化 – IMG 9.1.可以优化的图片 图片总共可以分为两类,一个是CSS IMAGES,另一个是产品图片. 9.2.CSS IMAGES CSS图片现在采用的方式是图片合并的方式,这样可以减少HTTP请求:初期的规划是网站最通用的图片合并到一张图片上,具体某张页面自己用到的,针对每张页面再合并一张图片,即一张页面除去插件里面带过来的背景图片外,最理想的情况是保留两张背景图.但是现在情况很不如意,主要原因有以下几点: 页面改动太频繁,很多原先合并好的图片一改再改后,会保留很多副本…

前端优化已经到极致了么?业务还在为看到不停的而揪心么?还在为2秒率不达标苦恼么? 好吧我知道答案,大家一如既往的烦恼中... 那么接下来我们看看,facebook,淘宝,人人网,一淘都是怎么做前端优化的,他们页面信息量比我们大的多. 前段时间泳洋和我提了flush技术,业界很多公司都在这么用.终于找时间来好好研究了一番,获得这个新名词----BigPipe,什么是BigPipe? 接着往下看. 1. 技术背景 FaceBook页面加载技术 试想这样一个场景,一个经常访问的网站,每次打开它的 页面…

此文转载自:http://mp.weixin.qq.com/s/6mVVKmqDL_xYl15AeoJTWg (原文地址) 围绕前端的性能多如牛毛,涉及到方方面面,以下我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列.注意,是罗列不是展开,遇到不会不懂的点还请站外扩展. 开车速度有点快,坐稳了. tips : 这么多前端优化点你都记得住吗?反正我是收藏起来备查的. PC浏览器前端优化策略 PC端优化的策略很多,如 YSlow(YSlow 是 Yahoo 发布的一款 Firefox 插件,现…

前言 上周我与阿里的宇果有一次技术的交流,然后对天猫H5站点做了一些浅层次的分析,后面点时间基本天天都会有联系,中途聊了一些技术细节.聊了双方团队在干什么,最后聊到了前端优化.因为我本身参与了几次携程H5站点的优化,在这方面有一些心得,但是与宇果交流的过程中发现我们在优化的时候忽略了一些细节. 携程做优化的时候整个重心基本放到了尺寸的缩减,和宇果的交流过程中他提出了渲染优化,其实渲染优化无非是减少回流,对于减少回流我们也有一些概念,我一直认为这个事情应该业务开发关注而不是框架关注(事实上框架也无…

几年前,我们这样写前端代码: <div id="el" style="......" onclick="......">测试</div> 慢慢的,我们发现这样做的很多弊端,单就样式一块,改一个样式会涉及到多处调整,所以慢慢的dom标签中的css全部去了一个独立的css文件 再后来,交互变得异常复杂,onclick也不好使了,所以js也分离开了,经典的html+css+javascript结构分离逐步清晰,三种代码各司其职…

本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别是硬件采购的成本都由总公司来承担,当然互联网业务上的市场营销成本这块还是由该事业部自己承担,可是网站一年运维下来,该公司发现该事业部里最大的成本居然不是市场营销的开销,而是短信业务和宽带使用上的开销,是不是有点让人感到意外呢?下面我来分析下这个场景吧. 短信这块是和通讯运营商有关,很难从根本上解决,…

Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳的预期效果,今天我在这里分析下浏览器和服务端通讯的一些细节问题,希望通过分析这些细节问题,能给大家一个启迪,能更好的理解这些优化原则背后的隐秘,最终能更好的运用这些原则. 网站的通讯技术是构建在http协议上,http协议底层通讯手段使用的是tcp/ip协议,但是tcp通讯协议在建立连接和断开连接这…

网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属于web前端的技术范畴,要回答清楚这个问题我们要明确下网站应用的本质到底是什么?网站的本质其实就是BS,这里的BS我没有带上架构二字,而就是指Browser和Server即浏览器和服务器,而网站静态化技术的作用目标就是让客户端即浏览器的用户体验更好,但是如果我们想让网站在浏览器上运行的更快,在更快的…

1,困惑 做web项目,对于开发者来说,一个最头痛的问题就是浏览器缓存,有缓存,js更改了,html更改了,发布服务器以后用户往往无法通过浏览器访问到最新的类容,需要用户主动去刷新页面, 因为一直做企业后台管理,针对人少的公司直接通知刷新页面(这也是做内部系统才敢这么给用户说),超千人的公司,跨省跨国的,就直接会被劈了,网上有很多解决方案,比如在js上添加版 本号这个方法可行,因为浏览器的缓存机制是针对是针对url来缓存的,比如添加:"http://test.com/test.js?verson…

雅虎给出了前端优化的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像). Minimize HTTP Requests 减少http请求 图片.css.script.flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间. 把多个JS.CSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,利用 CSS sprites 将小图拼合后利用background来定位. Use a Content D…

本文转自:http://www.cnblogs.com/parry/archive/2011/01/28/Reduce_Http_Request_Using_Combres_For_Js_Css.html 在前端优化的各种金律铁规中,“减少客户端对资源的请求”都会在其中出现,刚好最近对网站做一些优化,使用了一下Combres组件,有点心得,遂整理成文. 园子中也有几篇Combres组件的介绍,如:Combres库学习小结以及部分源码分析和使用Combres 库 ASP.NET 网站优化.可部署时…

RequireJS Optimizer 是 RequireJS 自带的前端优化工具,可以对 RequireJS 项目中的 JavaScript & CSS 代码使用 UglifyJS 或者 Closure Compiler 进行压缩合并.这篇文章介绍RequireJS Optimizer 的使用和配置方法,帮助大家解决使用中碰到的问题. 您可能感兴趣的相关文章 12款很棒的浏览器兼容性测试工具推荐 2012年最佳 Web 前端开发工具和框架 构建杀手级应用 JavaScript 工具和技术 推荐…

前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加载时间,但其实性能不仅仅是指加载时间,还包括浏览器性能.网络性能.开发效率.在Web前端开发中,性能是一个非常重要的需要考虑的点.本文将介绍一些开发原则和性能准则,这些都是提高Web前端性能的基础. 1. 开发原则 1.1 编写符合当代浏览器性能的代码如果想提高前端性能,就必须理解浏览器的工作原理,…

简介: Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器.Fiddler是以代理服务器的方式,监听系统的网络数据流动英语中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一样,可以让前端开发变得更加优雅. 它可以做什么? Fiddler是以代理服务器的方式,监听系统的网络数据流动,并在ie, 火狐下都可以安装哦(这个是最好的特点 呵呵) 它能 够记录所有的你电脑和互联网之间的http通讯,Fiddler 可以也可以让你检查所有的http通讯,设…

原文链接:http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_server_mobile.html Web 前端优化最佳实践最后一部分是针对移动应用的,其实只是针对 iPhone 的,目前只有两条规则. 1. 单个数据对象小于 25K (Keep Components under 25K) 这个似乎只是针对 iPhone 研究的.建议保持单个 Web 数据对象在 25 K 以下.为什么是 25K? Apple…

原文链接: http://lunax.info/archives/3101.html Web 前端优化最佳实践第六部分面向 图片(Image),这部分目前有 4 条规则.在最近的 Velocity 2008 技术大会上,Yahoo! 的 Stoyan Stefanov 做的 Image Optimization: How Many of These 7 Mistakes Are You Making 也非常有参考价值.结合一起说一下. 1. 优化图片 (Optimize Images) 使用 G…

原文链接: http://lunax.info/archives/3099.html Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条.前端优化最佳实践,最重要的还是”实践”,要理解这东西容易得很,关键是要去”实践”,去”执行”,去”反馈”,去获取受益. 1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom) 当一个脚本在下载的时候,浏览器干不了其它的事儿(串行了).所以,把它扔到最后面去处理.对于一些…

原文链接: http://lunax.info/archives/3097.html Web 前端优化最佳实践第四部分面向 CSS.目前共计有 6 条实践规则.另请参见 Mozilla 开发者中心的文章:Writing Efficient CSS 1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top) 官方的解释我觉得多少有点语焉不详.这一条其实和用户访问期望有关.CSS 放到最顶部,浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染.没有人喜欢等待…

原文链接: http://lunax.info/archives/3095.html Web 前端优化最佳实践第三部分面向 Cookie .目前只有 2 条实践规则. 1. 缩小 Cookie (Reduce Cookie Size) Cookie 是个很有趣的话题.根据 RFC 2109 的描述,每个客户端最多保持 300 个 Cookie,针对每个域名最多 20 个 Cookie (实际上多数浏览器现在都比这个多,比如 Firefox 是 50 个) ,每个 Cookie 最多 4K,注意这…

原文链接: http://lunax.info/archives/3093.html Web 前端优化最佳实践第二部分面向 Server .目前共计有 6 条实践规则.[注,这最多算技术笔记,查看最原始内容,还请访问:Exceptional Performance : Best Practices for Speeding Up Your Web Site] 1. 使用 CDN (Use a Content Delivery Network) 国内 CDN 的普及还不够.不过我们有独特的电信.网…

有关web前端优化的博文,博客园中有许多网友的博客中都有介绍,而且详细.精准.楼主打算写这个博客,算是对自己一年工作来的一个总结和积累有些知识从别的地方拷贝过来的,但是都审查过. 引言: 1. 慢的页面可能会网站失去更多的用户.2. 慢500ms意味着20%的用户将放弃访问(google)3. 慢100ms意味着1%的用户将放弃交易(amazon) 通过上面列举的三个数据,可以看到web前端优化的重要性,而作为程序员,总有一股矫情劲,希望将自己开发出来的东西能更加的完美.:) 一.减少Http请…

引言: 1. 慢的页面可能会网站失去更多的用户. 2. 慢500ms意味着20%的用户将放弃访问(google) 3. 慢100ms意味着1%的用户将放弃交易(amazon) 前段时间偶然看到网上的两篇关于前端优化的文章,其中大部分技巧都来自Yahoo的优化原则,这里是对两篇文章的摘抄和总结. 减少Http请求 一般来说,我们从变化性上把数据分成两种类型,变和不变.那么不变的数据可以缓存,变化的数据不能缓存,这是一个常识,也就是说要减少我们的 http请求次数这个目标可以转换成把数据分为变化和不…

先看一下IPTV相关情况: l 目前TPTV市场情况 a) 截止今年2月,全国IPTV总用户数达3630.2万,我国移动互联网用户规模接近9亿,人均月接入量近300M,8M宽带达半数,光纤近4成. 图 1我国整体数字电视转换情况 图 2各省数字电视用户规模及有线数字化程度 b) 今年 3 月通信业经济运行情况显示,三家基础电信企业电信业务总量完成1810.1 亿元,同比增长 22.7%,比同期增速高 7.7 个百分点: l 中国目前市场上电信IPTV机顶盒主要有:[标清]:华为.中兴.长虹.UT…

前言 有对象才叫跨年,没对象叫熬夜.所以,在这没对象的元旦假期的夜里捣弄了一下前端优化的东西.如果你听说过FaceBook,太好了,你肯定是个网 络潮人:如果你还听说过FaceBook的bigpipe,那么你多数和我一样是单身IT猿.很好,那么今天我就说说bigrender吧,你没看错,我 也没写错,我想讲的就是bigrender,前面讲的都是废话. 介绍 bigrender是前端优化的技术,从字面上都可以很清楚的理解这一技术特点.big(大)& render(渲染),如果翻译不对,请骂度娘.b…

web前端优化手段有很多,同种的优化方式或许在不同的网络协议会南辕北辙,下面就自己结合工作经验和学习总结的一些手段总结 1.合并文件减小请求数:sprite图片的合成.合并脚本与样式. 2.减小文件的大小:压缩代码(html.css.js),压缩图片(在美术和产品能接受的范围内),选择正确格式的图片(jpg/png). 3.cookie-free:将资源的站点都重定向到非页面站点,如:页面都是*.100bt.com,将资源站点都放在resource.a0bi.com站点. 4.多站点放置资源,绕…

网站静态化处理—web前端优化—下[终篇](13) 本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别是硬件采购的成本都由总公司来承担,当然互联网业务上的市场营销成本这块还是由该事业部自己承担,可是网站一年运维下来,该公司发现该事业部里最大的成本居然不是市场营销的开销,而是短信业务和宽带使用上的开销,是不是有点让人感到意外呢?下面我来分析下这个场景…