zoukankan      html  css  js  c++  java
  • 前端面试--重要基础知识回顾(一)

    1.数据类型:

      可变的引用类型:object(array ,function,正则);

      不可变的原始类型:null, undefined, number, string, boolean, symbol(es6)

    //引用类型
            var arr1 = [1,2];
            var arr2 = arr1
            arr2.push(3)
            console.log(arr1) //[99]
    //原始类型
            var str1 = "111";
            var str2 = str1;
            str2 = "222"
            console.log(str1)    //111

     

    2.if的真和假: 

      以下情况会被认为返回false:(反之为真)

      • " " 空的字符串
      • 为 0 的数字
      • 为 null 的对象
      • 为 undefined 的对象
      • 布尔值 false

    3.事件冒泡,默认行为:

     1).DOM2级事件规定的时间流包括 三个阶段:

    • 事件捕获阶段
    • 处于目标阶段
    • 事件冒泡阶段

    事件冒泡: 当一个元素接收到事件的时候,会把她接收到的事件依次向上传递,一直到window.

    默认行为: 触发事件动作发生后的表现,比如点击链接会跳转,点击提交按钮会提交并刷新页面.

     2)阻止事件冒泡 

      w3c:event.stopPropagation()

      ie:event.canleBubble = true;

    window.event? window.event.cancelBubble = true : e.stopPropagation();    //兼容的写法

      写法:

     document.getElementById("button").addEventListener("click",function(event){
                alert("button");
                event.stopPropagation();    
        },false);

    3)取消默认事件

      w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;·

    //假定有链接<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>
    var a = document.getElementById("testA");
    a.onclick =function(e){
      if(e.preventDefault){
        e.preventDefault();
      }else{
        window.event.returnValue == false;
      }
    }

      return false;

    <div id='div'  onclick='alert("div");'>
      <ul  onclick='alert("ul");'>
        <li id='ul-a' onclick='alert("li");'>
          <a href="http://caibaojian.com/"id="testB">caibaojian.com</a>
        </li>   </ul> </div> var a = document.getElementById("testB"); a.onclick = function(){   return false; };

    5.闭包:

       闭包: 就是能够读取到其他函数内部变量的函数(通俗点讲就是函数a的内部函数b,被函数a外部的一个变量引用的时候, 就产生了一个闭包)

    function  a() {
        n = 99;
        function b () {
           alert(n);
       } 
       retrun b;
    }
    var result = a ();
    result();  //99

    6.$().ready()和window.onload

     区别:

    1) 运行时间

      window.onload必须等到页面内包含图片的全部元素载入完成后才运行。

      $(document).ready()是DOM结构绘制完成后就运行,不必等到载入完成。

    2) 编写个数不同

      window.onload不能同一时候编写多个,假设有多个window.onload方法,仅仅会运行一个。

      $(document).ready()能够同一时间编写多个。而且都能够得到运行。

      如何用js实现ready()方法;

    function ready(fn){
        if(document.addEventListener){        //标准浏览器
            document.addEventListener('DOMContentLoaded',function(){
                //注销时间,避免重复触发
                document.removeEventListener('DOMContentLoaded',arguments.callee,false);
                fn();        //运行函数
            },false);
        }else if(document.attachEvent){        //IE浏览器
            document.attachEvent('onreadystatechange',function(){
                if(document.readyState=='complete'){
                    document.detachEvent('onreadystatechange',arguments.callee);
                    fn();        //函数运行
                }
            });
        }
    }

    7,px和em和rem的区别?

    px:像素大小

    em:如果自己有font-size的像素,如果自己标签没有设置font-size就继承父级的。

    rem:是继承html标签的font-size的像素

    8.DOM节点的增删改查?

      查:getElementByIsd()....等等

      增;appendChild():末尾插入;

        insertbeforer():特定位置插入;

      改:replaceChild():接受两个参数,第一个为要插入的节点,第二个为要替换的节点;

      删:removeChild();

      创建:createElement()  

      复制:cloneNode(true|false) ; //默认是 false。克隆节点本身; 为 true,克隆节点及其属性,以及后代;

    9,JSONP的原理?

      根据浏览器同源策略,所谓同源就是协议、主机、端口号都相同时成为同源。a 域的js不能直接访问 b域名的信息,但是script 标签的src属性可以跨域引用文件,jsonp是请求之后后台包装好一段json,并且把数据放在一个callback函数,返回一个js文件,动态引入这个文件,下载完成js之后,会去调用这个callback,通过这样访问数据。

    10,如何判断一个数组和类数组?

      Object.prototype.toString.call()

     

    11,什么是事件委托,jquery和原生js怎么去实现?

      事件委托:利用事件冒泡的原理(不清楚请看3.1)当一个子级没有绑定事件时他会一直向上寻找,此时父级绑定的事件就是事件委托.

      具体实现:

        原生js:

    //原生的实现方法
    //情景:为父级绑定事件,点击子级时分别显示子级自己的html内容
    farter.onclick = function(ev){
        var ev = ev || window.event;       //兼容
        var target = ev.target || ev.srcElement;   //target是获取当前的元素节点
        if(target.nodeName.toLowerlase == "child"){
           arert(target.innerHTML) ;
       } 
    } 

        jq:

      delegate("选择器","事件",回调函数)

    12,web前端开发,如何提高页面性能优化?(请参考雅虎军规)

      内容:

      1.尽量减少HTTP请求数

    2.减少DNS查找

    3.避免重定向

    4.让Ajax可缓存

    5.延迟加载组件

    6.预加载组件

    7.减少DOM元素的数量

    8.跨域分离组件

    9.尽量少用iframe

    10.杜绝404

    css部分:

    11.避免使用CSS表达式

    12.选择<link>舍弃@import

    13.避免使用滤镜

    14.把样式表放在顶部

    js部分:

    15.去除重复脚本

    16.尽量减少DOM访问

    17.用智能的事件处理器

    18.把脚本放在底部

    CSS && JS:

    19.把JavaScript和CSS放到外面

    20.压缩JavaScript和CSS

    img:

    21.优化图片

    22.优化CSS Sprite

    23.不要用HTML缩放图片

    24.用小的可缓存的favicon.ico(P.S. 收藏夹图标)

    cookie:

    25.给Cookie减肥

    26.把组件放在不含cookie的域下

    移动端:

    27.保证所有组件都小于25K

    28.把组件打包到一个复合文档里

    服务器:

    29.Gzip组件

    30.避免图片src属性为空

    31.配置ETags

    32.对Ajax用GET请求

    33.尽早清空缓冲区

    34.使用CDN(内容分发网络)

    35.添上Expires或者Cache-Control HTTP头

    -------------------------------------------未完待续--------------------------------------------

  • 相关阅读:
    Insus Meta Utility
    The 'Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine.
    Insus Binary Utility
    asp.net实现文件下载功能
    Column 'Column Name' does not belong to table Table
    程序已被编译为DLL,怎样去修改程序功能
    如何在Web网站实现搜索功能
    如何把数据流转换为二进制字符串
    Asp.net更新文件夹的文件
    如何显示中文月份
  • 原文地址:https://www.cnblogs.com/1234wu/p/10475454.html
Copyright © 2011-2022 走看看