2016最新的WEB前端开发工程师面试题(综合型)网页前端/web开发工程师

/ 集美大学外国语学院网页前端/web开发工程师 / 2017-04-08

WEB前端开发,WEB前端开发工程师,汇鱼人才

1、页面重构怎么操作?

网站重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。

也就是说是在不改变UI的情况下,对网站进行优化,在扩展的同时保持一致的UI

 

对于传统的网站来说重构通常是

 

表格(table)布局改为DIV+CSS

使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)

对于移动平台的优化

针对于SEO进行优化

深层次的网站重构应该考虑的方面

 

减少代码间的耦合

让代码保持弹性

严格按规范编写代码

设计可扩展的API

代替旧有的框架、语言(VB)

增强用户体验

通常来说对于速度的优化也包含在重构中

 

压缩JSCSSimage等前端资源(通常是由服务器来解决)

程序的性能优化(如数据读写)

采用CDN来加速资源加载

对于JS DOM的优化

HTTP服务器的文件缓存

 

299%的网站都需要被重构是那本书上写的?

网站重构:应用web标准进行设计(第2版)

 

3什么叫优雅降级和渐进增强?

优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会针对旧版本的IE进行降级处理了,使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。

如:border-shadow

 

渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。

如:默认使用flash上传,但如果浏览器支持 HTML5 的文件上传功能,则使用HTML5实现更好的体验;

 

4WEB应用从服务器主动推送Data到客户端有那些方式?

html5提供的Websocket

不可见的iframe

WebSocket通过Flash

XHR长时间连接

XHR Multipart Streaming

<script>标签的长时间连接(可跨域)

 

5、Node的优点和缺点提出了自己的看法?

(优点)因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,

因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。

此外,与Node代理服务器交互的客户端代码是由javascript语言编写的,

因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。

 

Node是一个相对新的开源项目,所以不太稳定,它总是一直在变而且缺少足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子。

 

6你有用过哪些前端性能优化的方法?

  (1) 减少http请求次数:CSS Sprites, JSCSS源码压缩、图片大小控制合适;网页GzipCDN托管,data缓存 ,图片服务器。

 

  (2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

 

  (3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。

 

  (4) 当需要设置的样式很多时设置className而不是直接操作style

 

  (5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

 

  (6) 避免使用CSS Expressioncss表达式)又称Dynamic properties(动态属性)

 

  (7) 图片预加载,将样式表放在顶部,将脚本放在底部  加上时间戳。

 

  (8) 避免在页面的主体布局中使用tabletable要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。

对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,能在缓存服务器上直接返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取,缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成(例如join查询),减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分,换语言是无法优化的。

 

7一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?(流程说的越详细越好)

注:这题胜在区分度高,知识点覆盖广,再不懂的人,也能答出几句,

而高手可以根据自己擅长的领域自由发挥,从URL规范、HTTP协议、DNSCDN、数据库查询、

到浏览器流式解析、CSS规则构建、layoutpaintonload/domreadyJS执行、JS API绑定等等;

 

  详细版:

    1、浏览器会开启一个线程来处理这个请求,对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;

    2、调用浏览器内核中的对应方法,比如 WebView 中的 loadUrl 方法;

    3、通过DNS解析获取网址的IP地址,设置 UA 等信息发出第二个GET请求;

    4、进行HTTP协议会话,客户端发送报头(请求报头);

    5、进入到web服务器上的 Web Server,如 ApacheTomcatNode.JS 等服务器;

    6、进入部署好的后端应用,如 PHPJavaJavaScriptPython 等,找到对应的请求处理;

    7、处理结束回馈报头,此处如果浏览器访问过,缓存上有对应资源,会与服务器最后修改时间对比,一致则返回304;

    8、浏览器开始下载html文档(响应报头,状态码200),同时使用缓存;

    9、文档树建立,根据标记请求所需指定MIME类型的文件(比如cssjs,同时设置了cookie;

    10、页面开始渲染DOMJS根据DOM API操作DOM,执行事件绑定等,页面显示完成。

 

  简洁版:

    浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求;

    服务器交给后台处理完成后返回数据,浏览器接收文件(HTMLJSCSS、图象等);

    浏览器对加载到的资源(HTMLJSCSS等)进行语法解析,建立相应的内部数据结构(如HTMLDOM);

    载入解析到的资源文件,渲染页面,完成。

 

8对前端工程师这个职位是怎么样理解的?它的前景会怎么样?

前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。

1、实现界面交互

2、提升用户体验

3、有了Node.js,前端可以实现服务端的一些事情

 

前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好

参与项目,快速高质量完成实现效果图,精确到1px

与团队成员,UI设计,产品经理的沟通;

做好的页面结构,页面重构和用户体验;

处理hack,兼容、写出优美的代码格式;

针对服务器的优化、拥抱最新前端技术。

 

9是否了解公钥加密和私钥加密。

一般情况下是指私钥用于对数据进行签名,公钥用于对签名进行验证;

HTTP网站在浏览器端用公钥加密敏感数据,然后在服务器端再用私钥解密。


以上是汇鱼人才WEB前端开发工程师的整合的综合型面试题,希望对WEB前端开发工程师有所帮助。



公众号,微信

汇鱼网海峡创乐汇
汇鱼网海峡创乐汇