前端技术优化&JS面向对象

# 前端学习笔记 #

### 阻塞渲染 ###

将不紧急的js延迟，使页面尽可能早渲染

***解决js阻塞***



***阻塞css文件***

尽量吧inline.js写在css前面

css本来就是并行加载的

内嵌js会打断并行


----------


Block（块级）元素独占一行


----------

### 离线操作DOM ###

使用documentFragment或div等元素进行缓存操作

display：none隐藏元素，然后对该元素进行所有的操作，最后再显示该元素

----------
### 集中修改样式 ###

test.className="class1" *效率最高*

test.style.cssText="color:#eee;width:200px;" *效率比：test.style.width等逐个操作的高*


----------
### 缓存layout属性值 ###

将频繁访问的属性抽取变量出来


----------
### js：作用域的最小单元：函数。 ###

eg:

    function func(){
        if(true){
            var b=100;
        }
        console.log(b);//可以访问得到
    }

----------
### js面向对象 ###

通过prototype（原型）来实现面向对象编程的。

与传统基于类的区别：

类：object依靠class来产生

原型：object依靠constructor利用prototype构造出来，constructor本身也是object，一切事物皆object

核心特性：

- 一切事物皆对象
- 对象具有封装性和继承特性
- 对象与对象之间使用消息通讯，各自存在信息隐藏

声明构造器的常见方法：

1. 使用函数式声明构造器
    
        function Test(){
            this.name="test";
            this.func = function(){};
        }

        Test.static_age = "16";
        Test.static_func = function(){};

2. 使用对象的prototype的方式声明构造器

        function Test(){};
        Test.prototype={
            name:"test",
            func:function(){}
        }

        var t = new Test();
        t.func();
        alert(t.name);