1. 什么是换页算法?
FIFO(先进先出): 每次都是置换最先进入的页面
LRU(最近最少使用): 换出最近最小使用的页面
OPT(最优算法): 淘汰不用的页面或者最长时间才用到的页面
Clock(时钟算法): 循环查找页面的环形结构
2. URL的响应过程?
(1)输入url地址
(2)浏览器查找域名的ip地址
a. 浏览器缓存
b. 系统缓存
c. 路由器缓存
d. ISP DNS缓存
e. 递归搜索
(3)浏览器向web服务器发送一个http请求
(4)重定向等操作,跟踪地址
(5)服务器处理请求并返回Html
(6)浏览器显示HTML ,发送要获取HTMlL的对象
(7) 浏览器发送异步请求
3. 页面渲染过程?
(1) 用户输入网址(假设是第一次响应)浏览器发送请求,服务器返回html
(2)浏览器载入html代码,若出现link,script等标签
(3)依次载入标签(当出现图片时,先执行后面的,当图片载入的时候立马回来)
重绘:部分节点需要更新,但未改变集合的形状,比如改变了背景。
重排: 渲染树的一部分需要更新,并且节点的尺寸发生了变化。
chrome会预加载js,反之火狐不会预加载js;
默认不预加载的时候,js的执行会受到css文件未加载影响,预加载就是指的css一旦加载完成,立马就可以利用预加载的js文件直接执行js的功能。
减少重绘和重排的方法:(1)不单独修改,而选择批量修改。(2)不要频繁的通过计算获取样式。
4. window.onlload 和$(document).ready
页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成。(可以说:ready 在onload 前加载!!!)
一般样式控制的,比如图片大小控制放在onload 里面加载;
而:jS事件触发的方法,可以在ready 里面加载;
$(function(){} === $(document).ready(function(){});
5. jsonp解决跨域
http://my.oschina.net/liuxiaori/blog/64256?fromerr=MTdmcLkS
6. js事件代理
http://blog.csdn.net/weinideai/article/details/3835839
7. 事件冒泡与捕获
-
var useCapture = true; //false为冒泡获取【目标元素先触发】 //true为捕获获取【父级元素先触发】 if(x.addEventListener){ x.addEventListener('click',function(){ console.log("标准事件"); },useCapture); }else if(x.attachEvent){ // 默认是冒泡,适用于IE8及以下,无参数usecapture x.attachEvent('onclick',function(){ console.log("IE8及以下") }) }
(1)在标准模式下,可以使用addEventListener(event, fn, useCapture);
event: 事件名称(例如click)
fn: 处理函数
useCapture: 事件是否是捕获;
相对应的移除事件是: removeEventListenter("事件处理程序名称",函数,bCaptrue);
(2)在IE8-IE6的时候要用attachEvent(event, fn);
event: 事件名称(例如onclick,在普通的事件名称前加on前缀)
fn: 处理函数
相对应的移除事件是: detachEvent("事件处理程序名称",函数)
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>bubble event</title>
<styletype="text/css">
body {
margin:0;
}
#one {
width:500px;
height:300px;
background: rgb(255,0,0);
}
#two {
width:400px;
height:260px;
background: rgb(255,50,50);
}
#three {
width:300px;
height:240px;
background: rgb(255,100,100);
}
#four {
width:200px;
height:200px;
background: rgb(255,150,150);
}
</style>
</head>
<body>
<divid='one'>
one
<divid='two'>
two
<divid='three'>
three
<divid='four'>
four
</div>
</div>
</div>
</div>
<script>
// addEventListener /*IE9+ 才支持*/
var one = document.getElementById('one');
var two = document.getElementById('two');
var three = document.getElementById('three');
var four = document.getElementById('four');
var useCapture =true;//false为冒泡获取【目标元素先触发】 true为捕获获取【父级元素先触发】
if(one.addEventListener){
one.addEventListener('click',function(){
console.log('one');
}, useCapture);
two.addEventListener('click',function(){
console.log('two');
}, useCapture);
three.addEventListener('click',function(){
console.log('three');
}, useCapture);
four.addEventListener('click',function(){
console.log('four');
}, useCapture);
}else{
one.attachEvent('onclick',function(){
console.log('one');
}, useCapture);
two.attachEvent('onclick',function(){
console.log('two');
}, useCapture);
three.attachEvent('onclick',function(){
console.log('three');
}, useCapture);
four.attachEvent('onclick',function(){
console.log('four');
}, useCapture);
}
/*
false
冒泡
点击four div
输出结果:four three two one
true
捕获
点击four div
输出结果: one two three four
*/
</script>
</body>
</html>
8. 阻止事件冒泡
/*封装阻止事件冒泡*/
function stopEventBubble(event){
var e=event || window.event;
if (e && e.stopPropagation){
e.stopPropagation(); //阻止标准事件冒泡
}
else{
e.cancelBubble=true;//事件阻止冒泡
}
}
var useCapture = true; //false为冒泡获取【目标元素先触发】 true为捕获获取【父级元素先触发】
if(x.addEventListener){
x.addEventListener('click',function(event){
console.log("标准事件");
stopEventBubble(event)
},useCapture);
}else if(x.attachEvent){
// 默认是冒泡,适用于IE8及以下,无参数usecapture
x.attachEvent('onclick',function(event){
console.log("IE8及以下");
stopEventBubble(event)
});
}