zoukankan      html  css  js  c++  java
  • 问题总结(一)

    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. 事件冒泡与捕获

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

     

     





  • 相关阅读:
    adb获取不了设备List of devices attached
    Appium常用的API函数
    Clevo P950笔记本加装4G模块
    “CNKI 中国知网 PDF 全文下载”油猴脚本在线安装地址
    使用XTU降低CPU功耗,自动执行不失效
    Clevo P950系列拆机
    Win10的WSL很好用呀
    ubuntu下opencv使用cvNamedWindow()和cvShowImage()出错的解决方法
    2017年研究生数学建模D题(前景目标检测)相关论文与实验结果
    [翻译]怎么阅读一篇论文
  • 原文地址:https://www.cnblogs.com/daydayupyxq/p/5392363.html
Copyright © 2011-2022 走看看