前端面试题总结

====各个浏览器中css表现的差别性(浏览器兼容问题)：
    (http://www.douban.com/group/topic/4629864/)
    (http://blog.csdn.net/chuyuqing/article/details/37561313)
    (http://www.iefans.net/ie-9-css-bug/)
    1,各浏览器下，margin与padding显示差别
      ==解决办法:CSS reset
    2,block+float+水平margin,IE6里的间距比超过设置的间距(横向布局)
      ==解决办法:diaplay:inline
      (不用担忧内联元素无宽高，由于float会让inline元素haslayout,让inline元素表现的和inline-block元素同样有宽高和垂直内外边距)
      [咱们最经常使用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候咱们一般都是用div float实现的，横向的间距设置若是用margin实现，这就是一个必然会碰到的兼容性问题]
    3,inline+(display:block)+float+水平margin,IE6里的间距比超过设置的间距
      说明:该状况与上面的差很少,只是此处的元素一开始是内联元素,加了display:block的CSS属性.由于它自己就是行内属性标签，因此咱们再加上display:inline的话，它的高宽就不可设了。这时候咱们还须要在display:inline后面加入display:talbe
      ==解决办法:display:inline;display:table;
    4,IE6对margin:0 auto;不会正确的进行解析
      解决办法：
         在父元素中使用text-align:center,在元件中使用text-align:left
    5,没法设置微高(通常小于10px)：
      说明:当设置元素高度小于10px时，IE6和IE7不受控制，超出设置的高度
      产生缘由:IE不容许原件的高度小于字体的高度
      解决办法1:设置字体大小:font-size:0;
      解决办法2:给超出高度的标签设置overflow:hidden
      解决办法3:设置行高line-height小于你设置的高度
    6,子元件撑破父元件
      缘由:父元件设置了overflow:auto属性,子元件会从父元件中撑破出来
      解决办法:父元件中设置position:relative;
    7,IE没法解析min-height和min-width
      解决办法1:
      selector{
        min-height:150px;
        height:auto !important;
        height:150px;
      }
      解决办法2：
      selector{
        min-height:150px;
        height:150px;
      }
      heml>body selector{
        height:auto;
      }
    8,使用ul li时,li与li之间会空行
      解决办法1:设置li selector{height:**px;}
      解决办法2:li selector{float:left;clear:left;}
      解决办法3:li{display:inline}

====CSS hack:
    +:IE6,IE7
    _:IE6
    \9:IE6,IE7,IE8
    \0:IE8,IE9
    \9\0:IE9
    !important:All(IE6是有条件的支持)

====经常使用的CSS reset:
    (http://blog.bingo929.com/css-reset-collection.html)
    margin:0;
    padding:0;
    border:0;
    ...        

====盒子模型
    padding,border,margin,content;
    标准盒模型与IE盒模型：
       前者：width设置针对content
       后者:width针对border+padding+content
    对于盒子的选择：
       须要依靠最上面的Doctype来看,若是没有声明Doctype,则按照浏览器会根据本身的行为去理解网页;声明后各浏览器会按照W3C标准去解释你的盒子,网页就能在各个浏览器中显示一致了

====性能优化的几个原则:
      1,尽可能减小http请求:
        改善响应时间的最简单途径就是减小组件的数量，并由此减小HTTP请求的数量:
        (1)将多个图片合并到一张单独的图片
        (2)JS、CSS文件合并
      2,使用内容发布网络(CDN的使用)：
        是一组分布在多个不一样地理位置的Web服务器，用于更加有效地向用户发布内容;
        主要用于发布页面静态资源：图片、css文件、js文件等。如此，能轻易地提升响应速度.
      3,添加Expires头
      4,将CSS样式表放在顶部
      5,将javascript脚本放在底部
      6,避免使用CSS表达式
      7,使用外部javascript和CSS
      8,减小DNS查询
      9,精简javascript
      10,避免重定向
      11,删除重复脚本
      12,配置ETag
      13,使Ajax可缓存
      14,避免使用CSS表达式

====JS的数据类型(http://blog.sina.com.cn/s/blog_6fd4b3c10101d0va.html)
         基本数据类型(5)：string，number，null，undefined，boolean
         引用类型：object，array，function；
         数据类型              typeof
           string             string
           number              number
           boolean            boolean
         undefined           undefined
           null                object
           object              object
           array               object
          function             function
          (NaN)                (number)
          (Error)              (Function)
    区分基本数据类型：typeof;
    区分引用数据类型：instanceof（instanceof还能够检测到具体的是什么实例，能够检测是不是正则表达式）
                   eg:[1,2,3,4] instanceof Array;     //true
                            \d{3} instanceof RegExp;     //true
   区分各数据类型：
            Object.prototype.toString.call(val).slice(8,-1)；
                eg:Object.prototype.toString.call([1,2,3]).slice(8,-1); //Array
              obj instanceof typeName;
                eg:[1,2,3] instanceof Array;     //true
              obj.constructor.toString().indexof(typeName);
                eg:[1,2,3].constructor.toString().indexof("Array");    
              //9(只要值不为-1,即为typeName类型)

====会不会SEO(搜索引擎优化)
    1,站内优化
    使得网站在搜索引擎上的友好度和站内用户的良好体验度上升
    让网站在搜索引擎的排名靠前而且获得很好的客户转换率
    2,站外优化
    经过SEO手段帮助网站和网站所属企业进行品牌推广

====语义化的理解？
    html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
    在没有样式CSS状况下也以一种文档格式显示，而且是容易阅读的；
    搜索引擎的爬虫依赖于标记来肯定上下文和各个关键字的权重，利于 SEO；
    使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

====html5新特性：
    1，webStorage(sessionStorage,localStorage);
    2，onmessage,postmessage解决跨域问题;
    3，新的文档类型  (New Doctype)：
      以前的声明文档类型：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">在H5中失效，H5只须要用
      <!DOCTYPE html>便可完成文档声明
    4，新增一系列语义化标签：header,footer,figure+figcaption,article,nav等
    5，新增属性 ：
      ==占位符 (placeholder：
        在HTML4或XHTML中，你须要用JavaScript来给文本框添加占位符。
        好比，你能够提早设置好一些信息，当用户开始输入时，文本框中的文字就消失。而在HTML5中,新的“placeholder”就简化了这个问题；
      ==input新增属性：required(必填项);pattern(正则限定输入)；
    6,audio(音频)与video(视频);
    7,<script async="async">
           
====事件模型
        冒泡型事件(事件委托的原理)
        捕获型事件 
        
====事件绑定
    (http://www.cnblogs.com/iloveyoucc/archive/2012/08/15/2639874.html)
    1,绑定元素属性:事件属性名称由事件类型外加一个on前缀构成
      eg:<input type="button" name="myButton" onClick="myFunc()">
      能够支持开发者把参数传递给事件处理器函数
    2,绑定对象属性:
      eg:document.forms[0].myButton.onclick = myFunc
      没有办法向事件函数传递参数
    3,绑定IE4+支持<script for="id" event="eventName">标识
      for属性的值必须是元素的id;必须把事件的名称(onmouseover，onclick等等)分配给 event属性
      eg:<input type="button" name="myButton" id="button1">   
        <script for="button1" event="onclick">
          // script statements here 
        </script>  
      标识中的语句能够调用页面上其它地方定义的任何函数(或者从.js文件中导入的函数)
      这种绑定方式意味着您必须为每个元素和每个事件建立一个<script for event>标识
    4,IE5+支持:elemObject.attachEvent("eventName", functionReference);
      eg:document.getElementById("").attachEvent("onclick",function(){...});
      注意:不能在元素被载入浏览器以前执行这个语句;
           该对象的引用在相应的 HTML 按键元素被浏览器建立以前，都是无效的;
           要让这样的绑定语句或者在页面的底部运行，或者在body元素的onLoad
           事件处理器调用的函数中运行
    5,W3C DOM的addEventListener()方法
      eg:docuemnt.getElementById("").addEventListener("click",function(){...},false);
      第三个参数表示是否在捕获阶段进行处理
    【注意方法4和方法5中，事件的名字:IE中要加前缀"on",W3C不用加前缀】

====jsonp&&跨域问题

====如何给函数整个触发器
    setTimeout()
    setInterval()

====什么状况下外边距会合并
    外边距合并指的是，当两个垂直外边距相遇时，它们将造成一个外边距。
    合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

====正则式（http://deerchao.net/tutorials/regex/regex.htm）

====如何理解bfc（http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html）
  ==BFC布局规则：
          1，内部的Box会在垂直方向，一个接一个地放置（块级元素独占一行）
          2，Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠，对于垂直box外边距合并（见上面一条），是由于这两个box属于同一个BFC。所以只要改变其中一个box的BFC便可以达到外边距不重叠的效果
   (经常使用的作法是:在其中一个box上套一层容器，并触发该容器生成一个BFC)
          3，每一个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。对于一列固定另外一栏浮动的两栏自适应布局，固定的一栏会覆盖到浮动的那一栏，即两栏的左边会相接触。根据第四点，能够经过触发固定列的BFC达到自适应的目的。
          4，BFC的区域不会与float box重叠。
          5，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此由于BFC内部的元素和外部的元素绝对不会互相影响，所以， 当BFC外部存在浮动时，它不该该影响BFC内部Box的布局，BFC会经过变窄，而不与浮动有重叠。一样的，当BFC内部有浮动时，为了避免影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。 
          6，计算BFC的高度时，浮动元素也参与计算。对于父元素没有随着子元素高度的增长而增长能够触发父元素的BFC来达到自适应的目的
  ==哪些元素会生成BFC?
          根元素
          float属性不为none
          position为absolute或fixed
          display为inline-block, table-cell, table-caption, flex, inline-flex
          overflow不为visible(全部关于margin，双边距等bug能够用overflow:auto修复)

====ajax

====Http原理

====状态码

====http数据包

====写写本身经常使用的CSS3特性:
    ===选择器：
        ==属性选择器（只有IE6不支持）
        [att^="value"]
        匹配包含以特定的值开头的属性的元素
        eg:div[class^="item"]{background:yellow;}
        [class以item开头的元素的background属性为yellow]
        [att$="value"]
        匹配包含以特定的值结尾的属性的元素
        [att*="value"]
        匹配包含含有特定的值的属性的元素
        ==连字符（全部浏览器都支持）
        CSS3中惟一新引入的连字符是通用的兄弟选择器（同级）。它针对一个元素的有同一个父级节点的全部兄弟级别元素。
        好比，给某个特定的div的同级的图片添加一个灰色的边框(div和图片应该有同一个父级节点)，在样式表中定义下面的样式就足够了：
        div~img {   
            border: 1px solid #ccc;   
          }
        ==伪类
        :nth-child(n)
        让你基于元素在父节点的子元素的列表位置来指定元素。你能够是用数字、数字表达式或odd 和even 关键词(对斑马样式的列表很完美)。因此若是你想匹配在第四个元素以后的一个3个元素的分组，你能够简单的这样使用：
        :nth-child(3n+4) { }/*匹配第4,7,10,13,16,19...个元素*/
        :nth-last-child(n)
        与上个选择器的思想一样，可是从后面匹配元素（倒序），好比，为了指定一个div里面的最后两个段落，咱们可使用下面的选择器：
        div p:nth-last-child(-n+2)
        :last-child
        匹配一个父节点下的最后一个子元素，等同于:nth-last-child(1)
        :checked
        匹配选择的元素，好比复选框
        :empty
        匹配空元素（没有子元素）。
        :not(s)
        匹配全部不符合指定声明(s)的元素。好比，若是你想让全部的没有使用”lead”类的段落的显示为黑色，能够这样写： 
        p:not([class*="lead"]) { color: black; }
   ===RGBA和透明度
   ====多栏布局（火狐浏览器、谷歌浏览器，IE10+等支持）
      使用多栏布局时只能为全部栏指定一个统一的高度，栏与栏之间的宽度不多是不同的，另外也不可能具体指定什么栏中显示什么内容，所以比较适合使用在显示文章内容的时候，不适合用于安排整个网页中由各元素组成的网页结构时。
      ===多栏布局第一个属性：column-count
         column-count属性为一个数字表示列数，不带单位，含义是将一个元素中的内容分为多栏进行显示
         .box {
          width: 600px;
          backgrond-color: #ddd;
          column-count: 2;
      }
      ===多栏布局的第二个属性：column-gap
       使用column-gap属性来设定多栏之间的间隔距离。
       .box {
          width: 600px;
          backgrond-color: #ddd;
          column-count: 2;
          column-gap: 60px;
      }
    ===多栏布局第3个属性：column-rule
      column-rule属性在栏与栏之间增长一条间隔线，而且设定该间隔线的宽度、样式、颜色，该属性的指定方法与css中的border属性指定方法相同
        .box {
          width: 600px;
          backgrond-color: #ddd;
          column-count: 2;
          column-gap: 60px;
          column-rule: 5px dashed #000;
      }
    ===多栏布局最后一个属性：column-width
      column-width能够设置每一栏的宽度，可是在实际测试中发现并不像描述的那么简单，遂列举出如下几个问题：
      在设定column-width的同时必须设置盒子的width，不然盒子宽度默认为100%，每栏宽度按照栏数平均分。
      盒子每栏宽度必须大于等于column-width设定的值，不然就会减小栏数来增长每栏宽度，例如盒子宽度400px，一共2栏，那么每栏宽度就是200px，若是设置column-width: 210px的话盒子就会变成1栏以保证每栏宽度大于等于column-width:210px;，可是若是每栏宽度大于column-width的值时每栏宽度也不会强制等于column-width，这么看column-width的个性有点像min-width。
    【CSS3规范里描述的是，各列的高度是均衡的，浏览器会自动调整每列里填充多少文本、均分文本，来使各列的高度保持均衡一致】
  ===多背景图
  ===Word Wrap:normal|break-word
     (http://www.w3chtml.com/css3/properties/text/word-wrap.html)
     对于文字过长会致使文字撑破容器出来;
     使用CSS3属性:
        word-wrap:break-word;内容将在边界内换行,若是须要,单词内部容许断行.
        word-wrap:normal;内容将会撑破容器盒子
  ===文字阴影
  ===@font-face属性
  ===圆角(边框半径)
  ===边框图片
  ===盒阴影
  ===盒子大小
  ===媒体查询
  ===语音

====弹性盒子模型：box-flex
    CSS3中新的盒子模型——弹性盒子模型(Flexible Box Model)：
    ==box-flex属性(很适用于流体布局),用来按比例分配父标签的宽度或高度空间
      eg: #one{box-flex:2;}
          #two{box-flex:1;}
          #three{box-flex:1;}
      表示id分别为one，two，three的元素把父标签按照2:1:1的比例分割;
    ==父标签须要声明为
         father{display:box;}
         father{display:inline-box;}
         【注意:目前而言,仅Firefox/Chrome/Safari浏览器支持弹性盒子模型(IE9不详,Opera还没有),且使用的时候，须要附带私有前缀。就是诸如-moz-, -webkit-前缀】
    ==当子元素中有宽度值的时候，此元素就定宽处理，剩下的空间再按比例分配
      eg：#one{box-flex:2;}
          #two{box-flex:1;}
          #three{width:200px;}
      three宽度为200像素，one和two把剩下的空间按2:1分
    ==弹性盒子模型下的爸爸(父标签)实际上是颇有货的。爸爸肚子中的货有：box-orient, box-direction, box-align, box-pack, box-lines. 如今依次讲讲这里box打头的属性都是干吗用的。
        ===box-orient用来肯定子元素的方向。是横着排仍是竖着走：
          inline-axis是默认值。且horizontal与inline-axis的表现彷佛一致的，让子元素横排；而vertical与block-axis的表现也是一致的，让元素纵列
    =====子元素除了box-flex属性，还有两个属性，box-flex-group和box-ordinal-group，其中box-flex-group的做用不详，貌似目前浏览器也不支持；box-ordinal-group的做用是拉帮结派。数值越小，位置就越靠前，这不难理解，第一组在最前嘛，随后第二组，第三组… 
    例如：box-ordinal-group:1的组就会在box-ordinal-group:2的组前面显示。因而，咱们能够利用这个属性改变子元素的顺序。
    常见浏览器CSS前缀：
    =====Webkit核心浏览器的(好比, Safari)， 它们以-webkit-开始，以及Gecko核心的浏览器(好比, Firefox)，以-moz-开始，还有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它们本身的属性扩展（目前只有IE8支持-ms-前缀）

====设计圆角
    border-radius:

====客户端存储：
    localStorage();
    sessionStorage()

====css选择器权重:
  style:1000;
  ID:100;
  class:10;
  tagName:1;
  子选择器(>)所有选择(*):0;
  [后面的这些权值只是定的一个相对参考，并非具体的值]

====link和@import的区别：
    页面中使用CSS的方式主要有3种：
         1，行内添加定义style属性值
         2，页面头部内嵌调用
         3，外面连接调用其中外面引用有两种：link和@import
    区别：
        1：link是XHTML标签，除了加载CSS外，还能够定义RSS等其余事务；
           @import属于CSS范畴，只能加载CSS。
        2：link引用CSS时，在页面载入时同时加载；
           @import须要页面网页彻底载入之后加载。
        3：link是XHTML标签，无兼容问题；
           @import是在CSS2.1提出的，低版本的浏览器不支持。
        4：ink支持使用Javascript控制DOM去改变样式；
           而@import不支持。

====继承的几种方式：
     1，构造函数
     2，原型链

====数据传递的几种方式：
    get,post,本地存储(localStorage)
    [面试官问我，除了get和post方法还有什么别的方法？我想了半天，面试官说，本地存储啊~~(就是localStorage),其实我想说PUT,HEAD来着@_@]

====webSocket:
    [http://www.cnblogs.com/wei2yi/archive/2011/03/23/1992830.html]
    是下一代客户端-服务器的异步通讯方法，该通讯取代了单个的TCP套接字，使用ws或wss协议，可用于任意的客户端和服务器程序;并且有一个优秀的第三方API，名为Socket.IO
    服务器和客户端能够在给定的时间范围内的任意时刻，相互推送信息;
    与ajax的区别:
    WebSocket并不限于以Ajax(或XHR)方式通讯，由于Ajax技术须要客户端发起请求，而WebSocket服务器和客户端能够彼此相互推送信息；XHR受到域的限制，而WebSocket容许跨域通讯
    // 建立一个Socket实例
    var socket = new WebSocket('ws://localhost:8080'); //ws表示socket协议
    // 打开Socket 
    socket.onopen = function(event) { 
      // 发送一个初始化消息
        socket.send('I am the client and I\'m listening!'); 
      // 监听消息
        socket.onmessage = function(event) { 
          console.log('Client received a message',event); 
        }; 
      // 监听Socket的关闭
        socket.onclose = function(event) { 
          console.log('Client notified socket has closed',event); 
        }; 
      // 关闭Socket.... 
      socket.close() 
  };

====不用angularJS，如何实现双向数据绑定
    ajax：异步数据传输？

====响应式布局：弹性盒子/媒体查询

====如何获取浏览器信息：
    Navigator 对象包含有关浏览器的信息。

Navigator 对象属性：

属性                       描述                IE    F    O
appCodeName            返回浏览器的代码名。     4    1    9
appMinorVersion       返回浏览器的次级版本。    4    No   No
appName               返回浏览器的名称。        4    1    9
appVersion         返回浏览器的平台和版本信息。 4    1    9
browserLanguage       返回当前浏览器的语言。    4    No   9
cookieEnabled      返回指明浏览器中是否启用
                     cookie 的布尔值。          4    1   9
cpuClass           返回浏览器系统的 CPU 等级。  4    No  No
onLine           返回指明系统是否处于脱机模式的布尔值。 
                                                4    No  No
platform          返回运行浏览器的操做系统平台。4     1   9
systemLanguage        返回 OS 使用的默认语言。  4     No  No
userAgent           返回由客户机发送服务器的 
                    user-agent 头部的值。       4     1    9
userLanguage          返回 OS 的天然语言设置。  4     No  9

====数组操做：
  ===toString(param):
    ==null和undefined没有toString()方法
     把null或undefined变成字符串的方法：null+''或者String(null);
     直接用(null).toString()会报错。
    ==param
    是可选的，当须要把数值型数据转换成相应的进制数时，param能够进行设置；eg:把十进制8转换成二进制：(8).toString(2);//"1000";
    此处注意：必须是是number类型，如果("8").toString(2);//"8";
    ==对于浮点数
      若是小数点后面都是0，调用toString方法会把后面的0去掉
      (10.00).toString();//"10";(10.01).toString();//"10.01";
    ==对于object的toString()
      返回"[object ObjectName]"，其中ObjectName是对象类型的名称。
    ==对于Date对象：
      var date = new Date();
        date.toString();//当前时间信息："Mon Oct 19 2015 19:55:55 GMT+0800 (中国标准时间)"
    【思考点：如何将小数点后面都为0的浮点数转化为字符串？
      10.00+"";//"10"(如何获得"10.00");
      10.00+10.00;//20(为何不是20.00)；
      10.01+10.00;//20.009999999999998(为何不是20.01)
      】
    ==String()与toString()的区别：
      (1)null和undefined有String()转换成字符串，而toString()不能；
      (2)toString()能设定数值数据转换的进制数，而String()不能；
      (3)其余状况下：toString(val) === String(val)
  ===join(seperator)：数组以分隔符seperator转换成字符串

====原生JS对DOM操做：
    ===selector：
      ==Document对象方法：
        document.getElementsByName("");
        document.getElementsByTagName("");
        document.getElementById("");
      ==querySelector()|querySelectorAll()
       网址:http://www.nowamagic.net/librarys/veda/detail/388
        (原生写法，比jquery速度快，缺点是IE六、7不支持。)：
        //接收的参数和CSS选择器接收的参数同样
        baseElement.querySelector(selector);
        baseElement.querySelectorAll(selector);
        baseElement能够是document，也能够是DOM
        eg:document.querySelectorAll("input[type='checkbox']");
           document.querySelector === document.querySelectorAll[0];
        =注意：querySelector与querySelectorAll的区别：
          (1)querySelector 用来获取一个元素；
             querySelectorAll 能够获取多个元素。
          (2)querySelector将返回匹配到的第一个元素，若是没有
             匹配的元素则返回 NullquerySelectorAll 返回一个包
             含匹配到的元素的数组，若是没有匹配的元素则返回的数组为空
      ==document对象与querySelector的区别：
          (1)getElement方法只能用于document,不能用于DOM,而querySelector能够
          (2)getElment只能根据name,id,tagName获取DOM，而querySelector不受限制
      ==关于querySelector的一些bug:
        <div class= "test" id= "testId" >
          <p><span>Test</span></p>
        </div>
        <script type= "text/javascript" >    
          var   testElement= document.getElementById( 'testId' ); 
          var   element = testElement.querySelector( '.test span' ); 
          var   elementList = document.querySelectorAll( '.test span' ); 
          console.log(element);  // <span>Test</span>
          console.log(elementList);  // 1   
        </script>
      按照W3C的来理解，这个例子应该返回：element：null；elementList：[];由于做为baseElement的 testElement里面根本没有符合selectors的匹配子节点；但浏览器却好像无视了baseElement，只在意selectors，也就是说此时baseElement近乎document；这和咱们的预期结果不合.
      解决办法：看网址里面的内容吧，有点看不懂的感受

====document.ready与window.onload：
    (http://blog.sina.com.cn/s/blog_49fa034d01011lpc.html)
    Jquery中$(document).ready()的做用相似于传统JavaScript中的window.onload方法，不过与window.onload方法仍是有区别的。
    1.执行时间
      window.onload必须等到页面内包括图片的全部元素加载完毕后才能执行。
      $(document).ready()是DOM结构绘制完毕后就执行，没必要等到加载完毕。
    2.编写个数不一样
      window.onload不能同时编写多个，若是有多个window.onload方法，只会执行一个
      $(document).ready()能够同时编写多个，而且均可以获得执行
    3.简化写法
      window.onload没有简化写法
      $(document).ready(function(){})能够简写成$(function(){});
    即：document.ready在window.onload前面执行

====document对象：
    ==每一个载入浏览器的HTML文档都会成为Document对象。
      Document 对象使咱们能够从脚本中对 HTML 页面中的全部元素进行访问。
      提示：Document 对象是 Window 对象的一部分，可经过 window.document 属性对其进行访问[window.document能够获得文档的内容(源码)]
    ==document对象的属性：
      document.URL:当前页面的url；
      document.referrer:返回载入当前文档的文档的 URL；
        (若是当前文档不是经过超级连接访问的，则为null，该属性容许客户端JS
        访问HTTP引用头部。)
      document.title:当前页面的title；
      document.cookie:当前页面全部的cookie；
      document.lastModified:当前页面最后的修改时间；
      document.domain:当前页面的域名；

====iframe、frame的缺点：

====html文件的渲染过程(性能优化的依据)：
    (http://blog.csdn.net/luckygll/article/details/7432713)
    (http://my.oschina.net/u/1414906/blog/357860)
    客户端发出请求---服务器响应将html文件返回给请求的客户端浏览器中;
    页面开始加载;
    加载从html标签开始;
    加载到head标签时，若是标签内有个外部样式文件(.css)要加载;
    客户端向服务器发出一个请求加载CSS文件，服务器响应;
    CSS加载完成后，客户端浏览器继续加载html文件里的body标签(在CSS文件加载完毕后同时渲染页面);
    客户端在body标签发现img标签而且引用了一张图片,客户端浏览器向服务器发出一次请求,浏览器不会等到图片下载完，而是继续渲染后面的代码;
    img标签中的图片加载完了，要显示出来，而图片又要占用必定的面积，又会影响到后面的布局，浏览器不得不回来从新渲染这一部分;
    body标签里的标签加载及渲染完成后，浏览器发现script标签中的代码,浏览器须要想服务器发出请求加载js文件，服务器响应;
    浏览器解析执行js文件时发现里面有一些对body文档结构变化的操做(隐藏某段内容等),此时浏览器又须要从新去渲染这些内容;
    知道浏览器发现 </html>标签;
    等等，还没完。用户点击了一下界面中的换肤按钮,js让浏览器换了一下<link>的css标签;
    浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，“大伙儿收拾收拾行李，咱得从新来过……”，浏览器向服务器请求了新的CSS文件，从新渲染页面。
    ===reflow与repaint：
      ==reflow(回流):涉及到部分页面的布局
       (http://www.planabc.net/2009/04/13/reflow/)
       页面中向服务器请求的次数多会影响到打开速度,
       从新渲染局部的次数也会影响页面打开速度,对于这种来回渲染,叫作reflow,
       一个元素的回流致使了其全部子元素以及DOM中紧随其后的祖先元素的随后的回流,reflow几乎是没法避免的,咱们不能由于惧怕reflow就丢掉一些页面效果,可是reflow是能够优化的,
       (好比图片在.css样式文件中就定义好图片的高度,这会减小页面从新渲染的次数);
       (1)致使reflow的一些因素:
          调整窗口大小;
          改变字体;
          增长或者移除样式表;
          内容变化，好比用户在input框中输入文字;
          激活CSS伪类，好比 :hover (IE 中为兄弟结点伪类的激活);
          操做class属性;
          脚本操做DOM;
          计算offsetWidth和offsetHeight属性;
          设置style属性的值;
       (2)合理的优化:
          若是想设定元素的样式，经过改变元素的class名(尽量在DOM树的最里层);
            [能够限制了回流的范围，使其影响尽量少的节点]
          避免设置多项内联样式;

          应用元素的动画，使用position属性的fixed值或absolute值
            [它们不影响其余元素的布局(BFC?),所它他们只会致使从新绘制,而不是一个完整回流]
          权衡平滑和速度;
          避免使用table布局;
          避免使用CSS的JavaScript表达式(仅IE浏览器);
      ==repaint(重绘):浏览器必须验证DOM树上其余节点元素的可见性
        重绘：对某个区域、对象的从新渲染表现
        回流：对某个区域、对象进行重绘，根据条件影响到它的祖先对象进入重绘（并可能无限递归直到顶级祖先对象）
        重绘如何出现：改变对象的形状、坐标、表现以及内容都会引起该对象被从新渲染，这种现象即为重绘。
        回流如何出现：当该对象即将重绘时，浏览器会根据条件判断该对象的重绘结果是否会依赖该对象的祖先元素。若是有则将该对象祖先元素也加入本次重绘。并一直向上寻找，直到条件不匹配。此现象即为回流。
        最后总结：
          一、重绘可能引起回流
          二、回流一定引起重绘

    ===js的阻塞特性：(解决:使用异步加载的方式:在script标签中添加async属性)
      其中js是阻塞式的加载，浏览器在加载js时，当浏览器在执行js代码时，不会作其余的事情，即<script>的每次出现都会让页面等待脚本的解析和执行，js代码执行后，才会继续渲染页面。新一代浏览器虽然支持并行下载。可是js下载仍会阻塞其余资源的下载（好比图片）。因此应该把js放到页面的底部。
    ===js的优化：
      1.要使用高效的选择器。
      2.将选择器保存为局部变量
      3.先操做再显示
  
====跨域:
    协议,域名,端口号有一个不一样就被称为跨域

====http与https:

====prototype与__proto__
    (http://www.cnblogs.com/snandy/archive/2012/09/01/2664134.html)
    prototype:每个函数对象都有一个显示的prototype属性,它表明了对象的原型
    __proto__:内部原型(IE6/7/8/9不支持),每一个对象都有一个名为__proto__的内部隐藏属性，指向于它所对应的原型对象,
    IE9中可使用Object.getPrototypeOf(obj)获取对象的内部原型;
    [原型链是基于__proto__才得以造成]
    全部对象__proto__都指向其构造器的prototype,包括自定义的构造器
    [注意:构造器能够直接用构造器的名字,也能够用实例对象的constructor属性得到]
      var obj = {name: 'jack'}
      var arr = [1,2,3]
      var reg = /hello/g
      var date = new Date
      var err = new Error('exception')
      //自定义一个构造器
      function Person(name) {
        this.name = name
      }
      var p = new Person('jack');

      obj.__proto__ === Object.prototype // true
      obj.__proto__ === obj.constructor.prototype // true
      arr.__proto__ === Array.prototype  // true
      reg.__proto__ === RegExp.prototype // true
      date.__proto__ === Date.prototype  // true
      err.__proto__ === Error.prototype  // true
      p.__proto__ === Person.prototype  // true
      p.__proto__ === p.constructor.prototype  // true

      能够看到p.__proto__与Person.prototype，p.constructor.prototype都是恒等的，即都指向同一个对象。

====做用域与做用域链

====模块化

===跳出循环体
   break:跳出最内层循环或者退出一个switch语句
   continue:跳出当前循环继续下一个循环
   return:跳出循环,即便函数主体中还有其余语句,函数执行也会中止。

转自http://www.w3cfuns.com/home.php?mod=space&uid=5468781&do=blog&id=5409858&page=2#comment_ul