前端性能优化小结

概述

提高性能,最简单也是最显著的方法就是:减少HTTP请求的数量。每一个HTTP请求除了有TCP开销外,还包含大量的头信息。保持最小的独立请求连接数可以保证用户的页面加载速度更快。让页面和其资源文件保持较小的体积将减少网络用时——对任何互联网应用而言,这才是真正的瓶颈。基于MVC的JavaScript Web富应用开发

合并型优化

  • 将多个脚本合并为一个脚本, 将多个CSS合并为一个样式表,minify github
  • 使用CSS Sprites技术合并多张小图为一张大图。

感受型优化

理解浏览器下载资源也很重要,为了加速页面渲染,浏览器并行下载所需的资源,但是对于外部脚本并非如此。

当浏览器开始下载外部脚本时,在外部脚本下载、解析并执行完毕之前,不会下载其他内容。

  • 几乎每一个前端程序员都知道应该把script标签放在页面底部。
  • 还有一种方法是设置defer属性——告诉浏览器该脚本不会在页面加载完成之前操作DOM, 类似于在脚本中使用window.onload事件<script src="foo.js" type="text/javascript" charset="utf-8" defer></script>。这样实际上并没有对下载的速度,下载的数量做出优化,但是用户会提前看到页面的内容与相应的样式,提高感受速度。

就近存储型优化

  • 缓存: 通过设置Expires头以保证缓存长时间有效,同样重要的有如何自动使缓存失效(在需主动修改静态资源时),一种有效的技术就是——在引用资源文件的URL查询参数中添加文件修改的时间<link rel="stylesheet" href="master.css?1296085785"> Expires 的升级版Cache-Control浏览器 HTTP 协议缓存机制详解

  • 使用CDN,内容分发网络(Content_delivery_network)为你的站点提供静态资源内容服务,以减少它们的加载时间。使用就近的服务器响应资源。

内容分发网络节点会在多个地点,多个不同的网络上摆放。这些节点之 间会动态的互相传输内容,对用户的下载行为最优化,并借此减少内容供应者所需要的带宽成本,改善用户的下载速度,提高系统的稳定性。
内容分发网络所需要的节点数量随着需求而不同,依照所需要服务的对象大小,有可能有数万台服务器。

压缩型优化

  1. 浏览器发送Http request 给Web服务器, request 中有Accept-Encoding: gzip, deflate。 (告诉服务器, 浏览器支持gzip压缩)
  2. Web服务器接到request后, 生成原始的Response, 其中有原始的Content-Type和Content-Length。
  3. Web服务器通过Gzip,来对Response进行编码, 编码后header中有Content-Type和Content-Length(压缩后的大小), 并且增加了Content-Encoding:gzip. 然后把Response发送给浏览器。
  4. 浏览器接到Response后,根据Content-Encoding:gzip来对Response 进行解码。 获取到原始response后, 然后显示出网页。

待续: 关于图片的优化

附雅虎14条

  1. 减少HTTP请求
  2. 使用内容分发网络
  3. 添加Expires头
  4. 压缩组件
  5. 将样式表放在顶部
  6. 将脚本放在底部
  7. 避免CSS表达式
  8. 使用外部JavaScript和CSS
  9. 减少DNS查找
  10. 精简JavaScript
  11. 避免重定向
  12. 删除重复脚本
  13. 配置ETag
  14. 使Ajax可缓存
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,376评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,126评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,966评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,432评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,519评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,792评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,933评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,701评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,143评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,488评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,626评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,292评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,896评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,324评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,494评论 2 348

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,629评论 18 139
  • Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列...
    拉风的老衲阅读 1,837评论 0 1
  • 网站优化离不开前后端的互相协作,但是对于前端工程师来说,在保证后端技术方案不变时,能不能只利用前端技术来优化网站呢...
    留七七阅读 6,310评论 0 31
  • 大叔好暖心,因为是末班车,所以他说每一站多停一会儿,希望我不要介意。 怎么会呢。 我多想车就这么一直...
    陈旧啊阅读 528评论 0 3
  • 清明前夜,9点37分,第六次逛“馋房”,几近虚脱,撑着细若游丝的气力身手去够卷纸,颤抖、颤抖、持续颤抖……就要够到...
    如意糖阅读 92评论 1 0