前端面试题汇总和知识点

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进行的一种攻击。


你可能感兴趣的:(前端)