js问题小节

本文主要是介绍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.boolean3.string4.undefined5.object6.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();//2getName();//4Foo().getName();//1new Foo.getName();//4new Foo().getName();//3new new Foo().getName();//3九.alert(typeof null);//object;alert(undefined);//undefined;alert(NaN);//numberalert(NaN==undefined);//falsealert(NaN==NaN);//falsevar str="123abc";alert(typeof str++);//numberalert(str);//NaNundefined :声明了，没有赋值；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