zoukankan      html  css  js  c++  java
  • 前端性能优化

    一、什么是前端性能优化

         从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。
     
    二、为什么要做前端性能优
      提升网站性能,提升用户体验
     
    三、前端性能优化的原则
      1、因地制宜
      2、不出bug
     
    四、从浏览器发起请求到页面能正常浏览都有哪些阶段
      预处理——>DNS解析——>建立连接——>发起请求——>等待响应——>接受数据——>处理元素——>布局渲染
     
    五、性能优化的具体方法
    一)内容层面
      1、DNS解析优化(DNS缓存、减少DNS查找、keep-alive、适当的主机域名)
      2、避免重定向
      3、切分到多个域名
      4、杜绝404
     
    二)网络传输阶段
      1、减少传输过程中实体的大小
      请减少HTTP请求基本原理:当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时,将会频繁的与服务器建立连接,与释放连接,这必定会造成资源的浪费,且每个HTTP请求都会对服务器和浏览器产生性能负担。解决方法:请看第二点。
          1)缓存
          2)cookie优化
          因为Cookie是本地的磁盘文件,每次浏览器都会去读取相应的Cookie,所以建议去除不必要的Coockie,使Coockie体积尽量小以减少对用户响应的影响;
          使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响;
          Cookie是有生命周期的,所以请注意设置合理的过期时间,合理地Expire时间和不要过早去清除coockie,都会改善用户的响应时间。
          3)文件压缩(Accept-Encoding:g-zip)
          图片数据最大关键是压缩图片
             1)图片的格式
             2)使用base64(转换为二进制编码)嵌入
                原理:引入图片路径,通过base64转换为二进制,(定义一个函数),在其中通过转换的编码canvas绘制出一个新的图片
             3)压缩图片和使用图片Sprite技术
                基本原理:
                注:其实压缩图片和图片精灵是两个方面的技术,可是既然都是关于图片的优化还是放到一块吧。
                现在由于工作的细分,专业的前端工程师已经少有机会去切图了,可是关于图片压缩还是得略微了解,一般图片压缩的方式有:
                  1.缩小图片分辨率;
                  2.改变图片格式;
                  3.降低图片保存质量
      2、减少请求的次数
          1)文件适当的合并
          2)雪碧图
      3、异步加载(并发,requirejs)
      4、预加载、延后加载、按需加载
      5、请正确理解 Repaint 和 Reflow
        注:Repaint 和 Reflow 也就是重绘和重排
        基本原理:
          Repaint(重绘)就是在一个元素的外观被改变,但没有改变布局(宽高)的情况下发生,如改变visibility、outline、背景色等等。 
          Reflow(重排)就是DOM的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,
          浏览器会验证DOM树上的所有其它结点的visibility属性,这也是Reflow低效的原因。如:改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化,style属性
          如果Reflow的过于频繁,CPU使用率就会噌噌的往上涨,所以前端也就有必要知道 Repaint 和 Reflow的知识。
     
    三)渲染阶段
       1、js放底部,css放顶部
         基本原理:
          注:这个是很基础且必须遵循的知识点,可是为了文章的完整性勉为其难加进来吧,嘿嘿。
          引入外部文件好处是显而易见的,而且是项目稍稍复杂一点的时候就有必要了这样做了。
          易维护、易扩展,方便管理和重复利用。
          正确的方式:
          JavaScript是浏览器中的霸主,为什么这么说,因为在浏览器在执行JavaScript代码时,不能同时做其它事情,
          即每次出现都会让页面等待脚本的解析和执行(不论JavaScript是内嵌的还是外链的),JavaScript代码执行完成后,
          才继续渲染页面。这个也就是JavaScript的阻塞特性。
          因为这个阻塞的特点,建议把JavaScript代码放到标签以前,这样既能有效的防止JavaScript的阻塞,又能使得页面的HTML结构能更快的释放。
       2、减少重绘和回流
           3、合理使用Viewport 等meta头部
           4、减少对DOM的操作
         原理:对DOM操作的代价是高昂的,这在网页应用中的通常是一个性能瓶颈
            在《高性能JavaScript》中这么比喻:“把DOM看成一个岛屿,把JavaScript(ECMAScript)看成另一个岛屿,两者之间以一座收费桥连接”。
            所以每次访问DOM都会教一个过桥费,而访问的次数越多,交的费用也就越多。所以一般建议尽量减少过桥次数。
            减少对DOM元素的查询和修改,查询时可将其赋值给局部变量。
            注:在IE中:hover会降低响应速度
     四)数据传输类型
       使用JSON格式来进行数据交换
        基本原理:

        JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript原生格式,
        这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
        与XML序列化相比,JSON序列化后产生的数据一般要比XML序列化后数据体积小,所以在Facebook等知名网站中都采用了JSON作为数据交换方式。
     
      JS操作JSON:
        在JSON中,有两种结构: 对象和数组。
        一个对象以 “ { ” 开始,“ } ” 结束。每个“名称”后跟一个 “ : ” ;“名称/值 对”之间使用 “ , ”(逗号)分隔。 名称用引号括起来;值如果是字符串则必须用引号括起来,
        数值型则不需要。如:
        var obj={"name":"darren","age":24,"location":"beijing"}
        数组是值(value)的有序集合。一个数组以 “ [ ” 开始, “ ] ” 结束。值之间使用 “ , ” (逗号)分隔。如:
        var jsonlist=[{"name":"darren","age":24,"location":"beijing"},{"name":"weidong.nie","age":24,"location":"hunan"}];

        对这种数组和对象字面量的操作是非常方便且高效的。如果预先知道JSON结构的情况下,使用JSON进行数据传递简直是太美妙了,
        可以写出很实用美观可读性强的代码。如果你是纯粹的前台开发人员,一定会非常喜欢JSON。
     
    五)脚本执行阶段
      1、缓存节点,尽量减少节点的查找
      2、减少节点的操作(innerHTML)
      3、避免无谓的循环,break、continue、return的适当使用
      4、事件委托(请看  三) 下面的 4)
          原理:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。(简单来说就是委托给父元素来做)
     
     
    1. 减少http请求,2.压缩并优化js/css/image 3.尽量静态页面,从简原则 4.代码规范

  • 相关阅读:
    Android Media Playback 中的MediaPlayer的用法及注意事项(二)
    Android Media Playback 中的MediaPlayer的用法及注意事项(一)
    34. Search for a Range
    33. Search in Rotated Sorted Array
    32. Longest Valid Parentheses
    31. Next Permutation下一个排列
    30. Substring with Concatenation of All Words找出串联所有词的子串
    29. Divide Two Integers
    28. Implement strStr()子串匹配
    27. Remove Element
  • 原文地址:https://www.cnblogs.com/BlingSun/p/7513306.html
Copyright © 2011-2022 走看看