前端面试题汇总和知识点

2017年前端面试题整理汇总100题

2018前端面试准备

前端面试常见问题按知识点分类整理

44 个 JavaScript 变态题解析

ECMAScript 6 入门

深入浅出JavaScript之原型链&继承

剖析Vue原理&实现双向绑定MVVM

angular原理及模块简介

angular 依赖注入原理

Flex 布局教程

rem与em的使用和区别详解

XSS跨站脚本攻击-XSS攻击的三种类型

css面试题

web前端知识体系大全

js基础
1、JS有哪些手段可以实现继承。
1. 原型链（prototype chaining）、es6的extend
2. call()/apply() / 对象冒充
3. 混合方式(prototype和call()/apply()结合)
2、说说JS的闭包
当一个函数返回它内部定义的一个函数时，就产生了一个闭包，闭包不但包括被返回的函数，还包括这个函数的定义环境。
闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，不必要的闭包只会增加内存消耗
3、内存泄露 
当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。btn.onclick = null;或者采用事件委托
闭包可以维持函数内局部变量，使其得不到释放。
4、作用域和作用域链（Scope Chain）
内部函数可以访问外部函数变量
变量的提前声明
执行环境（execution context）
this对象
5、ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制 2k
安全问题 GET 方式请求的数据会被浏览器缓存起来
6、跨域方式
jsonp原理
cors 服务器设置Access-Control-Allow-Origin
document.domain跨子域
window.name
window.postMessage HTML5
flash
7、垃圾回收机制方式及内存管理
垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存
垃圾回收策略：标记清除(较为常用)和引用计数
定义和用法：当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为："离开环境"。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。
合理的GC方案：(1)、遍历所有可访问的对象; (2)、回收已不可访问的对象
8、页面的缓存 cookies，sessionStorage和localStorage
当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费
Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M
9、用纯JS实现，点击一个列表时，输出对应的索引（不能用JQuery哦） 
闭包/事件委托/let
10、switch 是严格比较



HTML & CSS基础
1、css兼容性
DOCTYPE 影响 CSS 处理
FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width 
FF: 支持 !important， IE 则忽略， 可用 !important 为 FF 特别设置样式 
在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;} 
2、position的有哪些值以及意义
static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。（在IE7和IE8下需要描述！DOCTYPE才能支持）
sticky 粘性定位，css3新属性，relative和fixed的结合体
3、CSS实现矩形按钮右边缘的中间有个往里凹的小半圆
css伪类，.btn:after
4、盒子模型  
元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）
5、简述一下src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
6、浏览器是如何渲染页面的？
1.解析HTML文件，创建DOM树。自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式 3.将CSS与DOM合并，构建渲染树（Render Tree）
4.布局和绘制，重绘（repaint）和重排（reflow）
7、CSS实现垂直水平居中
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
8、em和rem
动态设置像素值，由浏览器转换为像素值
rem是基于页根元素（html元素）的字体大小来决定
em则根据使用它的元素（父类元素）的大小决定，可能受任何继承的父元素字体大小影响
9、Bootstrap响应式实现的原理  

css媒体查询判断出终端设备的容器宽度

10、inherit、initial、unset

inherit 继承，
initial 默认，

unset是initial 和 inherit 的组合

所有元素可继承：visibility 和 cursor
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
表格元素可继承：border-collapse
11、防止外边距重叠解决方案
外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素 加float:left;或display:inline-block;
内层元素padding:1px;

web优化
1、你如何对网站的文件和资源进行优化
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
2、url，一次完整的HTTP事务是怎样的一个过程？
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
3、TCP和UDP的区别
a.基于连接与无连接
b.TCP要求系统资源较多，UDP较少； 
c.UDP程序结构较简单 
d.流模式（TCP）与数据报模式(UDP); 
e.TCP保证数据正确性，UDP可能丢包 
f.TCP保证数据顺序，UDP不保证 
4、http和tpc的关系，以及什么是https
计算机网络的tcp三次握手以及http的请求头等。https是使用安全套接字进行加密的，可以说HTTPS = SSL + HTTP。
5、Node的特点（优点和缺点）
Node的特点是异步非IO阻塞、适合高并发，但不适合密集型计算

算法
1、快速排序
采用二分法，取出中间数，数组每次和中间数比较，小的放到左边，大的放到右边。
时间复杂度：O(nlog2(n))
2、冒泡排序
每次比较相邻的两个数，如果后一个比前一个小，换位置。
时间复杂度：O(n^2)
3、实现一个算法，寻找字符串中出现次数最少的、并且首次出现位置最前的字符
如"cbaacfdeaebb"，符合要求的是"f"，因为他只出现了一次（次数最少）。并且比其他只出现一次的字符（如"d"）首次出现的位置最靠前。

其他应用
1、实时消息的实现
轮循、长连接、websockt
2、React.js特点
　　（1）声明式设计
　　（2）高效：通过对DOM的模拟，最大限度的减少与DOM的交互。
　　（3）灵活：可以与已知的框架或库很好的配合。
　　（4）JSX：是js语法的扩展，不一定使用，但建议用。
　　（5）组件：构建组件，使代码更容易得到复用，能够很好地应用在大项目的开发中。
　　（6）单向响应的数据流：React实现了单向响应的数据流，从而减少了重复代码，这也是解释了它为什么比传统数据绑定更简单。
3、angular和vue的区别
Vue拥有类似 Angular 的双向数据绑定，以及类似 React 的虚拟DOM。
4、Angular和Vue双向数据绑定的实现原理
vue访问器属性
angular脏数据检测
5、Web攻击技术
XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。