<i id='gellipnx'><tr id='q29zgkxh'><dt id='ghovohh9'><q id='tqwfpk5y'><span id='b3ppv23r'><b id='aejal6s8'><form id='li4xjotu'><ins id='qdhsy7k6'></ins><ul id='k9odii66'></ul><sub id='f9wxa964'></sub></form><legend id='jepv5cgw'></legend><bdo id='mw57d0t7'><pre id='r99aldu9'><center id='0bdirjni'></center></pre></bdo></b><th id='ll8hrhys'></th></span></q></dt></tr></i><div id='uklkxyzw'><tfoot id='cmfrj4yq'></tfoot><dl id='4xr855ek'><fieldset id='sjwd4y79'></fieldset></dl></div>

      <tbody id='bxr34pct'></tbody>

  1. <small id='5ckk76vx'></small><noframes id='sopgf1g8'>

    <tfoot id='hw7jkipt'></tfoot>
  2. <legend id='clfz78hw'><style id='fwitm8fl'><dir id='o116regl'><q id='indjd8u7'></q></dir></style></legend>

      网站建设公司当前位置 : 网站建设公司 > 知识普及

      前端优化必要性

      发布时间:2021-10-11 11:02   浏览次数:次   
      随着互联网的发展,前端优化越来越被人们重视,在一个大型的大型电子商务网站技术架构中,前端架构一定是一项必不可少的工作,国内几个大型的互联网公司也有非常强大的前端技术人员。在业界享有名气淘宝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条优化军规
               尽可能的减少HTTP请求数
       
               使用CDN
       
               添加Expires头(或者 Cache-control)
       
               Gzip 组件
       
               把CSS样式放在页面的上方。
       
               将脚本放在底部(包括内联的)
       
               避免在CSS中使用Expressions
       
               将javascript和css独立成外部文件
       
               减少DNS查询
       
           压缩JavaScript和CSS文件 (包括内联的)
       
           避免跳转
       
           移除重复的脚本
       
           配置 ETags
       
           缓存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优化
               组件延迟加载
       
      不可见的组件: 非当前的Tab,隐藏的图片
       
      附加组件:动画,拖动
       
               预加载组件
       
      无条件的预加载(Google 首页的例子)
       
      有条件的预加载(淘宝首页搜索提示功能的例子)
       
               减少DOM元素个数
       
      元素越多,下载的数据越多,JS操作DOM速度越慢
       
               尽量少使用 iframe
       
      l  公共文件的重复加载
       
      l  浏览器的消耗
       
      6 图片优化
      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秒那么用户会非常沮丧。这些就是用于足够快的标准。
       
      • <small id='zuwo3ig5'></small><noframes id='xx9fd2z5'>

        <legend id='5b1yxsiz'><style id='2y0t1evg'><dir id='h535sxcw'><q id='c702gu3t'></q></dir></style></legend>

          <i id='cj27e7he'><tr id='3l6ftdpa'><dt id='ijiavzj1'><q id='mknuqqxa'><span id='yc3q826r'><b id='lonkghyg'><form id='50cmkmtp'><ins id='xxzjm01h'></ins><ul id='kerp4r9k'></ul><sub id='kf0f76cy'></sub></form><legend id='40p484g6'></legend><bdo id='lf3ww6sr'><pre id='a12zpbik'><center id='hdg3exwa'></center></pre></bdo></b><th id='28ykh2as'></th></span></q></dt></tr></i><div id='rikl43so'><tfoot id='gd5aa4q8'></tfoot><dl id='j9p1x5dd'><fieldset id='u0hmwr3p'></fieldset></dl></div>
              <tbody id='kc0whyl9'></tbody>
            <tfoot id='wn8bku69'></tfoot>

            本文来源于网络,若有侵权请联系3449817223#qq.com,将在第一时间删除。

            <tfoot id='6ktxrxcx'></tfoot>

              <tbody id='v91n99v9'></tbody>

          • <small id='w0otwggh'></small><noframes id='scc8k581'>

            <legend id='qsbqawkw'><style id='tumgqz58'><dir id='2cxlqvwq'><q id='nfe0txb2'></q></dir></style></legend>
              • <i id='6gf1wnbn'><tr id='s3xvjq3n'><dt id='hibeuuaz'><q id='7kur2x2j'><span id='xrrn71kh'><b id='thxoindu'><form id='ptsotkvs'><ins id='w5vch0xj'></ins><ul id='a8thr1hq'></ul><sub id='49975y9p'></sub></form><legend id='bdrax7qf'></legend><bdo id='6hnz3sb1'><pre id='s6io87le'><center id='w3f7111k'></center></pre></bdo></b><th id='t2n36go3'></th></span></q></dt></tr></i><div id='g0p4pl7f'><tfoot id='0sq4e3zz'></tfoot><dl id='rkdqw0c6'><fieldset id='k5coq0v6'></fieldset></dl></div>