代码优化

优化代码的目的:提高运行速度;

js代码优化:

  • 代码重用
  • 避免全局变量(全局变量,封闭空间,模块化,mvc..)
  • 拆分函数避免函数过于臃肿
  • 注释
  • 减少HTTP请求
  • 减少DOM操作
  • 使用json对数据进行操作
  • 使用语义化标签
  • 使用CDN加速
  • 压缩代码
  • 使用垃圾回收、脏机制查询
  • 异步加载第三方资源;动态创建script、defer;
  • 设置本地缓存;
  • 避免iframe\img等src属性为空
  • 点击事件优化;没用就清除;
  • 注意scroll、resize事件绑定的时机;

HTML

  • 使用压缩后的第三方库,带min的文件;
  • js代码在页面最后加载;
  • 图片使用JPG优于png;png8优于png24;
  • 使用懒加载;

CSS

  • 使用合并属性:margin/background等;
  • 移除空的CSS规则;
  • 去掉0的单位;
  • 不要声明过多的font-size;

渲染优化

  • 动画优化:使用CSS3动画,使用requestAnimationFrame替代setInterval;
  • 高频事件优化:touch事件、scroll事件;
  • 图片优化:优化图片、webp优于jpg\png8优于gif、对图片使用lazyload;
  • 使用transition触发、transform触发、opacity;
  • js主动释放内存;

meta标签优化

向数组中插入元素

var arr=[1,2,3,4,5];
arr.push(6);
换成
arr[arr.length]=6;

arr.unshift(0);
改为
[0].concat(arr);

优化嵌套的条件语句

    if (color) {
        if (color === 'black') {
            getBlack();
        } else if (color === 'red') {
            getRed();
        } else if (color === 'blue') {
            getBlue();
        } else if (color === 'green') {
            getGreen();
        } else {
            printYellowBackground();
        }
    }

优化:

    var colorObj = {
        'black': getBlack,
        'red': getRed,
        'blue': getBlue,
        'green': getGreen,
        'yellow': getYellow
    };
    if (color in colorObj) {
        colorObj[color]();
    }


undefined==null;//true;
undefined===null;//fallse;

undefined与null的区别

  • undefined表示一个变量没有被声明,或者被声明了但没有被赋值;
  • null是一个表示“没有值”的值,但是他是一个值;
  • Javascript将未赋值的变量默认值设为undefined;
  • undefined不是一个有效的JSON,而null是;
  • undefined的类型(typeof)是undefined;
  • null的类型(typeof)是object;
  • 他们是基本类型;

检查某对象是否有某属性:

 var obj={
    name:'hello'
 }
 if(obj.name){
    console.log('obj has name');
 }

转换

 var obj={
    name:'world'
 }
obj.hasOwnProperty("name")//true
"name" in obj//true

obj.hasOwnProperty('valueOf')//false;继承自原型链(__proto__属性)
"valueOf" in obj//true

区分与检查属性的深度不同,换言之hasOwnProperty只在本身有此属性时返回true,而in操作符不区分属性来自于本身或继承自原型链。

快速测量js代码性能,使用console的timeEnd方法

    console.time("Array initialize");
   var arr = new Array(100),
       len = arr.length,
       i;
   
   for (i = 0; i < len; i++) {
       arr[i] = new Object();
   };
   console.timeEnd("Array initialize");
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,638评论 25 708
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 114,857评论 24 450
  • 转载于文章:http://www.awaimai.com/1050.htmlhttp://www.jb51.net...
    Veekend阅读 532评论 0 1
  • 翠绕宅生,苔围石青。欲赏时,天河决堤,万瀑奔伐,雨箭起征,遇石化莲,尘化泞,人化蜂。 相拥长廊...
    柳生枝阅读 345评论 0 11
  • 我是一个废柴。我以前并不这样认为,然而事实证明如此,由不得我不承认。 小学时期,我的语数英都还OK,足以让我获得一...
    王星人阅读 238评论 0 0