<i id='v5ggm8bw'><tr id='gge6h0n5'><dt id='ebeyio7y'><q id='xb370606'><span id='1vguyod2'><b id='fv8e0t6l'><form id='cllimyxb'><ins id='o6vtlcmv'></ins><ul id='7jszxvvm'></ul><sub id='rdm3g8ru'></sub></form><legend id='zkz8pnug'></legend><bdo id='ow2b9cof'><pre id='x9oj0n8v'><center id='gehyecmz'></center></pre></bdo></b><th id='u7wsb5rw'></th></span></q></dt></tr></i><div id='incw6frj'><tfoot id='uc4jf2qv'></tfoot><dl id='kauemvrm'><fieldset id='j27qcw9h'></fieldset></dl></div>

    <small id='eift1tuk'></small><noframes id='9lef676o'>

    <tfoot id='mxn65en9'></tfoot>
      <legend id='ww8xupna'><style id='59kfzdmt'><dir id='y335yb7k'><q id='q9u91zm8'></q></dir></style></legend>
        <tbody id='0i5lxt0k'></tbody>
      网站建设公司当前位置 : 网站建设公司 > 知识普及

      如何进行网站性能优化?

      发布时间:2022-03-04 17:05   浏览次数:次   
      一.背景介绍 
           
           前端优化的目的:
           
            1. 用户:体验好 
            2. 服务商:节省资源 
            简而言之,就是在不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短。 
       
      二.知识剖析 
       
          2.1 优化途径 
          
          1、页面级 
            HTTP请求数、脚本加载、内联脚本位置等 
            
          2、代码级 
            DOM操作优化、CSS选择符优化、图片及HTML结构优化等 
            
           一、页面级优化 
       
              1、减少HTTP 请求数————最重要最有效的方法
           
       
               减少时间成本和资源成本
           
               途径 
               
                (1)从设计实现层面简化页面 
           
                (2)合理设置 HTTP缓存  原则:能缓存越多越好,能缓存越久越好
                           
                (3)资源合并与压缩
                
                (4)CSS Sprites
                 
                (5)Inline Images——转化为编码
             
                  let fr = new FileReader();
                  $scope.max = $scope.file.size;//文件大小
                  fr.readAsDataURL($scope.file);
                  fr.onprogress = function($event){
                      $scope.value = $event.loaded;
                  }
                  fr.onload = function ($event){//预览图片
                      preview.src = $event.target.result;
                  }
              
                 缺点:增大了页面的体积,而且无法利用浏览器缓存 
           
                (6)图片懒加载 
       
                     图片地址缓存在 Textarea标签中,待用户往下滚屏的时候才 “惰性” 加载
           
          
              
              2、外部脚本置底 
              
              3、异步执行inline脚本 
              
              4、Lazy Load Javascript 
              
              5、将 CSS放在head中 
       
              6、减少不必要的 HTTP跳转 
               
              7、避免重复的资源请求 
              
          二、代码级优化 
          
              1、JavaScript 
              
              (1)DOM 
              
                 a. HTML Collection 
                 在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。 
                 
                 b. Reflow & Repaint 
       
                    减少Repaint 和 Reflow
                 
                    Reflow(回流/重排):元素
                    Repaint(重绘): 属性
                         
                        var el = document.getElementById('demo');
                        el.style.broderLeft = '1px';
                        el.style.broderRight = '2px';
                        el.style.padding = '5px';
                 
                 
                 优化:减少此类操作 
                 
              (2)减少作用域链查找 
                  
                 低效率的写法:
                 // 全局变量
                 var globalVar = 1;
                 function myCallback(info){
                     for( var i = 100000; i--;){
                     //每次访问 globalVar都需要查找到作用域链最顶端,本例中需要访问 100000 次
                        globalVar += i;
                 }}
                 
                 更高效的写法:
                 // 全局变量 var globalVar = 1;
                 function myCallback(info){
                     //局部变量缓存全局变量
                     var localVar = globalVar;
                     for( var i = 100000; i--;){
                         //访问局部变量是最快的
                         localVar += i;
                     }
                     //本例中只需要访问 2次全局变量在函数中只需要将 globalVar中内容的值赋给localVar
                 }
                               
                 要减少作用域链查找还应该减少闭包的使用 
                 
              (3)避免使用with(obj){}、evel()Function 
              
              (4)数据访问 
              
                 Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组,
                 其中对直接量和局部变量的访问是最快的,对对象属性以及数组的访问需要更大的开销.当出现以下情况时,建议将数据放入局部变量:
              
                    a. 对任何对象属性的访问超过 1次 
                    b. 对任何数组成员的访问次数超过 1次 
             
              (5)字符串拼接 
              
                 "+" :
                 效率低:因为每次运行都会开辟新的内存并生成新的字符串变量,然后将拼接结果赋值给新变量;
                 
                 优化方法:join()
              
              2. CSS选择符 
              
                 ul li a { color: #444; } 
              
              
      三.常见问题 
       
           3.1HTTP缓存怎样设置?
           
           3.2链接后面是否带“/”有什么区别? 
       
           3.3如何正确理解 Repaint 和 Reflow?
       
       
      四.解决方案 
           3.1
           HTTP缓存怎样设置? 
        
                  meta http-equiv="Cache-Control" content="max-age=7200"
                  meta http-equiv="expires" content="someGMT"
                 
          3.2
          链接后面是否带“/”有什么区别? 
          
              有/会认为是目录,没/会认为是文件。  
              
              加了/浏览器会指向一个目录,目录的话会读取默认文件index等等。
              
              没有/会先尝试读取文件,如果没有文件再找与该文件同名的目录,最后才读目录下的默认文件。
              
              网址没有加上/会给服务器增加一个查找是否有同名文件的过程。      
       
           3.3 如何正确理解 Repaint 和 Reflow ?
       
                Repaint(重绘)就是在一个元素的外观被改变,但没有改变布局(宽高)的情况下发生,如改变visibility、outline、背景色等等。
       
      Reflow(重排)就是DOM的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证DOM树上的所有其它结点的visibility属性,这也是Reflow低效的原因。如:改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化,style属性的改变等等。如果Reflow的过于频繁,CPU使用率就会噌噌的往上涨,所以前端也就有必要知道 Repaint 和 Reflow的知识。
       
      减少性能影响的办法:
      总之,因为 Reflow 有时确实不可避免,所以只能尽可能限制Reflow的影响范围。
       
      <legend id='yh5z856n'><style id='n3h71c47'><dir id='8ou5rh4n'><q id='4ov5j5iw'></q></dir></style></legend>
    1. <small id='48fq8ffy'></small><noframes id='bs8m3n37'>

        <tfoot id='zy2myhic'></tfoot>

              <tbody id='72xckonv'></tbody>

          • <i id='qakgdr8l'><tr id='p8zie53h'><dt id='5qimahy0'><q id='pk5su5ju'><span id='2u7qovmz'><b id='wgu3gs19'><form id='iay6o61c'><ins id='o06b7edy'></ins><ul id='nqjiv3b0'></ul><sub id='qkl7l0sn'></sub></form><legend id='ttympesm'></legend><bdo id='9ogg9epv'><pre id='b4tzdexl'><center id='nwhot2ac'></center></pre></bdo></b><th id='9qgj44zt'></th></span></q></dt></tr></i><div id='gybtpngf'><tfoot id='72sh9jma'></tfoot><dl id='zn7sb20h'><fieldset id='kjyqn9yy'></fieldset></dl></div>

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

            下一篇公众号开发下一篇:网站提速的5个优化技巧

          • <legend id='t8e83wfz'><style id='b70rs7ns'><dir id='f4r4kk5s'><q id='a74nuzvm'></q></dir></style></legend>
            <tfoot id='1tnb47zs'></tfoot>
              <tbody id='u0kj98fm'></tbody>

            <small id='3elmb88z'></small><noframes id='a8enhn2v'>

            <i id='ggl6m53b'><tr id='sue4b5t9'><dt id='6r886svn'><q id='qk0x9x2c'><span id='mlnzvb9h'><b id='fdedwjmm'><form id='9wxpy86n'><ins id='5xhoqubi'></ins><ul id='25krn21g'></ul><sub id='k6hbw19e'></sub></form><legend id='cynvharw'></legend><bdo id='dsb7yfnc'><pre id='ar9jhe7n'><center id='vxqiy5yp'></center></pre></bdo></b><th id='uko5cnv0'></th></span></q></dt></tr></i><div id='1nms75g9'><tfoot id='pvk8jp4t'></tfoot><dl id='z1khasu9'><fieldset id='wxq9v5rr'></fieldset></dl></div>