Web前端开发工程师面试题

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。

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

Web前端开发工程师面试题的更多相关文章

Web前端开发工程师养成计划【转载】
Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...
Web前端开发工程师基本要求
一位好的Web前端开发工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师.现在说的重点不在于讲解技术,而是更侧重于对技巧的讲解.技术非黑即白,只有对和错 ...
Web前端开发工程师的就业前景
Web前端开发工程师的就业前景 Web前端开发工程师是一个全新的职业,在IT行业真正受到重视的时间不超过5年.因此,大家越来越关心web前端工程师前景怎么样?web前端工程师就业如何?Web前端开发是 ...
从就业面分析web前端开发工程师就业前景（2011&period;6)
案例一公司名称:法国电信北京研发中心工作地点:北京联系方式:hao.luan@orange-ftgroup.com 栾先生岗位名称:web 前端开发工程师岗位要求: 1. 计算机或相关专业本 ...
web前端开发工程师,你了解吗？
web前端开发工程师可以说是一个全新的职业,在IT整个行业中真正受到重视的时间没有超过5年,也正因为这样,大家越来越想了解web前端工程师的前景究竟怎么样?web前端培训就业前景如何?web前端工程师 ...
上海洋码头(www&period;ymatou&period;com)急招技术人才(职位：互联网软件开发工程师，&period;NET网站架构师，Web前端开发工程师，高级测试工程师，产品经理）
对公司招聘职位有兴趣的童鞋可以把简历发送到zhangzhiqiang@ymatou.com,我们HR会快速给你答复. 互联网软件开发工程师岗位职责: 1.参与洋码头各个平台(www.ymatou.c ...
web前端开发工程师
web前端开发工程师百科名片 Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年.Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.在互联网的演化进 ...
web前端开发工程师工资多少
做web前端开发工程师工资高不高?下面千锋小编为大家分析一下:作为目前互联网行业中的主流技术,Web前端一直是占有重要的地位.尤其是近年来HTML5技术的突飞猛进,使Web前端技术有了更好的发展. ...
25个Web前端开发工程师必看的国外大牛和酷站
逛了一周国外大牛们的博客与酷站,真是满满的钦佩.震撼.羡慕.惊喜………… Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要.无论是学习新技术,还是寻找免费资源与工具 ...

随机推荐

Android BLE API&colon; GATT Notification not received
When setting the value to the descriptor instead of putting descriptor.setValue(BluetoothGattDescrip ...
C&num;基础--局部类型Partial
局部类型原本来在同一个命名(namespace)空间下是不允许相同的类(class)名存在的但是partial关键字可以允许在同一个namespace下有想通过的类名存在写法下面的两个不 ...
visual studio 2015提示IE10未安装
将以下代码写入文本: @ECHO OFF :IE10HACK REG ADD "HKLM\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer&q ...
Azure IoT 技术研究系列2-起步示例之设备注册到Azure IoT Hub
上篇博文中,我们主要介绍了Azure IoT Hub的基本概念.架构.特性: Azure IoT 技术研究系列1-入门篇本文中,我们继续深入研究,做一个起步示例程序:模拟设备注册到Azure IoT ...
Linux分区的注意事项以及远程连接排错
分区方式一般有三种第一种:数据不是很重要 /boot(系统的引导分区): 系统引导的信息/软件系统的内核 200M swap( 交换分区): 为了避免系统内存用光了导致系统宕机如果系统内存 ...
BLESS学习笔记
BLESS全称:Bloom-filter-based Error Correction Solution for High-throughput Sequencing Reads,即基于布隆过滤器的高 ...
Python设计模式 - UML - 组合结构图(Composite Structure Diagram)
简介组合结构图用来显示组合结构或部分系统的内部构造,包括类.接口.包.组件.端口和连接器等元素,是UML2.0的新增图. 组合结构图侧重复合元素的方式展示系统内部结构,包括与其他系统的交互接口和通信 ...
jenkins 邮箱设置
一.先设置管理员邮箱地址二.设置邮箱
初学HTML-8
video标签:播放视频格式一:<video src=""> </video> video标签的属性: src:用于告诉video标签需要播放的视频地址. ...
systemd的电源管理
ArchLinux早就使用systemd替代了init脚本. 不用图形界面.或者使用 i3.awesome 这样简单的窗口管理器时,systemd 可以替代 acpid 处理 ACPI 事件. 注意: ...