法门扫地僧总结前端面试题
Front-End
前端开发工程师面试宝典! (本文部分有转载,不定期更新!) ![AppVeyor](https://img.shields.io/badge/%E6%89%AB%E5%9C%B0-%E5%83%A7-green.svg?style=plastic)
前言(README.md)
本仓库是我整理的前端常见面试题,大部分由我整理,其中个别部分参考网上其他资料,感谢!
本资料仅供大家学习参考使用!欢迎大家Star和提交issues。
NO.1 README
NO.2 简历经验分享
NO.3 angular常见问题
NO.4 前端面试宝典第一版
NO.5 前端笔记版本第二版
NO.6 前端笔记版本第三版
NO.7 前端笔记版本第四版
NO.8 vue常见问题
欢迎大家一起交流提高
AMD和CMD是什么?它们的区别有哪些?
-
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。这些规范的目的都是为了 JavaScript 的模块化开发,特别是在浏览器端的。目前这些规范的实现都能达成浏览器端模块化开发的目的。
区别:- 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible.
- CMD 推崇依赖就近,AMD 推崇依赖前置。
- AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动。CMD 里,每个 API 都简单纯粹。
web开发常见的漏洞
- XSS(跨站脚本攻击):其原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码,当其它用户浏览该网站时,这段HTML代码会自动执行,从而达到攻击的目的。如,盗取用户Cookie、破坏页面结构、重定向到其它网站等。
- SQL注入:用户可以提交一段数据库查询代码,根据程序返回的结果,获得某些他想得知的数据,这就是所谓的SQL Injection,即SQL注入。
cookie和session
- 你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择,
都纪录下来。当下次你再光临同一个网站,WEB 服务器会先看看有没有它上次留下的 Cookie 资料,有的话,就会依据 Cookie
里的内容来判断使用者,送出特定的网页内容给你。
当程序需要为某个客户端的请求创建一个session时,服务器首先检查这个客户端的请求里是否已包含了一个session标识
(称为session id),如果已包含则说明以前已经为此客户端创建过session,服务器就按照session id把这个session检索出来
使用(检索不到,会新建一个),如果客户端请求不包含session id,则为此客户端创建一个session并且生成一个与此session相
关联的session id
MVC BFC
- mvc是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式。MVC对应Html,CSS,js。
+BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。流体特性:块状水平元素,如div元素(下同),在默认情况下(非浮动、绝对定位等),水平方向会自动填满外部的容器;BFC元素特性表现原则就是,内部子元素不会影响外部的元素。
HTTP状态码:
1.消息 2.成功 3.重定向 4.请求错误 5.服务器错误
304:响应禁止包含消息体,如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。
305:被请求的资源必须通过指定的代理才能被访问。
400:语义有误,当前请求无法被服务器理解。除非进行修改,否则客户端不应该重复提交这个请求,或者请求参数有误。
403:服务器已经理解请求,但是拒绝执行它。
404:请求失败,请求所希望得到的资源未被在服务器上发现。
500:服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。一般来说,这个问题都会在服务器端的源代码出现错误时出现。
理解CSS盒子模型
- 什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。
+CSS盒子模式
这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式。那么内容就是盒子里装的东西;而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框就是盒子本身了;至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛。在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。而且填充只有宽度属性
DNS的工作原理(递归和迭代)(应用层)
DNS的工作原理及过程分下面几个步骤:
第一步:客户机提出域名解析请求,并将该请求发送给本地的域名服务器。
第二步:当本地的域名服务器收到请求后,就先查询本地的缓存,如果有该纪录项,则本地的域名服务器就直接把查询的结果返回。
第三步:如果本地的缓存中没有该纪录,则本地域名服务器就直接把请求发给根域名服务器,然后根域名服务器再返回给本地域名服务器一个所查询域(根的子域) 的主域名服务器的地址。
第四步:本地服务器再向上一步返回的域名服务器发送请求,然后接受请求的服务器查询自己的缓存,如果没有该纪录,则返回相关的下级的域名服务器的地址。
第五步:重复第四步,直到找到正确的纪录。
第六步:本地域名服务器把返回的结果保存到缓存,以备下一次使用,同时还将结果返回给客户机。
什么是DOM事件处理程序?
首先要理解什么是DOM?Dom是针对HTML文档的一个API。什么是事件流?事件流分为:事件冒泡(IE的事件流)和事件捕获。事件冒泡就是由最具体的元素开始接收,然后逐级向上;事件捕获就是由不太具体的元素开始接收,逐级向下,最具体的元素最后才接收到事件。
DOM事件处理程序分为DOM0级、DOM2级。DOM0级具有简单,跨浏览器的优势,它是把函数赋值给一个事件的处理程序属性。
如果给一个元素同时绑定两个事件,会怎么样?
Dom 0级和Dom 2级都可以给一个元素添加多个事件,Dom 0级的每个事件只支持一个事件处理程序,如果绑定同一个事件,那么后边的那个事件,函数会覆盖掉前边的那个事件函数。Dom2级可以添加多个事件处理程序,他们会按照添加的顺序触发。
jQuery源码分析:
选择器 Sizzle引擎 回调对象 - Callbacks 事件绑定 - 绑定设计
DOM操作方法与核心 Ajax - 整体结构
选择器 Sizzle引擎:个人认为,sizzle选择器是增强版的querySelectorAll 函数:返回指定元素节点的子树中匹配selector的节点集合,采用的是深度优先预查找;如果没有匹配的,这个方法返回空集合)
几个前端框架的区别:
jQuery
核心js只有50K,小而精,占用带宽小,侧重于对js dom编程。有灵活便捷的Ajax请求和回调操作。
ExtJS
一整套带有UI的js库,封装得很多,核心js就600多K,这么大的东西门户网站当然就别想了,里面的效果当然也不会运用到门户网站,所以它是专门为管理系统而生的。
3、YUI
或者是类似于网盘应用这种东东。
4.Dojo
Dojo是功能最为强大的javascript框架,刻意提醒一下:功能最强大。所以它几乎包含了所有你可能想要用到的东西。)。 Dojo更适合企业应用和产品开发的需要,
5、Prototype
最成熟的。但个人认为可以被Jquery取代。两者相似度也比较高。
前端性能优化
①对于页面来说:尽量减少DOM元素的数量
减少iframe的数量
减少http的请求次数
提前加载
②对于CSS来说:将样式表置顶
使用link代替@important
区别1:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
区别2:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。link支持定义RSS(简易信息聚合).
区别3:link支持使用Javascript控制DOM去改变样式;而@import不支持。
③对于JS来说: 将脚本置底
使用外部JS和CSS文件
精简JS和CSS文件,去除重复脚本
目前,前端性能测试的执行工具也有很多,比如YSlow,Page Speed,dynaTrace AJAX Edition,webload等等。
HTML语义化
就是当你写html时,要按照人们的思考逻辑写。不但要自己能看懂,也要让别人也能看懂,不要让别人觉得你的代码很乱。语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用。
语义化的网页的好处,最主要的就是对搜索引擎友好,有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。
语义 Web 技术有助于利用基于开放标准的技术,从数据、文档内容或应用代码中分离出意义。
说说jsonp,getJSON(),getScript():
Jsonp(解决跨域)
一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
因为,