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