js问题小节

1.各大浏览器的内核；
浏览器的内核是分为两个部分的，一是渲染引擎，另一个是JS引擎。现在JS引擎比较独立，内核更加倾向于说渲染引擎。


（1）Trident内核：代表作品是IE，因IE捆绑在Windows中，所以占有极高的份额，又称为IE内核或MSHTML，此内核只能用于Windows平台，且不是开源的。
    代表作品还有腾讯、Maxthon（遨游）、360浏览器等。但由于市场份额比较大，曾经出现脱离了W3C标准的时候，同时IE版本比较多，存在很多的兼容性问题。

（2）Gecko内核：代表作品是Firefox，即火狐浏览器。因火狐是最多的用户，故常被称为firefox内核它是开源的，最大优势是跨平台，在Microsoft Windows、Linux、MacOs X等主   要操作系统中使用。
Mozilla是网景公司在第一次浏览器大战败给微软之后创建的。有兴趣的同学可以了解一下浏览器大战

（3）Webkit内核：代表作品是Safari、曾经的Chrome，是开源的项目。

（4）Presto内核：代表作品是Opera，Presto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了Presto；

（5）Blink内核：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎，V8，使JS运行速度极大地提高了；


2.css样式的选择器；

3.js type属性返回值；
  1.number
//NaN在JavaScript中代表的是特殊非数字值,它本身是一个数字类型。

  2.boolean
  3.string
  4.undefined
  5.object
  6.function

一.new操作符具体干了什么？
1.创建一个新对象；
2.将构造函数的作用域赋予新对象；
3.改变this指向或上下文执行环境；
4.返回新的对象；


var obj  = {};//我们创建了一个空对象obj；
obj.__proto__ = Base.prototype;//我们将这个空对象的__proto__成员指向了Base函数对象prototype成员对象
Base.call(obj);//我们将Base函数对象的this指针替换成obj，然后再调用Base函数，于是我们就给obj对象赋值了一个id成员变量，这个成员变量的值是”base”，关于call函数的用法。


二.javascript的typeof返回哪些数据类型？
string，
number，
undefined，
object，
function，
boolean,
symbol(ES6)：Symbols确保唯一，即使我们使用相同的名称，也会产生不同的值。；

var Symbol1=symbol("123");
var Symbol2=symbol("123");


三. function Foo(){
        getName=function(){alert(1);};
        return this;
    }
    Foo.getName=function (){alert(2);};
    Foo.prototype.getName =function(){alert(3);};
    var getName=function(){alert(4);};
    function getName(){alert(5);}

   Foo.getName();//2
   getName();//4
   Foo().getName();//1
   new Foo.getName();//4
   new Foo().getName();//3
   new new Foo().getName();//3


 九.
    alert(typeof null);//object;
    alert(undefined);//undefined;
    alert(NaN);//number
    alert(NaN==undefined);//false
    alert(NaN==NaN);//false
    var str="123abc";
    alert(typeof str++);//number
    alert(str);//NaN
    
 

    undefined :声明了，没有赋值；
    null：空对象，指针指向空对象；
    1.转换为数值的时候： NaN  0；
    2. 声明未定义  空对象 ；
    3.typeof    undefined  object；

 五.闭包
1. 读取函数内部的变量；
2.减少变量的使用，减少全局污染；
3.让这些变量的值始终保存在函数内；



六.如何判断一个对象是否属于某个类？
typeof，instanceof，constructor，toString.call();


八.document.write和innerHTML的区别
      
    document.write:
    1.document.open;2.document.close;

九.document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。 

十.HTTP状态消息：
3XX系列：代表需要客户端采取进一步的操作才能完成请求，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明。
302状态码：请求的资源临时从不同的URI响应请求，但请求者应继续使用原有位置来进行以后的请求
304：客户端已经执行了GET，但文件未变化；
404： 请求的网页不存在；
403：拒绝或者禁止访问；

十一.什么是CSS hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个

                 针对不同的浏览器/不同版本写相应的CSS code的过程，

叫做CSS hack!

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

    属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。

    选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。

    IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：<!--[if IE]>IE浏览器显示的内容 <![endif]-->，针对IE6及以下版本： <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。


十二.什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？

　　1.渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

　　2.优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，
而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

十三.对网站的资源进行优化

十四.
call：传单独参；
apply：传数组；


十五：获取本地路径
       var lcal= location.href;
       lcal=substring(0,lcal.lastIndexOf("\"));

十六：js：ECscript,BOM（浏览器对象模型）,DOM

十七.BOM内含属性：
      navigator：提供浏览器窗口信息；
      location：提供浏览器所加载的详细信息，可对当前页面的URL进行操作；
      screen：提供用户显示器分辨率的详细信息；
      window（顶层对象）：表示浏览器打开的窗口；
      history：可对当前的浏览历史进行操作；
      

十八：跳转网页五点：
1 html的实现
  <head>
  <!-- 以下方式只是刷新不跳转到其他页面 -->
  <meta http-equiv="refresh" content="10">
  <!-- 以下方式定时转到其他页面 -->
  <meta http-equiv="refresh" content="5;url=hello.html"> 
  </head>

  优点：简单；
  缺点：Struts Tiles中无法使用；


2) javascript的实现

  <script language="javascript" type="text/javascript"> 
  // 以下方式直接跳转
  window.location.href='hello.html';
  // 以下方式定时跳转
  setTimeout("javascript:location.href='hello.html'", 5000); 
  </script>

  优点：灵活，可以结合更多的其他功能
  缺点：受到不同浏览器的影响

3) 结合了倒数的javascript实现（IE）    
<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript"> 
   var second = totalSecond.innerText; 
   setInterval("redirect()", 1000); 
   function redirect(){ 
   totalSecond.innerText=--second; 
   if(second<0) location.href='hello.html'; 
   } 
</script>

优点：更人性化
缺点：firefox不支持（firefox不支持span、div等的innerText属性）

3') 结合了倒数的javascript实现（firefox）    
<script language="javascript" type="text/javascript"> 
   var second = document.getElementById('totalSecond').textContent; 
   setInterval("redirect()", 1000); 
   function redirect() 
   { 
   document.getElementById('totalSecond').textContent = --second; 
   if (second < 0) location.href = 'hello.html'; 
   } 
</script>

4) 解决Firefox不支持innerText的问题    
   <span id="totalSecond">5</span>
   <script language="javascript" type="text/javascript"> 
   if(navigator.appName.indexOf("Explorer") > -1){ 
   document.getElementById('totalSecond').innerText = "my text innerText"; 
   } else{ 
   document.getElementById('totalSecond').textContent = "my text textContent"; 
    } 
   </script>


 5) 整合3)和3')    
<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript"> 
var second = document.getElementById('totalSecond').textContent; 
if (navigator.appName.indexOf("Explorer") > -1)  { 
    second = document.getElementById('totalSecond').innerText; 
} else { 
    second = document.getElementById('totalSecond').textContent; 
} 
setInterval("redirect()", 1000); 
function redirect() { 
if (second < 0) { 
    location.href = 'hello.html'; 
} else { 
    if (navigator.appName.indexOf("Explorer") > -1) { 
        document.getElementById('totalSecond').innerText = second--; 
    } else { 
        document.getElementById('totalSecond').textContent = second--; 
    } 
} 
} 
</script>



十九：页面优化：

第一步：加载优化：
          减少HTTP请求。
          因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个。a) 合并CSS、JavaScript；b) 合并小图片，使用雪碧图（CSS SPRITE）；

          缓存。

          压缩HTML、CSS、JavaScript。

          确保无阻塞。
          写在HTML头部的JavaScript（无异步），和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，JavaScript放在页面尾部或使用异步方式加载
       
          使用首屏加载。
          首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化。

          按需加载。

          预加载。

          压缩图片。
          减少Cookie、避免重定向以及异步加载第三方资源。
          
第二步：脚本执行优化          
          
          CSS写在头部，JavaScript写在尾部或异步。
          
          避免图片和iFrame等的空Src。

          尽量避免重设图片大小。
          
          图片尽量避免使用DataURL。
          
第三步：css优化
尽量避免写在HTML标签中写Style属性。
不滥用Float。
不滥用Web字体。

第四步：JavaScript执行优化
减少重绘和回流。
缓存Dom选择与计算。
缓存列表.length。
尽量使用事件代理，避免批量绑定事件
尽量使用ID选择器。


第五步：渲染优化
减少Dom节点。
动画优化。
高频事件优化。
GPU加速。

//工厂方法进化成构造函数造人，不用return，构造函数也可以称为类
function Createman(Name,Age){
this.name=Name;
this.age=Age;
this.skill=function(){
alert(this.name);//this指代刚产生的对象
}
alert(this);//指向new出来的新对象
}
var Li=new Createman('liming','20');//构造函数的实例
var Sun=new Createman('sunhong','20');
Createman.prototype.jineng=function(){//原型上的方法容易被覆盖
alert(this.age);
}
alert(Li.jineng==Sun.jineng);//true