前端开发知识点解答-问题-面试问题

问题：HTML&CSS基础：对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、HTML5、CSS3、Flexbox

JavaScript基础：数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs，事件委托

基础：移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO（搜索优化）、UED（User Experience Design（用户体验设计））、架构、职业生涯、快速学习能力，严格模式和混杂模式，盒模型（以及与IE的不同），

开发中遇到的问题：事件委托的使用，html，css定位问题，浮动问题，http状态码介绍，重构网址，iE和其他浏览器，优雅降级和渐进增强，前端优化，使用编辑器，git/SVN，开发环境搭建，DOM操作介绍一下，IE和标准DOM事件模型之间存在的差别，JSON，跨域

框架插件：vue生命周期、常用指令，修饰符，子组件和父组件之间的通讯，$route和$router的区别？vuex，axios的常用方法？有没有封装过axios，ESlint，vue数据深拷贝

其他问题：如何管理团队？技术博客？最近学习的东西？介绍作品？工作开发完整流程？开发跨部门协作一般怎么样？页面重构？

职责：
1、精通HTML/CSS/JavaScript/JQuery/Ajax/JSON框架及相关技术，有较强的代码功底；
2、熟悉W3C标准、Web语义化，精通页面布局和架构，能够处理浏览器兼容性问题；
3、熟悉Vue前端框架，熟练使用axios，Vuex；
4、熟悉sass、less或stylus，对前端工程化有一定了解；
5、具备良好的沟通协作能力，做事认真仔细，吃苦耐劳；
6、具备独立完成工作的能力，良好责任心，有上进心，对工作质量要求高。
任职资格：
1、负责前端HTML/CSS/JavaScript/vue代码的编写，实现界面效果、交互和功能，与后端联调接口数据；
2、熟练使用vue-router以及Element，iview，vux等前端ui库，具备发现问题，查找文档学习能力；
3、按产品设计需求完成项目开发迭代，通过与产品经理保持沟通提升用户体验；
4、完成前端核心业务代码及组件的封装；
5、能不断完善和优化前端技术开发规范和流程；
6、性格开朗，保持热情，工作态度严谨，具有很好的团队合作能力。
优先条件：
1、有小程序工作经验，参与过完整的微信小程序开发；
2、有政务开发工作经验；
3、有node.js 开发经验。

块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们；
浮动元素 —— 怎么使用它们、它们有什么问题以及怎么解决这些问题；
HTML与XHTML —— 二者有什么区别，你觉得应该使用哪一个并说出理由；
JSON —— 作用、用途、设计结构。
原来公司工作流程是怎么样的，如何与其他人协作的？如何夸部门合作的？
你遇到过比较难的技术问题是？你是如何解决的？
设计模式知道什么是singleton, factory, strategy, decrator么?
常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
页面重构怎么操作？

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。

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

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

使网站前端兼容于现代浏览器；

针对于SEO进行优化；

减少代码间的耦合；

让代码保持弹性；

严格按规范编写代码；

设计可扩展的API，代替旧有的框架；

增强用户体验；

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

压缩JS、CSS、image等前端资源(通常是由服务器来解决)；

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

采用CDN来加速资源加载；

对于JS DOM的优化；

HTTP服务器的文件缓存；

列举IE与其他浏览器不一样的特性？

事件不同之处：触发事件的元素被认为是目标（target）；而在 IE 中，目标包含在 event 对象的 srcElement 属性；

获取字符代码、如果按键代表一个字符（shift、ctrl、alt除外），IE 的 keyCode 会返回字符代码（Unicode），DOM 中按键的代码和字符是分离的，要获取字符代码，需要使用 charCode 属性；

阻止某个事件的默认行为，IE 中阻止某个事件的默认行为，必须将 returnValue 属性设置为 false，Mozilla 中，需要调用 preventDefault() 方法；

停止事件冒泡，IE 中阻止事件进一步冒泡，需要设置 cancelBubble 为 true，Mozzilla 中，需要调用 stopPropagation()；

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

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

如：border-shadow

渐进增强：针对新功能，从被所有浏览器支持的基本功能开始，逐步地添加那些只有新版本浏览器才支持的功能，向页面增加不影响基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。如：默认使用flash上传，但如果浏览器支持 HTML5 的文件上传功能，则使用HTML5实现更好的体验；

你用过哪些前端性能优化的方法？

1、减少http请求次数：CSS Sprites，JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。

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

3、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

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

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

6、避免使用CSS Expression（css表达式）又称Dynamic properties(动态属性)。

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

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

http状态码有那些？分别代表是什么意思？

简单版

100  Continue   继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200  OK         正常返回信息
201  Created    请求成功并且服务器创建了新的资源
202  Accepted   服务器已接受请求，但尚未处理
301  Moved Permanently  请求的网页已永久移动到新位置。
302 Found       临时性重定向。
303 See Other   临时性重定向，且总是使用 GET 请求新的 URI。
304  Not Modified 自从上次请求后，请求的网页未修改过。
400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden   禁止访问。
404 Not Found   找不到如何与 URI 相匹配的资源。
500 Internal Server Error  最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

完整版

1**(信息类)：表示接收到请求并且继续处理
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本2**(响应成功)：表示动作被成功接收、理解和接受200——表明该请求被成功地完成，所请求的资源发送回客户端201——提示知道新文件的URL202——接受和处理、但处理未完成203——返回信息不确定或不完整204——请求收到，但返回信息为空205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件206——服务器已经完成了部分用户的GET请求3**(重定向类)：为了完成指定的动作，必须接受进一步处理300——请求的资源可在多处得到301——本网页被永久性转移到另一个URL302——请求的网页被转移到一个新的地址，但客户访问仍继续通过原始URL地址，重定向，新的URL会在response中的Location中返回，浏览器将会使用新的URL发出新的Request。303——建议客户访问其他URL或访问方式304——自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用305——请求的资源必须从服务器指定的地址得到306——前一版本HTTP中使用的代码，现行版本中不再使用307——申明请求的资源临时性删除4**(客户端错误类)：请求包含错误语法或不能正确执行400——客户端请求有语法错误，不能被服务器所理解401——请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用HTTP 401.1 - 未授权：登录失败HTTP 401.2 - 未授权：服务器配置问题导致登录失败HTTP 401.3 - ACL 禁止访问资源HTTP 401.4 - 未授权：授权被筛选器拒绝HTTP 401.5 - 未授权：ISAPI 或 CGI 授权失败402——保留有效ChargeTo头响应403——禁止访问，服务器收到请求，但是拒绝提供服务HTTP 403.1 禁止访问：禁止可执行访问HTTP 403.2 - 禁止访问：禁止读访问HTTP 403.3 - 禁止访问：禁止写访问HTTP 403.4 - 禁止访问：要求 SSLHTTP 403.5 - 禁止访问：要求 SSL 128HTTP 403.6 - 禁止访问：IP 地址被拒绝HTTP 403.7 - 禁止访问：要求客户证书HTTP 403.8 - 禁止访问：禁止站点访问HTTP 403.9 - 禁止访问：连接的用户过多HTTP 403.10 - 禁止访问：配置无效HTTP 403.11 - 禁止访问：密码更改HTTP 403.12 - 禁止访问：映射器拒绝访问HTTP 403.13 - 禁止访问：客户证书已被吊销HTTP 403.15 - 禁止访问：客户访问许可过多HTTP 403.16 - 禁止访问：客户证书不可信或者无效HTTP 403.17 - 禁止访问：客户证书已经到期或者尚未生效404——一个404错误表明可连接服务器，但服务器无法取得所请求的网页，请求资源不存在。eg：输入了错误的URL405——用户在Request-Line字段定义的方法不允许406——根据用户发送的Accept拖，请求资源不可访问407——类似401，用户必须首先在代理服务器上得到授权408——客户端没有在用户指定的饿时间内完成请求409——对当前资源状态，请求不能完成410——服务器上不再有此资源且无进一步的参考地址411——服务器拒绝用户定义的Content-Length属性请求412——一个或多个请求头字段在当前请求中错误413——请求的资源大于服务器允许的大小414——请求的资源URL长于服务器允许的长度415——请求资源不支持请求项目格式416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求长。5**(服务端错误类)：服务器不能正确执行一个正确的请求HTTP 500 - 服务器遇到错误，无法完成请求HTTP 500.100 - 内部服务器错误 - ASP 错误HTTP 500-11 服务器关闭HTTP 500-12 应用程序重新启动HTTP 500-13 - 服务器太忙HTTP 500-14 - 应用程序无效HTTP 500-15 - 不允许请求 global.asaError 501 - 未实现HTTP 502 - 网关错误HTTP 503：由于超载或停机维护，服务器目前无法使用，一段时间后可能恢复正常

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

注：这题胜在区分度高，知识点覆盖广，再不懂的人，也能答出几句，而高手可以根据自己擅长的领域自由发挥，从URL规范、HTTP协议、DNS、CDN、数据库查询、到浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等；

简洁版：

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

服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；

浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；

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

详细版：

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

调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法；

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

进行HTTP协议会话，客户端发送报头(请求报头)；

进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器；

进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理；

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

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

文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie；

页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等，页面显示完成；

除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？

？

你用的得心应手用的熟练地编辑器&开发环境是什么样子？

gitee

WebStorm

CSDN

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

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

1、实现界面交互；

2、提升用户体验；

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

前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，参与项目，快速高质量完成实现效果图，精确到1px；与团队成员，UI设计，产品经理的沟通；做好的页面结构，页面重构和用户体验；处理hack，兼容、写出优美的代码格式，代码习惯；针对服务器的优化、拥抱最新前端技术。

你对加班的看法？

加班就像借钱，原则应当是------救急不救穷

平时如何管理你的项目？

先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；

编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；

JS 分文件夹存放命名以该JS功能为准的英文翻译；

图片采用整合的 images.png png8 格式文件使用尽量整合在一起使用方便将来的管理；

当团队人手不足，把功能代码写完已经需要加班的情况下，你会做前端代码的测试吗？

我觉得需要，但我们并没有这样完成

简单描述一下你做过的移动APP项目研发流程？
介绍一个你最得意的作品吧？
你有自己的技术博客吗？
最近在学什么东西？
你的优点是什么？缺点是什么？
如何管理前端团队?
最近在学什么？能谈谈你未来3，5年给自己的规划吗？
使用过什么模拟数据的方法，前后台分离开发，当前端需要自己模拟数据开发的时候？

前端开发知识点解答-问题-面试问题相关推荐

前端开发知识点解答-CSS-面试
目录 CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? CSS选择符有哪些?哪些属性可以继承? CSS优先级算法如何计算? CSS3新增伪类有那些? 如何居中div?如何居中 ...
前端开发知识点解答-VUE-面试
目录 VUE 1.vue几种常用的指令? 2.v-if和v-show区别? 3.vue常用的修饰符有哪些?分别是做什么的? 4.Vue生命周期是什么?第一次页面加载会触发哪几个钩子? 5.Vue组件子 ...
前端开发知识点解答-JavaScript-面试
JavaScript 介绍js的基本数据类型 Undefined.Null.Boolean.Number.String 介绍js有哪些内置对象? Object 是 JavaScript 中所有对象的父 ...
前端开发知识点解答-HTML-面试
目录 Doctype作用?标准模式与兼容模式各有什么区别? HTML5 为什么只需要写 ? 行内元素有哪些?块级元素有哪些? 空(void)元素有那些? 页面导入样式时,使用link和@import有 ...
达内2016前端开发知识点总结--HTML5--8天
HTML5 day01 第三阶段: AJAX - 8 -- 综合且容易出错 HTML5新特性 - 7 -- 零散神不聚 Bootstrap - 5 -- 玩命儿被单词今日目标: (1)WebSto ...
达内2016前端开发知识点总结--bootStrap--4天
bootStrap day01 第三阶段课程 (1)AJAX:数据库.服务器.HTTP.原生AJAX.jQuery-AJAX (2)HTML5新特性 (3)Bootstrap Bootstrap学习特 ...
前端开发知识点整理（1）—网络—秋招/春招/实习/工作
网络目录网络 1 HTTP和HTTPS 1.1 HTTP和HTTPS 1.2说一下HTTP2.0 1.3 HTTP1.0/1.1/2.0/3区别 1.4 HTTP3.0[极少问到,但如果了解,是加 ...
达内2016前端开发知识点总结--ajax php mysql--9天
AJAX day01 第一关: HTML(3).CSS(5) -- 静态页面第二关: JS(7).DOM(6.5).jQuery(6) -- 用户交互第三关: AJAX(9).HTML5(6).B ...
达内2016前端开发知识点总结--jquery--4天
Jquery day01 正课: 1. 什么是jQuery 2. 查找 1. 什么是jQuery jQuery是快速的,简洁的第三方javascript库为什么: 1. DOM操作的终极简化: DO ...

前端开发知识点解答-问题-面试问题

前端开发知识点解答-问题-面试问题相关推荐

最新文章

热门文章