前端面试题汇总和知识点

￡神魔★判官ぃ 2022-05-29 01:21 203阅读 0赞

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

[2018前端面试准备][2018]

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

[44 个 JavaScript 变态题解析][44 _ JavaScript]

[ECMAScript 6 入门][ECMAScript 6]

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

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

[angular原理及模块简介][angular]

[angular 依赖注入原理][angular 1]

[Flex 布局教程][Flex]

[rem与em的使用和区别详解][rem_em]

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

[css面试题][css]

[web前端知识体系大全][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。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；  
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进行的一种攻击。

[2017_100]: http://blog.csdn.net/kebi007/article/details/54882425
[2018]: https://segmentfault.com/a/1190000012428851
[Link 1]: https://juejin.im/entry/58abdf05da2f607e924eb9d1
[44 _ JavaScript]: https://juejin.im/entry/58adabd6da2f6054bd1f499f
[ECMAScript 6]: http://es6.ruanyifeng.com/
[JavaScript]: https://www.cnblogs.com/MuYunyun/p/5933366.html
[Vue_MVVM]: https://segmentfault.com/a/1190000006599500
[angular]: http://blog.csdn.net/u011579138/article/details/53290810
[angular 1]: https://www.cnblogs.com/etoah/p/5460441.html
[Flex]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[rem_em]: http://caibaojian.com/rem-vs-em.html
[XSS_-XSS]: http://blog.csdn.net/u011781521/article/details/53894399
[css]: http://www.cnblogs.com/wangfupeng1988/p/4325007.html
[web]: https://www.cnblogs.com/wangfupeng1988/p/4649709.html