雅虎军规 - 前端优化

  1. 减少http请求数
    • 雪碧图合并
    • js合并 (一般合并到3~5个,css类似)
    • css合并
  2. 减少DNS查找次数
    • 不要在一个网站中有太多域
    • 用到CDN静态服务器
    • DNS预解析
// DNS 预解析
<mate http-equiv="x-dns-prefetch-control" content="on"/>
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
<link rel="dns-prefetch" href="http://nsclinck.baidu.com" />

  1. 尽量免去不必要的跳转,比如index跳转到home
    • 浏览器会把用户指向到Location中执行的URL中。
    • 301(永久移到新位置)和302(暂时移到新位置)都不会被缓存,除非加一个额外的头选项,Expires或则Cache-Control来指定它缓存。
    • meta元素的刷新标签和JS也可以实现URL的跳转,但是如果必须要跳转最好的方法就是使用3XXHTTP状态码,为了确保后退正确使用。
  2. 可缓存的AJAX
    • 就是我们进行一次AJAX请求后,把资源进行缓存。
    • 因为“异步”并不意味着“即时”
    • add an expires or a cache-control header
    • Nginx静态文件设置缓存
    • 其它几条同样适用ajax:
      • gzip压缩文件
      • 减少DNS查找数
      • 精简JS
      • 避免跳转
      • 配置ETags(这个也是后端来配置的,前端设置cache为true,缓存多久是通过请求报头设置的,前端通过beforSend里设置setRquestHeader,后端在response.expires里设置)link,如果不设置,后端直接吐就行
      • 注意:并不是前端在ajax里面设置cache:true就可以缓存了的,http1.0里面没实现,在2.0里面实现了。
    • 而且如果设置ajax请求的话尽量设置成get。16:15
  3. 推迟加载内容
    • 滑动加载
    • 移动端 模板(先吐最重要的)+异步加载 因为在移动端上发ajax比较耗时,这个就需要模板和后端共同配合把它吐出来,pc就无所谓了
  4. 预加载
    • 页面预加载link
    • 有几种预加载方法:
      • 无条件预加载:触发onload事件时,直接加载额外的页面内容。预加载学比如
      • 有条件预加载:根据操作去预加载相应的内容。
      • 有预期的加载:重新设计过的页面加载很慢,因为之前有过完整的缓存,这时就可以在新站访问之前就加载一部分内容来避免这种结果的出现。
  5. 减少DOM元素数
  6. 根据域名划分页面内容
    • 由于DNS查找,确保使用的域名数在2~4个之间。
  7. 使iframe的数量减少
    • 优点:1、解决加载缓慢的第三方内容如图标和广告等的加载问题。2、并行加载脚本
    • 缺点:1、即时内容为空,记载也需要时间。2、会阻止页面加载。3、没有语义
  8. 不要出现404错误
  9. 使用内容分发网络
*   CDN
*   上线我的css、js、img不能和你的代码放到一起,一定要放到静态服务器上,让用户最快的访问到
  1. 为文件头指定Expires或cache-Control
*   对于静态内容:设置文件头过期时间Expires的值为“Never expire”(永不过期)
*   对于动态内容:使用恰当的cache-Control文件头来帮助浏览器进行有条件的请求
*   Etag是可以动态调的更加灵活,而这个是设了多久就是多久,记得加上版本号。
  1. Gzip压缩文件内容 gzip
  2. 配置ETag
  3. 尽早刷新输出缓存(模板加载完就用flush吐出,现在常用中间层来做。后台只去做和数据库有关的东西)
  4. 使用GET来完成AJAX请求
*   因为post会分两步走,先发送文件头,再发送数据,而且post
*   get直接放到URL上发走了,IE上URL请求不能超过2k
*   但是一个有趣的不同是,get意味着获取数据,post意味着发送数据
  1. 把样式表置于顶部
  2. 避免使用css表达式
  3. 使用外部js、css文件
  4. 削减JS和CSS
  5. 用<link>代替@import
*   应为import是串行的,会阻塞
  1. 避免使用滤镜
*   IE属性独有的AlphaImageLoader,用于修正7.0以下版本
  1. 把脚本置于底部
  2. 剔除重复脚本
*   两个jQuery.js
  1. 减少DOM访问
*   取到一个button元素,尽量把它缓存起来
  1. 开发智能事件处理程序
*   使用代理,用DOMready代替onload
  1. 减少cookies体积
  2. 对于内容页面使用无cookie域名
  3. 优化图像(压缩)
*   使用imagemagick获取多少种颜色,尝试把gif压缩成png,除了动画用gif
  1. 优化CSS Spirite
  2. faicon.ico要小而且可缓存
*   最好小于1k,给它设置Expires文件头做缓存
  1. 保持单个内容小于25k
  2. 打包组件成复合文本
*   js和css写在一起,*.jscss 现在网络发展已经用的不多了
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,204评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,091评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,548评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,657评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,689评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,554评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,302评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,216评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,661评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,851评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,977评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,697评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,306评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,898评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,019评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,138评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,927评论 2 355

推荐阅读更多精彩内容

  • 网站优化离不开前后端的互相协作,但是对于前端工程师来说,在保证后端技术方案不变时,能不能只利用前端技术来优化网站呢...
    留七七阅读 6,323评论 0 31
  • Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列...
    拉风的老衲阅读 1,848评论 0 1
  • 从雅虎军规看前端性能优化 本文参考雅虎前端的性能优化,如何让页面加载更快,雅虎给出了多个规则,原文地址:Best ...
    含含要暴怒阅读 219评论 0 1
  • yahoo军规一共分8个部分共35条: 内容部分: 1. 尽量减少HTTP请求数 80%的终端用户响应时间都花在了...
    revert阅读 4,723评论 0 2
  • 1.感恩今天小燕叫我起床,跟我一起坐车车去店里,还帮我给了车费,感恩。 2.感恩兴姐今天关心我,问我吃早餐没?非常...
    a01e337c9fe8阅读 261评论 0 0