Web前端开发工程师面试题

2023-08-08 19:12:22

Web前端开发工程师面试题
1.说说css的优先级？
2.在移动端中，常常使用tap作为点击事件，好处是？会带来什么问题？
3.原生JS的window,onload与Jquery的$(document).ready(function(){})有什么不同
4.看下面的代码输出什么，foo的值为什么？
var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);
5.如何优化一个网站，可从dom，css，js等几个方面来谈谈？
6.希望获取到页面中所有的checkbox怎么做？(不能使用第三方框架)
7.实现一个函数clone，可以对Javascript中的5种主要的数据类型(Number、String、Object、Array、Boolean)进行复制
8.说说call，apply，bind的作用和区别？
9.看下面的代码输出什么，为什么？
function A(x,y){return x+y;}
function M(x,y){return x-y;}
console.log(A.call(M,3,1));
10.看下面的代码输出什么，为什么？
var a = function(){return 1;};
function a(){return 2;}
console.log(a());
---------------------------------
当面问的问题：
1.说说对ES6的了解？
2.nodejs有没有实际用过？
3.有没有做过vuejs，angularjs，react，h5开发？
4.版本管理svn，git有没有用过，如果代码给其他人覆盖了要怎么处理？
5.有没有自己写过业务组件，基于jquery插件和原生的组件，如弹窗、点击事件、grid表格、上传附件？
6.在工作中有没有遇到技术与业务需求冲突的难题，如何解决的？
7.jquery里面不用callback方法如何获得ajax返回数据？
8.为什么不继续做后端开发转做前端（对简历里有后端开发经验的人）？

==================================
答案和相关内容有空再慢慢补充，先发一个测试的内容：

<html>

    <head>

    </head>

    <body>

        <script>

        var a = function(){return 1;};

        function a(){return 2;}

        console.log(a());// 1

        function A(x,y){return x+y;}

        function M(x,y){return x-y;}

        console.log(A.call(M,3,1));//4

        var foo = "11"+2-"1";

        console.log(foo);//111

        console.log(typeof foo);//number

        var foo = "11"+2+"1";

        console.log(foo);//1121

        console.log(typeof foo);//string

        for(var i=1;i<=3;i++){

            //立即执行函数，输出1 2 3

           setTimeout((function(a){

               console.log(a);

           })(i),0);

        };

        </script>

    </body>

</html>

==================================
1.说说css的优先级？
CSS三种位置写法的优先级是：行内样式＞内页样式＞外部样式
从CSS代码存放位置看权重优先级：内嵌样式 > 内部样式表 > 外联样式表。
从样式选择器看权重优先级：important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。

2.在移动端中，常常使用tap作为点击事件，好处是？会带来什么问题？
在手机WEB端，click会有 200~300 ms，所以用tap代替click作为点击事件。
singleTap和doubleTap 分别代表单次点击和双次点击。
有可能出现点透的情况，即点击会触发非当前层的点击事件。
使用fastclick库直接一句：FastClick.attach(document.body);所有的click响应速度直接提升，click响应速度比tap还要快一点。

3.原生JS的window,onload与Jquery的$(document).ready(function(){})有什么不同?
Jquery的$(document).ready(function(){})在dom文档树加载完之后执行一个函数（这里面的文档树加载完不代表全部文件加载完）
window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。
即$(document).ready要比window.onload先执行。

4.看下面的代码输出什么，为什么？
var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);
答：111
number
原因："11"+2结果是112，type是string，但是-“1”，使得foo转化成数字类型进行运算。
一个是number一个是string时，会尝试将string转换为number
（ps：var foo = "11"+2+"1";时输出的是1121、string，直接字符串拼接）

5.如何优化一个网站，可从dom，css，js等几个方面来谈谈？
1.尽可能通过ID或者类来查找元素，使用ID查找元素是最快的，其次的是根据类和类型查找元素，通过属性查找元素是最慢的。
2.改变DOM就会引起浏览器渲染，而渲染是相当慢的，因此应该避免不必要的渲染，例如把for循环里面innerHTML操作变成字符串在for循环后一次性赋值。
3.改变DOM元素的样式，类也会导致浏览器渲染，因此也应该减少不必要的操作，例如用style.cssText一次性设置多个样式。
4.批量修改DOM时从文档流中摘除该元素，对其应用多重改变，将元素带回文档中
5.减少iframe，iframe需要消耗大量的时间，并阻塞下载，建议少用，动态给iframe添加URL可以改善性能
6.样式放在header中，可以加快渲染，脚本放在关闭标签</body>之前可以加快下载速度
----------------------------------
一、页面级优化，减少HTTP请求数
1). 从设计实现层面简化页面保持页面简洁、减少资源的使用时最直接的。
2). 合理设置HTTP缓存
3). 资源合并与压缩，将外部的脚本、样式进行合并，多个合为一个。
4). CSS Sprites，合并CSS图片，减少请求数
5). 将外部脚本置底（将脚本内容在页面信息内容加载后再加载），异步执行 inline脚本
6). Lazy Load Javascript（只有在需要加载的时候加载，在一般情况下并不加载信息内容。）
7). 将 CSS放在 HEAD中，避免使用CSS表达式
8). 避免重复的资源请求
二、代码级优化
1. Javascript
需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。
除非你能肯定在 with代码中只访问 obj中的属性，否则慎用 with，替代的可以使用局部变量缓存需要访问的属性。
避免使用 eval和 Function构造函数
减少作用域链查找、减少闭包的使用
对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销。
----------------------------------

6.希望获取到页面中所有的checkbox怎么做？(不能使用第三方框架)
var domList = document.getElementsByTagName('input');
var checkBoxList = [];
var len = domList.length;
//使用while的效率会比for循环更高
while(len --){　　
　　if (domList[len].type == 'checkbox') {
　　 checkBoxList.push(domList[len]);
　　}
}

7.实现一个函数clone，可以对Javascript中的5种主要的数据类型(Number、String、Object、Array、Boolean)进行复制

// 方法一：

Object.prototype.clone = function(){

    var o = this.constructor === Array ? [] : {};

    for(var e in this){

        o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];

    }

    return o;

}

//方法二：

function clone(Obj){

    var buf;

    if(Obj instanceof Array){

        buf = [];

        var i = Obj.length;

        while (i--) {

            buf[i] = clone(Obj[i]);

        }

        return buf;

    }else if(Obj instanceof Object){

        buf = {};

        for (var k in Obj){

            buf[k] = clone(Obj[k]);

        }

        return buf;

    }else{

        return Obj;

    }

}

方法三：

利用ES5内置的函数

var s = JSON.stringify( obj );

var o = JSON.parse( s );

附深度复制 deep clone方法：
1.ES5新增的JSON对象提供的两个方法也可以实现深度复制，分别是JSON.stringify()和JSON.parse();前者用来将对象转成字符串，后者则把字符串转换成对象。

function extendDeep(parent, child) {

    var i,

    proxy;

    proxy = JSON.stringify(parent); //把parent对象转换成字符串

    proxy = JSON.parse(proxy) //把字符串转换成对象，这是parent的一个副本

    child = child || {};

    for(i in proxy) {

        if(proxy.hasOwnProperty(i)) {

            child[i] = proxy[i];

        }

    }

    //因为proxy是中间对象，可以将它回收掉

    proxy = null;

    return child;

}

2.节点克隆：
var p = document.getElementsByTagName("p")[0];
var cP = p.cloneNode();//克隆p节点
var dcP = p.cloneNode(true);//克隆p节点，深度克隆，克隆节点以及节点下面的子内容。

8.说说call，apply，bind的作用和区别？
三者都是用来改变函数的this对象的指向的；
三者第一个参数都是this要指向的对象，也就是想指定的上下文；
三者都可以利用后续参数传参；
bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。

对于 apply、call 二者而言，作用完全一样，只是接受参数的方式不一样。call需要把参数按顺序传递进去，而apply则是把参数放在数组里。
bind()的实现，相当于使用函数在内部包了一个call/apply ，第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无效的。

另：arguments参数是个伪数组，通过var args = Array.prototype.slice.call(arguments);转化为标准数组。
getElementsByTagName、document.childNodes等返回的NodeList对象属于伪数组。不能应用 Array下的 push、pop等方法。通过 Array.prototype.slice.call 可转换为真正的数组。

-----------------------------
9.看下面的代码输出什么，为什么？
function A(x,y){return x+y;}
function M(x,y){return x-y;}
console.log(A.call(M,3,1));
答：输出4
原因：call第一个参数传的是this对象，在A方法里面没有用到，后面的参数按顺序传入的。

10.看下面的代码输出什么，为什么？
console.log(a());
var a = function(){return 1;};
function a(){return 2;}
console.log(a());
答：输出2、1
原因：
JavaScript程序执行按照从上到下的顺序执行，一旦用到变量，则变量名存入到堆内存，变量值存入到栈内存，此时内存回收程序员是无法控制的，只能等待浏览器回收。
一旦执行函数，函数进入到栈内存中，函数的变量被加载到栈内存中，函数执行后，马上释放栈内存。
JavaScript函数和变量声明的“提前”（hoist）行为。
function a(){return 2;} 为函数声明，加载的时候就“提前”了，程序运行前就预处理就完成了，可以写在调用之后，因此第一个输出是2；
var a = function(){return 1;} 为函数表达式，属于按顺序执行，声明一个变量a，把一个匿名函数赋值给变量a，必须写在调用a之前，在调用的时候初始化function 里面的代码块，因此后面输出的是1。

-------------------------

码农公寓

相关文章