奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 前端面试通 > 笔经面经 >

史上最全前端开发工程师面试题及指导

时间:2017-10-31 21:23来源:百面网 作者:
1、简单的自我介绍2、你觉得一个前端工程师应该具备什么技能3、让你设计一个web站点,假如只有你一个人设计实

1、简单的自我介绍

2、你觉得一个前端工程师应该具备什么技能

3、让你设计一个web站点,假如只有你一个人设计实现,前端后端都让你一个人负责,具体你要怎么做?
需求文档(需求明确),后端数据设计,前端界面设计,前端静态页面实现,前端动态逻辑(与后端数据接口)实现,整体实现,还有细节实现等。

4、对应前端框架,你怎么选择?
第一就是跟html+css展示层关系比较大的,比如bootstrap;
第二就是跟js联系比较大的,比如jQuery;
第三就是html+css+js联系比较大的,比如各种MV**之类的如 angular.js ;
第四就是大前端组织的框架,如模块化 require.js等等
然后就围绕展开啦(但我没有深入理解MV** 所以又跳坑了)

5、你觉得自己做得比较满意的一个项目是什么?
技术难点,遇到的问题,怎么解决的

6、tcp/ip三次握手,四次挥手
首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资源。Client端接收到ACK报文后也向Server段发生ACK报文,并分配资源,这样TCP连接就建立了。

中断连接端可以是Client端,也可以是Server端。
假设Client端发起中断连接请求,也就是发送FIN报文。Server端接到FIN报文后,意思是说”我Client端没有数据要发给你了”,但是如果你还有数据没有发送完成,则不必急着关闭Socket,可以继续发送数据。所以你先发送ACK,”告诉Client端,你的请求我收到了,但是我还没准备好,请继续你等我的消息”。这个时候Client端就进入FIN_WAIT状态,继续等待Server端的FIN报文。当Server端确定数据已发送完成,则向Client端发送FIN报文,”告诉Client端,好了,我这边数据发完了,准备好关闭连接了”。Client端收到FIN报文后,”就知道可以关闭连接了,但是他还是不相信网络,怕Server端不知道要关闭,所以发送ACK后进入TIME_WAIT状态,如果Server端没有收到ACK则可以重传。“,Server端收到ACK后,”就知道可以断开连接了”。Client端等待了2MSL后依然没有收到回复,则证明Server端已正常关闭,那好,我Client端也可以关闭连接了。Ok,TCP连接就这样关闭了!

【问题1】为什么连接的时候是三次握手,关闭的时候却是四次握手?
答:因为当Server端收到Client端的SYN连接请求报文后,可以直接发送SYN+ACK报文。其中ACK报文是用来应答的,SYN报文是用来同步的。但是关闭连接时,当Server端收到FIN报文时,很可能并不会立即关闭SOCKET,所以只能先回复一个ACK报文,告诉Client端,”你发的FIN报文我收到了”。只有等到我Server端所有的报文都发送完了,我才能发送FIN报文,因此不能一起发送。故需要四步握手。

【问题2】为什么TIME_WAIT状态需要经过2MSL(最大报文段生存时间)才能返回到CLOSE状态?
答:虽然按道理,四个报文都发送完毕,我们可以直接进入CLOSE状态了,但是我们必须假象网络是不可靠的,有可以最后一个ACK丢失。所以TIME_WAIT状态就是用来重发可能丢失的ACK报文。

客户端:SYN_SENT -> ESTABLISHED -> FIN_WAIT_1 -> FIN_WAIT_2 -> TIME_WAIT -> CLOSED
服务器:LISTEN -> SYN_RCVD -> ESTABLISHED -> CLOSE_WAIT -> LAST_ACK -> CLOSED

7、mongodb 非关系型数据库
db.tname.insert({id:2})
db.tname.remove({id:2})
db.tname.find({id:2})
db.tname.update({id:2},{$set:{id:3}},false,true)

mongodb以二进制进行存储,对海量数据存储有着明显的优势。
面相文档的数据库,能够更便捷的获取数据。

8、讲讲js的面向对象
主要基于原型实现

9、那它是怎么实现继承的?
Parent.apply(this,arguments);
例如原型链继承方式:A.prototype = new B();

10、那为什么子类的原型要指向父类的实例,为什么不直接等于父类的原型?

11、原型与原型链
在js中,每个函数都有一个原型属性prototype,指向自身的原型,同时prototype也是一个普通对象,而js中每个普通对象都有一个__proto__属性,指向创建它的函数的原型,
这样就形成了原型链了。

12、原生js发送ajax请求一般要经过哪些步骤?
创建XHRHttpRequest对象 -> open -> send -> 事件监听状态码的改变

13、那一般有哪些状态码返回?
1,2,3,4,5开头,分别代表什么含义?

14、你能讲讲304缓存的原理吗?
然后我就扯到了缓存实现的那几种,比如
cache-control:max-age
Expires:
Etag:
If-Modified-Since/Last-Modifed

(然后被问到具体怎么用,组合使用还是单独用,Etag一般怎么生成,可惜我只看过而没实现过,所以又是跳坑)

15、js是一种弱类型语言,有分么优缺点?

16、js数据类型有哪些?

17、js里call()和apply()有什么相同和不同?

18、xmlH和json的区别?
编解码难度,数据体积等
xml有嵌套

19、你最近都在看什么书?讲了些什么?学到了什么?

20、css3有什么新特性?

21、可以介绍一下php嘛?

22、当你访问一个网站时,会用到哪些协议?
1)http
2)tcp/ip
3)udp(dns解析时需要用到,发送udp包进行查询)
4)ip协议
5)arp协议

23、在和服务器建立连接时,用的是TCP还是UDP?
都行,看需求

24、说说常见的排序算法?

25、快速排序算法是一种稳定的算法吗?它的最坏复杂度是多少?平均复杂度呢?
找一个基准,设两个下标记i,j,把比基准小的都放到基准前,大的都放到基准后面,然后递归,分治
不稳定
最好:O(nlogn) 最坏:O(n^2)

26、你用js实现过一些基本的数据结构吗?

27、对于Node.js你了解多少?

28、你能描述一下渐进增强和优雅降级之间的不同吗?
如果提到了特性检测,可以加分。检测浏览器,渐进增强就是让牛b的浏览器的效果更好,优雅降级就是让2b的浏览器在功能ok的情况下效果一般。

29、请解释一下什么是“语义化的HTML”。
语义化的好处:
1)去掉或样式丢失的时候能让页面呈现清晰的结构:html本身是没有表现的,我们看到例如

是粗体,字体大小2em,加粗;是加粗的,不要认为这是html的表现,这些其实html默认的css样式在起作用,所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点,但是浏览器都有有默认样式,默认样式的目的也是为了更好的表达html的语义,可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
2)屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页.
3)PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱).
4)搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.
5)你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
6)便于团队开发和维护语义化的HTML就是:标题用h1-h6,文字段落用p,列表用ul li,大致如此

30、你如何对网站的文件和资源进行优化?
期待的解决方案包括:文件合并文件最小化/文件压缩使用CDN托管缓存的使用(多个域名来提供缓存)其他

31、为什么利用多个域名来提供网站资源会更有效?
三个最主流的原因:
1.CDN缓存更方便
2.突破浏览器并发限制(你随便挑一个G家的url:https://lh4.googleusercontent.com/-si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg,把前面的lh4换成lh3,lh6啥的,都照样能够访问,像地图之类的需要大量并发下载图片的站点,这个非常重要。)
3.Cookieless,节省带宽,尤其是上行带宽一般比下行要慢。。。

32、请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)
1.优化图片
2.图像格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高的地方)
3.优化CSS(压缩合并css,如margin-top,margin-left…)
4.网址后加斜杠(如www.campr.com/目录,会判断这个“目录是什么文件类型,或者是目录。)
5.标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。)
6.减少http请求(合并文件,合并图片)。

33、请写一个简单的幻灯效果页面

34、你都使用哪些工具来测试代码的性能?

35、如果今年你打算熟练掌握一项新技术,那会是什么?
nodejs,html5,css3

36、请谈一下你对网页标准和标准制定机构重要性的理解。
(google)w3c存在的意义就是让浏览器兼容性问题尽量小,首先是他们对浏览器开发者的约束,然后是对开发者的约束。

37、什么是FOUC(无样式内容闪烁)?你如何来避免FOUC?
FOUC-Flash Of Unstyled Content文档样式闪烁

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。解决方法简单的出奇,只要在之间加入一个或者

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-09-02 11:09

关注奔三路