文档章节

前端性能优化

L
 LorinLuo
发布于 2015/03/10 14:21
字数 1708
阅读 147
收藏 17

1 前端优化必要性

随着互联网的发展,前端优化越来越被人们重视,在一个大型的大型电子商务网站技术架构中,前端架构一定是一项必不可少的工作,国内几个大型的互联网公司也有非常强大的前端技术人员。在业界享有名气淘宝UED团队就有好几十人。在浏览器访问一个网站时,有10%-20%的时间是花在下载HTML上面,有80%-90%时间是花在下载页面中所有组件上面。如果我们可以把后端时间缩短一半,整体响应时间只能减少5%-10%。然而我们关注前端,同样是其响应时间缩短一半,那整体性能能减少40%-45%。

看些研究数据:

  • Amazon 慢 0.1 s -> 1% 用户放弃交易

  • Google 慢 0.4s ->  0.6% 放弃搜索

  • Yahoo! 慢 0.4s ->  减少 5%-9% 的流量

  • Bing 慢 2s ->  收入下降 4.3 %

2 前端优化最佳实践

在前端发展了那么长时间,其优化经验也有很多值得借鉴,下面作简单介绍。

2.1 14条优化军规

  1.          尽可能的减少HTTP请求数

  2.          使用CDN

  3.          添加Expires头(或者 Cache-control)

  4.          Gzip 组件

  5.          把CSS样式放在页面的上方。

  6.          将脚本放在底部(包括内联的)

  7.          避免在CSS中使用Expressions

  8.          将javascript和css独立成外部文件

  9.          减少DNS查询

  10.      压缩JavaScript和CSS文件 (包括内联的)

  11.      避免跳转

  12.      移除重复的脚本

  13.      配置 ETags

  14.      缓存Ajax请求

以上内容在网上都有介绍,在此不作多说,有兴趣的同学可以google一把。

2.2 拆分初始化负载

Ajax和动态HTML的日益普及网页上面的js和css也变得非常庞大,web程序也变得像桌面程序一样,很大一部分代码不会在启动时候使用,而是采取插件式架构,允许动态加载模块。

         在一个大型结构复杂的网页上面,为了不影响用户体验,可以把js分为两部分,一部分是渲染页面必须的,剩下是一部分。这样也在一定程度上面提高用户体验,给用户第一时间看到完整的页面。再寻找哪些js可以被拆分,可以通过一些辅助工具来判断,firebug就是一个非常好的工具,可以通过查看哪些函数onload之前未被使用。通过判断可以把其中一部分拆分出来,但是有些不开始拆分,例如页面的错误处理和业务判断等js是不能拆分的,如果要拆分合理必将是一项严谨的工作。

2.3 无阻塞加载脚本

Js有两种方式被包含在页面中,一种是行内脚本,一种是外部脚本。对外面脚本浏览器在下载js或者执行脚本的同时不会下载其他内容,有时候这种情况是必要,但是却会影响页面其他展示,理想情况是不堵塞其他内容下载的方式来加载js。目前也有对应的技术,用得比较多的是XHR Eval,xhr注入,script ifram,script dom element,script defer document.write script Tag。具体使用情况要根据环境来定。

由于使用外部脚本,有人可能会想到把全部使用内部脚本,这种做法不可取,这样会增加页面大小,而且浏览器不会缓存js,少数内部脚本是可取的。但是大多情况下使用外部脚本,这样无论在团队开发,还是版本控制还会带来很大好处。

2.4 使用现成组件

现成开源的js组件很多,可以根据熟悉程度和业务应用性使用,jquery,yui,ext,dojo。如果自行开发,除非有强大团队,要不维护成本太高,而且功能不完善。

Prototype

惊艳,野性, 代码风格类Ruby,新手不易上手,文档缺乏

Jquery

乖巧 灵活 易用

Dojo

强大,复杂,笨重

它的设计初衷就是:不光只运行在浏览器的脚本环境中,甚至像pdf/rhino这些也拥有

脚本环境的地方也能使用

Yui

温顺,矫健,文档齐全,编码语法相对传统,封装的形式比较接近于Java

Ext

Ext:  野生,炫,侵入太强,适用于精英团队

 

2.5 针对Content优化

  1.          组件延迟加载

不可见的组件: 非当前的Tab,隐藏的图片

附加组件:动画,拖动

  1.          预加载组件

无条件的预加载(Google 首页的例子)

有条件的预加载(淘宝首页搜索提示功能的例子)

  1.          减少DOM元素个数

元素越多,下载的数据越多,JS操作DOM速度越慢

  1.          尽量少使用 iframe

  2. l  公共文件的重复加载

  3. l  浏览器的消耗

  4. 6 图片优化

  5. l  优化图片

尝试使用PNG,png拥有gif所有功能,还支持alpha透明,文件比较小,所以尽可能使用png格式图片。

删除图片的元数据,例如photoshop的元数据,这样在一定程度上能减少图片大小而不影响图片质量。

  • CSS sprites

可以把网站常用的小图片集合在一张图片中,通过Css定位到小图上面,从而减少http请求。

  • 不要在HTML中缩放图片  

<img width="100" height="100" src=“cat.jpg" />

3   怎么样才算足够快

  • 0.1秒

用户直接操作ui中对象的感觉极限。例如,用户直接选择表格的一列到该列高亮显示,或者反馈被选择的时间间隔。

  • 1秒

用户随意在计算机指令空间操作而无需过度等等时间的感觉极限。0.2-1.0的时间延迟会被用户注意到,会让用感觉到计算机正在对指令进行处理中。等待的时间过长,会让用户失去流畅的体验。

  • 10秒

用户专注于任务的极限,超过10秒的任何操作都要有一个进度指示器,以及有一个让用户中断操作,而且有清晰的标示方法。假设用户超过10秒后返回界面,他们将要重新适应。在实际工作中有些操作超过10秒是可以接受的,比如撤换操作任务。

换句话说js在执行如果超过0.1秒,会让人感觉到不平滑。如果超过1秒会让人感觉应用程序缓慢;超过10秒那么用户会非常沮丧。这些就是用于足够快的标准。


本文转载自:http://liriguang.iteye.com/blog/723870

L
粉丝 18
博文 166
码字总数 116776
作品 0
成都
程序员
私信 提问
前端性能优化:使用Array.prototype.join代替字符串连接

来源:GBin1.com 有一种非常简单的客户端优化方式,就是用Array.prototype.join代替原有的基本的字符连接的写法。在这个系列的第一篇中,我在代码中使用了基本字符连接: 但是下面这段代码中...

gbin1
2013/07/03
420
0
OneAPM x 腾讯 | OneAPM 技术公开课·深圳 报名:前端性能大作战!

「 OneAPM 技术公开课」由应用性能管理第一品牌 OneAPM 发起,内容面向 IT 开发和运维人员。云集技术牛人、知名架构师、实践专家共同探讨技术热点。 11月28日,OneAPM 技术公开课第五期将走进...

OneAPM蓝海讯通
2015/11/16
60
0
WEB前端性能优化基本套路

前言 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识。 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性...

32氪
2017/07/31
0
0
大话WEB前端性能优化基本套路

前言 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识。 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性...

SFLYQ
2017/07/14
0
0
何崚谈阿里巴巴前端性能优化最佳实践

转载:http://www.infoq.com/cn/interviews/hl-alibaba-front-end-performance-optimization 大家好,我现在在阿里巴巴园区采访阿里巴巴中文站架构师,兼B2B网站优化领域的负责人何崚。何崚你...

晨曦之光
2012/03/09
248
0

没有更多内容

加载失败,请刷新页面

加载更多

硬件配置

https://akkadia.org/drepper/futex.pdf sudo lshw -businfo[sudo] lambda 的密码: Bus info Device Class Description======================================......

MtrS
今天
2
0
springmvc的return “success”源码解读

qqqq

architect刘源源
今天
5
0
Java程序员五面阿里分享 逆袭成功 太不容易了!

前言 拿到阿里实习offer,经历了5次面试,其中4轮技术面,1轮HR面试。在这里分享一下自己的面试经验和学习心得。希望能够帮助更多的小伙伴。 我本科毕业于中南大学信管专业,真正开始学习Jav...

别打我会飞
昨天
4
0
Android Camera模块解析之视频录制

《Android Camera架构》 《Android Camera进程间通信类总结》 《Android Camera模块解析之拍照》 《Android Camera模块解析之视频录制》 《Android Camera原理之CameraDeviceCallbacks回调模...

天王盖地虎626
昨天
2
0
手把手教你使用issue作为博客评论系统

自从上周在阮一峰的 每周分享第 60 期 看到了可以将 GitHub 的 issue 当作评论系统,插入第三方网页的 JS 库——utterances。我就对此“魂牵梦绕”。个人博客使用的是VuePress。 TLDR (不多废...

jump--jump
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部