`
lirig
  • 浏览: 237588 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

大型电子商务网站架构之-前端优化

    博客分类:
  • Web
阅读更多

 

 

1 前端优化必要性

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

看些研究数据:

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

l  Google 0.4s ->  0.6% 放弃搜索

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

l  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.         javascriptcss独立成外部文件

9.         减少DNS查询

10.     压缩JavaScriptCSS文件 (包括内联的)

11.     避免跳转

12.     移除重复的脚本

13.     配置 ETags

14.     缓存Ajax请求

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

2.2 拆分初始化负载

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

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

2.3 无阻塞加载脚本

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

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

2.4 使用现成组件

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

Prototype

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

Jquery

乖巧 灵活 易用

Dojo

强大,复杂,笨重

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

脚本环境的地方也能使用

Yui

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

Ext

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

 

2.5 针对Content优化

1.         组件延迟加载

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

附加组件:动画,拖动

2.         预加载组件

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

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

3.         减少DOM元素个数

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

4.         尽量少使用 iframe

l  公共文件的重复加载

l  浏览器的消耗

2.6 图片优化

l  优化图片

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

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

l  CSS sprites

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

l  不要在HTML中缩放图片  

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

3   怎么样才算足够快

l  0.1

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

l  1

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

l  10

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

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

 

 

 

 

 

16
15
分享到:
评论
1 楼 flyer2010 2010-07-29  
你说淘宝首页底部的热卖推荐是浏览器滚动条滑动到该模块时才加载出来的,采用了数据延迟加载,采用的什么组件啊,透露一下 

相关推荐

    电子商务能手PHP&MySQL电子商务网站架构案例

    通过阅读《电子商务能手PHP & MySQL电子商务网站架构案例》,读者不仅可以掌握PHP和MySQL的基础知识,还能了解到实际电子商务项目中的常见问题和解决方案,从而具备独立开发或参与大型电子商务网站项目的能力。...

    电子商务设计概要--软件设计

    电子商务系统的架构通常包括前端展示层、业务逻辑层、数据访问层。前端展示层负责与用户交互,业务逻辑层处理业务规则和计算,数据访问层则负责数据的存储和检索。 4.1.1 Struts体系结构 Struts是一种常用的MVC...

    高性能电子商务平台构建+架构、设计与开发

    该书首先会介绍电子商务平台的基本架构,涵盖前端展示层、业务逻辑层、数据存储层以及它们之间的交互。这一部分将详细讨论如何设计高效的分布式架构,以实现负载均衡、减少延迟并提高可用性。 在架构设计方面,书中...

    大型网站技术架构-核心原理与案例分析.pdf

    淘宝作为中国最大的电子商务平台之一,其技术架构经历了多次重大变革。最初阶段主要依赖于单体架构模式,随着业务量的激增和技术的进步,逐渐转向微服务化改造,实现了服务的解耦和独立部署。此外,还利用容器技术和...

    各类大型网站架构图

    同时,为了应对高流量,电子商务架构还会采用负载均衡、分布式数据库和云计算等技术。 再者,"百度架构"展示了搜索引擎巨头如何处理海量的数据和用户的搜索请求。百度的架构可能包括爬虫系统、索引构建、查询处理、...

    电子商务网站的平台架构.docx

    电子商务网站的平台架构是构建在线商业活动的核心,它涉及到网站的前端展示、后端管理、数据处理、用户体验等多个关键方面。本文主要介绍了琪缘科技公司的电子商务平台,该平台以其丰富的实战经验、全面的功能覆盖...

    京东交易架构演进-高可用服务的保障-杨超

    京东是中国著名的电子商务公司,随着业务量的激增和用户需求的提升,其交易平台架构也在不断演进,以保障高可用性和应对高并发场景。架构师杨超在分享中详细阐述了京东交易架构的演进历程,重点讲述了大促中的技术...

    电子商务网站建设配套源代码及PPT

    同时,可能会提及性能优化、负载均衡和容错机制,这些都是大型电子商务网站必须考虑的问题。在实际项目中,还可能涉及API接口设计,以便与其他系统或服务集成,例如支付网关、物流跟踪等。 总的来说,这个资源包...

    javaweb整合开发:电子商务系统源码

    在JavaWeb领域,整合开发是实现复杂业务应用的关键步骤,特别是在构建像电子商务系统这样的大型项目时。本资源“javaweb整合开发:电子商务系统源码”提供了一个完整的电子商城系统的实例,旨在帮助开发者深入理解...

    关于PHP电子商务网站的开题报告

    然而,竞争也随之加剧,如何通过技术创新、优化用户体验、提升服务质量,使PHP电子商务网站在市场中脱颖而出,是项目面临的挑战。同时,考虑到数据安全、隐私保护和法律法规遵守,也是开发过程中不容忽视的重点。 ...

    电子商务网站毕业设计论文,ppt等

    标题中的“电子商务网站毕业设计论文,ppt等”表明这是一个关于电子商务网站开发的综合学习资源,可能包括了理论研究、系统设计、源代码实现以及演示文稿等内容,适用于毕业设计或项目参考。描述中的提示暗示了这份...

    高性能电子商务平台构建 架构、设计与开发

    在构建高性能的电子商务平台时,架构、设计与开发是三个至关重要的环节。这些元素共同决定了平台的稳定性、可扩展性、安全性和用户体验。下面将详细探讨这些知识点。 首先,架构设计是电商平台的基础,它决定了系统...

    B2B仿阿里巴巴电子商务网站项目方案文档

    "B2B仿阿里巴巴电子商务网站项目方案"旨在构建一个类似阿里巴巴的在线平台,为企业提供高效、便捷的交易环境。 1.1 背景 随着互联网技术的飞速发展,电子商务已经成为企业拓展市场、提高效率的重要工具。阿里巴巴...

    Vue多用途电子商务商店网站模板源代码

    13. **SEO优化**:对于电子商务网站,搜索引擎优化(SEO)非常重要。模板可能采用了Vue Server-Side Rendering (SSR) 或预渲染技术(如Nuxt.js),提高SEO性能。 14. **国际化(i18n)**:如果模板面向全球市场,可能...

    ASP电子商务网站源码

    总的来说,这个ASP电子商务网站源码提供了一个基础的在线购物平台架构,涵盖了电子商务网站的基本功能。开发者可以根据实际需求进行定制和扩展,如集成更强大的数据库系统(如MySQL或SQL Server)、优化性能、增强...

    淘宝前端架构

    淘宝作为中国最大的电子商务平台之一,其前端架构在处理海量用户访问、复杂业务逻辑以及高性能需求方面具有独特的优势。本文档旨在解析淘宝前端架构中的关键组成部分及其设计理念,尤其关注于JavaScript在其中的应用...

    电子商务系统的开发(Mysql的是数据库和java,jsp开发语言)还有网页设计

    在电子商务系统中,我们需要设计合理的数据库架构,包括用户信息表、商品信息表、订单表、支付信息表等,以满足业务需求。同时,还需要考虑数据安全、性能优化和扩展性等问题。 Java作为后端开发语言,以其“一次...

    于基j2ee平台电子商务系统--毕业设计.doc

    然而,J2EE平台因其可扩展性、安全性和跨平台性,成为了开发大型、复杂电子商务系统的首选。 1.2 系统实现的目标 本系统旨在创建一个动态的网上购物平台,用户可以浏览商品、添加到购物车、完成支付等操作。同时,...

    大型网站技术核心原理与案例分析.pdf

    - 提供不同行业大型网站的成功案例,例如社交媒体、电子商务、在线游戏等。 - 分析这些网站在技术选型、架构设计、运维管理等方面的具体实践。 - 探讨它们是如何克服特定挑战,并实现业务目标的。 以上知识点...

Global site tag (gtag.js) - Google Analytics