欢迎访问 生活随笔!

ag凯发k8国际

当前位置: ag凯发k8国际 > 前端技术 > html >内容正文

html

前端面试题-ag凯发k8国际

发布时间:2024/10/12 html 29 豆豆
ag凯发k8国际 收集整理的这篇文章主要介绍了 前端面试题--重要基础知识回顾(一) 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1.数据类型:

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

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

//引用类型var arr1 = [1,2];var arr2 = arr1arr2.push(3)console.log(arr1) //[1,2,3] //原始类型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;·

//假定有链接 var a = document.getelementbyid("testa"); a.onclick =function(e){if(e.preventdefault){e.preventdefault();}else{window.event.returnvalue == false;} }

  return false;

    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.选择舍弃@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头

     

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

    总结

    以上是ag凯发k8国际为你收集整理的前端面试题--重要基础知识回顾(一)的全部内容,希望文章能够帮你解决所遇到的问题。

    如果觉得ag凯发k8国际网站内容还不错,欢迎将ag凯发k8国际推荐给好友。

    • 上一篇:
    • 下一篇:
    网站地图