问题总结（一）

1. 什么是换页算法？

FIFO（先进先出）: 每次都是置换最先进入的页面
LRU（最近最少使用）： 换出最近最小使用的页面
OPT（最优算法）： 淘汰不用的页面或者最长时间才用到的页面
Clock（时钟算法）：  循环查找页面的环形结构

2. URL的响应过程？

（1）输入url地址
（2）浏览器查找域名的ip地址
        a. 浏览器缓存
        b. 系统缓存
        c. 路由器缓存
        d. ISP DNS缓存
        e. 递归搜索
（3）浏览器向web服务器发送一个http请求
（4）重定向等操作，跟踪地址    
（5）服务器处理请求并返回Ｈtml
（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. 事件冒泡与捕获

  1. 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("事件处理程序名称",函数)
 
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <metacharset="utf-8">
  6. <title>bubble event</title>
  7. <styletype="text/css">
  8. body {
  9. margin:0;
  10. }
  12. #one {
  13. width:500px;
  14. height:300px;
  15. background: rgb(255,0,0);
  16. }
  18. #two {
  19. width:400px;
  20. height:260px;
  21. background: rgb(255,50,50);
  22. }
  24. #three {
  25. width:300px;
  26. height:240px;
  27. background: rgb(255,100,100);
  28. }
  30. #four {
  31. width:200px;
  32. height:200px;
  33. background: rgb(255,150,150);
  34. }
  35. </style>
  36. </head>
  38. <body>
  39. <divid='one'>
  40. one
  41. <divid='two'>
  42. two
  43. <divid='three'>
  44. three
  45. <divid='four'>
  46. four
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. <script>
  52. // addEventListener /*IE9+ 才支持*/
  53. var one = document.getElementById('one');
  54. var two = document.getElementById('two');
  55. var three = document.getElementById('three');
  56. var four = document.getElementById('four');
  58. var useCapture =true;//false为冒泡获取【目标元素先触发】 true为捕获获取【父级元素先触发】
  59. if(one.addEventListener){
  60. one.addEventListener('click',function(){
  61. console.log('one');
  62. }, useCapture);
  63. two.addEventListener('click',function(){
  64. console.log('two');
  65. }, useCapture);
  66. three.addEventListener('click',function(){
  67. console.log('three');
  68. }, useCapture);
  69. four.addEventListener('click',function(){
  70. console.log('four');
  71. }, useCapture);
  72. }else{
  73. one.attachEvent('onclick',function(){
  74. console.log('one');
  75. }, useCapture);
  76. two.attachEvent('onclick',function(){
  77. console.log('two');
  78. }, useCapture);
  79. three.attachEvent('onclick',function(){
  80. console.log('three');
  81. }, useCapture);
  82. four.attachEvent('onclick',function(){
  83. console.log('four');
  85. }, useCapture);
  86. }
  87. /*
  88. false
  89. 冒泡
  90. 点击four div
  91. 输出结果：four three two one
  93. true
  94. 捕获
  95. 点击four div
  96. 输出结果： one two three four
  97. */
  98. </script>
  99. </body>
  101. </html>

8. 阻止事件冒泡

  1. /*封装阻止事件冒泡*/
  2. function stopEventBubble(event){
  3. var e=event || window.event;
  4. if (e && e.stopPropagation){
  5. e.stopPropagation(); //阻止标准事件冒泡
  6. }
  7. else{
  8. e.cancelBubble=true;//事件阻止冒泡
  9. }
  10. }
  11. var useCapture = true; //false为冒泡获取【目标元素先触发】 true为捕获获取【父级元素先触发】
  12. if(x.addEventListener){
  13. x.addEventListener('click',function(event){
  14. console.log("标准事件");
  15. stopEventBubble(event)
  16. },useCapture);
  17. }else if(x.attachEvent){
  18. // 默认是冒泡，适用于IE8及以下，无参数usecapture
  19. x.attachEvent('onclick',function(event){
  20. console.log("IE8及以下");
  21. stopEventBubble(event)
  22. });
  23. }
 
 
 
 

 

 





posted @ 2016-04-14 19:26  ☆水晶◇之恋☆  阅读(168)  评论(0)    收藏  举报