前端页面优化

前端性能测试和调优

讲到性能测试,除了后台的之外,还有一部分是前台的性能测试,前端的性能测试这里主要需要尊从以下规定。

前端性能调优指南

雅虎23条

  1. Minimize HTTP Requests 尽可能少的http请求
    http请求是要耗时的,想办法减少请求数自然可以提高网页速度。常用的方法,合并css,js以及 Image maps和css sprites等。

  2. Use a Content Delivery Network 使用CDN
    将一些静态资源放到CDN上,我不记得在哪个小网站上看到说浏览器下载资源一次性在同一域名下能够并发下载6个,所以使用不同的CDN服务,能够提升并发的下载速度。

  3. Avoid empty src or href 避免空的src和href
    当link标签的href属性为空、script标签的src属性为空的时候,浏览器仍让会去请求这个空的地址,从而造成浪费

  4. Add an Expires or a Cache-Control Header添加Expire/Cache-Control 头
    现在越来越多的图片,脚本,css,flash被嵌入到页面中,当我们访问他们的时候势必会做许多次的http请求。其实我们可以通过设置Expires header 来缓存这些文件。Expire其实就是通过header报文来指定特定类型的文件在览器中的缓存时间。大多数的图片,flash在发布后都是不需要经常修改的,做了缓存以后这样浏览器以后就不需要再从服务器下载这些文件而是而直接从缓存中读取,这样再次访问页面的速度会大大加快。

  5. Gzip Components启用Gzip压缩
    Gzip的思想就是把文件先在服务器端进行压缩,然后再传输。这样可以显著减少文件传输的大小。

  6. Put StyleSheets at the Top 把css放在顶部
    css,全称Cascading Style Sheets (层叠样式表单),说简单点,css主要是用来设置网页的样式、框架。浏览器的渲染是从上往下进行的,把CSS放在顶部,浏览器会首先进行渲染css,这样给用户看到的就是一个有框架的页面,而不是以前那种当网络大姨妈的时候,挤在一坨了。

  7. Put Scripts at the Bottom 把JS放在底部
    JS放在底部,这是因为js下载时候会独占资源,也就是说当下载js时候,浏览器是无法下载其他的资源的。所以把js放在底部,不会影响到其他的资源的下载。

  8. Avoid CSS Expressions 避免使用css表达式

  9. Make JavaScript and CSS External 将CSS和JS放到外部文件中
    将css和js放在外部文件中的就是为了能够缓存下来

  10. Reduce DNS Lookups 减少DNS解析
    查找DNS是需要花费时间的,经验的总结是至少需要20毫秒左右的时间。在此期间,浏览器是无法下载其他任何内容资源的。所以浏览器会想办法对DNS的查找结果进行缓存。而除了浏览器的缓存之外,操作系统(例如Windows)也会对DNS查询的结果做缓存。只不过,由于浏览器使用太过频繁,目前的主流浏览器都使用自己独有的缓存,而不使用操作系统的缓存。
    yahoo的建议一个页面所包含的域名数尽量控制在2-4个。

  11. Minify JavaScript and CSS 压缩js和CSS
    压缩js和css的左右,减少页面字节数。容量小页面加载速度自然也就快。而且压缩除了减少体积以外还可以起到一定的保护左右。唯一的后果就是会造成代码的可读性降低。

  12. Avoid Redirects 减少重定向
    这个就不用多说了,每重定向一次就会增加一个请求

  13. Remove Duplicate Scripts 移除重复的js代码
    重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。

不仅是要做到不重复,更是要做到可重用。

  1. Configure ETags 配置Etags
    Etags相当于一个网页的指纹一样,它用来判断浏览器缓存里的元素是否和原来服务器上的一致。我们可以通过抓包来查看是否配置有etag,后面会简单的说一下etags

  2. Make AJAX Cacheable 可缓存ajax
    即使AJAX是动态产生的而且只对一个用户起作用,他们依然可以被缓存。

It’s important to remember that “asynchronous” does not imply “instantaneous”.(记住“异步”不是“瞬间”这一点很重要)

  1. Use GET for AJAX Requests 使用get方式完成ajax请求
    (ajax请求实际上就是把body的东西动态的进行替换,造成前端页面没有刷新的假象)
    这个就比较好理解了,使用get请求完成ajax请求只需要一步就可以把参数传过去,但是使用post请求分两步
  2. Reduce the Number of DOM Elements 减少DOM元素
    页面上的dom节点尽可能的少
  3. No 404s 避免404
    站点本身里(非搜索结果)出现404页面,无意义的404页面会影响用户体验并且会消耗服务器资源。
  4. Reduce Cookie Size 减少cookie的大小
    减小cookie的大小,每一次请求都会把cookie发送到后台
  5. Use Cookie-Free Domains for Components使用无cookie的域
  6. Avoid Filters不要使用滤镜
    滤镜是什么,我特么也不知道,据说是一个会在ie上比较慢的东西
  7. Do Not Scale Images in HTML 不要在HTML中缩放图片
    不要在html中缩放图片,尽可能的就是页面需要多大的图片就给多大的图片
  8. Make favicon.ico Small and Cacheable
    是图标尽可能的小,并且可以被缓存起来。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容

  • 冰霜雪月忆旧游, 悲欢何以上眉头。 暑去寒来夜衔笔, 写风流。 叶落空阶留憾梦, 情牵词韵藏深愁。 当日少年成幻影...
    逸塵居士阅读 203评论 0 0
  • 四天的长假对我而言好像就是疯狂一天,休息一天的节奏,只因昨日和闺蜜聊天又聚一起小嗨了一下,头晕了一天,如果问我为什...
    飘在温哥华阅读 179评论 0 0
  • 姓名:盈诺 角色:观察员 主题:不安于角色 打卡第7天 2018年7月31日星期二 我的感受:好像收获了很多,但不...
    榴莲小诺阅读 120评论 0 1
  • 美好的时光总是那么的短暂,来不及去回味就已经来到了新的一年。对新的事物我们总会保留着十分的热情,拥有着足以让自己燃...
    你好涵阅读 178评论 0 0