Js面试总结
技术面试:
****JS原生基础
****兼容性问题
****前后端架构
****HTTP基础
****ES5/ES6
****性能优化问题
****webpack原理
2017春招
https://segmentfault.com/a/1190000010631325?_ea=2359607
http://blog.csdn.net/lunaqi/article/details/78402461
面试100题:
http://blog.csdn.net/kebi007/article/details/54882425
JS面试题及答案
http://www.cnblogs.com/lanyueff/p/6400785.html
nodejs面试大全:
https://www.cnblogs.com/meteorcn/p/node_mianshiti_interview_question.html
HTML->Node.JS
https://www.cnblogs.com/itlkNote/p/6831115.html
一道常被人轻视的前端面试题
http://www.cnblogs.com/xxcanghai/p/5189353.html#
闭包的原理
为什么js使用模块化
数据渲染问题 接口问题
commonJS和requirejs的优缺点
页面根据角色权限的变化
开发时使用的架构
腾讯一面:
浏览器的渲染引擎,渲染原理
web安全
XSS
SQL注入
DDos
http状态码
1:100
2:200
3:304
4:404
5:500
同源策略
同源:协议,域名,端口号
对象继承的方式:
原型链继承
构造函数
组合继承
原型式继承
寄生式继承
寄生组合式继承
ES6 class extends
ES6
Promise
JS DOM事件模型
常见的兼容问题,pc端,移动端
JS性能优化的方案
React生命周期钩子函数
实现动画都有哪些途径,方法?
css3: animation
translation
js库封装的动画
canvas
svg
gif
对象继承的实现:
腾讯二面:
百度搜索提示框
重点:
函数节流
焦点侦测
web安全
看整理面试答案
性能优化
看整理面试答案
执行上下文
变量对象
this
作用域链
设计模式
用的最多的是:观察者模式及变种代理模式,工厂模式
跨域 =>
websocket
jsonp
cors:
acao
服务器代理
阿里一面:
ajax原理
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
浏览器解析过程: =>解析html和css的过程:DOM树和渲染树
https://www.cnblogs.com/lhb25/p/how-browsers-work.html
未知宽高的元素在容器中居中:
table-cell
transform:translate
display:flex
JS类型判断:
typeof
instanceof
Object.toString.call()
isArray =>ES5
看JS补充内容笔记
路由实现:
hashHistory
history对象:
history.pushState
history.replaceState
浏览器本地存储:
cookie
localStorage/sessionStorage
后端种session
跨域解决方法:
jsonp
socket
cors
后端跨域方案
数据双向绑定和单向绑定的优缺点:
对于非UI控件来说，不存在双向，只有单向。只有UI控件才有双向的问题。
单向绑定使得数据流也是单向的，对于复杂应用来说这是实施统一的状态管理（如redux）的前提。
双向绑定在一些需要实时反应用户输入的场合会非常方便（比如多级联动菜单）。但通常认为复杂应用中这种便利比不上引入状态管理带来的优势。
单向数据流其实是没有状态的, 这使得单向绑定能够避免状态管理在复杂度上升时产生的各种问题, 程序的调试会变得相对容易, 但强制要求编码时设计思维的一致性.
双向数据流是自动管理状态的, 但是在实际应用中会有很多不得不手动处理状态变化的逻辑, 使得程序复杂度上升, 难以调试, 但程序各个部分自成一体, 不强制要求一致的编码.
如果你的程序需要一个统一的数据源, 应该选择单向数据流, 所有的数据变化都是可观测的, 数据自上而下流动, 即使出问题也很容易找到源头.
如果你的程序本身有多个数据源, 或者是程序的逻辑本身会产生很多的副作用, 应该选择双向绑定的程序, 将大项目分化为小项目, 逐个击破.
阿里二面:
无线端性能优化(大话题)
资源加载
DOM渲染
图片控制:分版本存储到cdn,
多用cdn,cdn请求不携带cookie
多台cdn存在cdn域名解析问题.(不多于5个)
后端优化,
接口响应速度
接口数据分块
tap事件加入的原因:
网址:http://www.jianshu.com/p/19eebc1921b6
两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms。
延迟来自判断双击和长按，因为只有默认等待时间结束以确定没有后续动作发生时，才会触发click事件。所以触摸事件反应更快，体验更好。
本地存取数据
如何编写一个css库
1.考虑各个浏览器的适配和兼容性
2.需要css编译工具作为基础:
sass
less
3.实现css库:
a.reset
b.通用方法
flexbox盒模型兼容
一像素线
css3的动画封装
c.扩展
a.加入mixin
b.传参
c.默认参数和参数不匹配时的默认样式设置
XHR具体底层原理和实现
readystate
state:http状态
api:
open()
send()
getResponseHeader()
setRequestHeader()
onReadyChange()事件
单例模式的实现和所知道的设计模式
jsonp的原理和实现过程,多个jsonp请求如何处理,随机生成多个callback
ES6编译成ES5
webpack + babel,也可以原生使用babel,要有preset
webpack的loader怎么去工作的
loader就是解析文件的.
http://web.jobbole.com/84851/
常见的数据结构和常见的算法
堆栈,队列,链表,树.
Node.js多线程的实现
阿里三面:
对前端的理解
定位:人机交互界面,用户体验
大的方面:
编程特性,工程化.
变复杂,可控,易管理.
许多工作都转移到前端进行控制.
用户体验的提升.
大前端的概念.
前端的概念变得模糊,前端可以涉猎后端所做的事情.
前端的运行环境是浏览器,是和后端的区别.
存在浏览器的兼容问题,也存在移动设备的兼容问题.
适配终端的问题.
前端框架发展史. =>往更高效,易管理方向发展.
对RN的理解
说一说XHR
jQuery选择器的引擎(sizzle)
原文地址:http://www.cnblogs.com/liuzhang/archive/2013/02/06/2905007.html
*jQuery选择器的效率问题
jQuery选择器性能评测工具
$(‘.a’,'.b’)
$(‘.a’).find(‘.b’)
选择器 context 是由 .find() 方法实现的；因此，$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii’)。
在复杂的页面的，最好等选出来在用过滤选择器，不要一次性写在一个string里，因为当有nth|eq|gt|lt|first|last|even|odd 的时候，选择器会从左向右，多次选择，保存，过滤。效率很低。
MD5加密算法的用途
搜狐一面:
DOM操作常用方法: 增删改查
ById
ByClassName(不兼容,IE6)
ByName
ByTagName
querySelector
querySelectorAll
createElement
createDocumentFragment //文档碎片
remove
移动端布局方案:
等比缩放
百分比
...
前后端协作:
前后端不分离 =>性能好,代码不方便管理
前后端+中间层 =>中间层负责整合多个接口数据,进行封装,往前端输出静态页面 =>cms
前后端分离 =>代码方便管理
服务端渲染,服务端模板的变种
服务端模板
ajax原理
项目中遇到的问题 =>深入一点
搜狐二面:
快排,相比冒泡排序的优点
服务端与客户端即时通讯:
socket:
net
websocket
socket.io
轮询,工作场景
comet技术:反向ajax
SSE:
服务端推送数据方法
nginx服务端代理转发配置
对象继承有几种继承方式
this,聊聊JavaScript的this
Easy模式
reference
rem布局的优缺点.(等比缩放)
看到内容相同
百度一面:
说说对前端架构的理解:
https://www.zhihu.com/question/26646855?sort=created
技术栈的选择
前端架构搭建
前端架构搭建后如何开发
编写规范
测试方面,单元测试
前端部署
前端安全
前端统计,埋点,两个维度,pv(按访问次数),uv(按用户统计)
埋点:在按钮上,加1px的透明图片,src有一个url地址,点击之后,请求src中的url进行统计.
前端报警系统:一定时间内功能未被使用.
架构是一个演变的过程。
它指的不是随着历史的演变，而是随着项目演变。
通常说架构，指的是架构模式，自创的架构很少。
了解架构模式，才能心有余力的应对项目的发展。
前端项目大概会经历以下这些阶段：
1. 整体渲染
2. 结构行为表现分离
3. 隔离逻辑单元
4. 插件
5. 模块
6. 前端MVC/MVVM
7. 组件
对前端框架的看法:
分析一下流行的框架:Vue,React,Angluar2,AngluarJS,jQuery
分析用户使用程度.
框架在开源社区的关注度.
框架的优缺点.
mvc框架:backbone
衡量框架的两个标准:
提高开发效率,易维护,
性能高,;例如React采用了虚拟DOM.
从框架发展来看:
React是由fb主导的,版本更新迭代快,维护稳定,社区活跃
Vue则是一个个人主导的项目.
如何做前后端分离:
Vue2新增哪些内容,独立构建和运行时构建有哪些不同:
vue2最主要的更新内容是增加了虚拟DOM,增加了生命周期钩子. https://www.cnblogs.com/blackisblack/p/6995480.html
说一说前端构建的过程:
重点问的是gulp和webpack,前端工程化,部署与发布
爬虫实现的原理:
后端请求http,对返回网页,使用cheerio将返回的字符串,转成DOM,进行DOM操作
****说说webpack工具以及Nodejs:
webpack要实现的功能
externals => 第三方js抽离
总结一下自己使用的loader,plugin
说说css3实现卡片反转:
百度二面:
说说你的职业规划:
说说html的难点:
https://www.zhihu.com/question/20142001
1.了解多个版本的HTML差异。(理解浏览器渲染过程，越细节越好)
2.写代码时注意哪些元素可以嵌套哪些不能。(代码提示的功能太有限)
3.兼容多个设备，多种分辨率甚至多种系统。
4.熟练各个标签的属性和与之产生的效果。
5.知道哪些标签已废弃哪些在实验阶段。
6.知道某些标签虽然效果一样但其实语义差别，以便于搜索引擎爬取。
7.写的页面具有良好的访问性；不光能承受高流量访问还支持残疾人浏览或听页面内容。
8.写的页面尽可能做到无懈可击，不论改什么需求都能保持页面不崩坏。曾经好几次见过将首页CSS外置的2b网站不知道带宽吃紧的用户会直接看到难看的骨架吗？还有网络差导致页面坍塌(因为右下角一个资源引不进来又用了某种不当的布局)的。
9.知道如何写既节省带宽又便于后来者维护的HTML.好的HTML可以加速页面载入。
10.知道哪些浏览器不支持哪些功能特性并能借助资料使该浏览器使用该特性或者是预留后路。
11.唉，写不下去了，还有用户体验啊，互联网心理学啊～……
mvvm框架研究的根就是HTML元素,HTML的属性,HTML的子元素?
说说css的难点,如何实现垂直水平居中.
兼容性问题
js的this是什么,如何改变this?
bind()
call()
apply()
()=>{}
算法的时间复杂度?
X 26个字母,1-7个数字转化成字母?
饿了么:
-
盒模型之box-sizing
-
XHR原理及API
-
session和sessionStorage
-
注册登录中的session和cookie有什么关系?
-
不要混淆 session 和 session 实现。
-
本来 session 是一个抽象概念，开发者为了实现中断和继续等操作，将 user agent 和 server 之间一对一的交互，抽象为“会话”，进而衍生出“会话状态”，也就是 session 的概念。
-
而 cookie 是一个实际存在的东西，http 协议中定义在 header 中的字段。可以认为是 session 的一种后端无状态实现。
-
1. 由于HTTP协议是无状态的协议，所以服务端需要记录用户的状态时，就需要用某种机制来识具体的用户，这个机制就是Session.典型的场景比如购物车，当你点击下单按钮时，由于HTTP协议无状态，所以并不知道是哪个用户操作的，所以服务端要为特定的用户创建了特定的Session，用用于标识这个用户，并且跟踪用户，这样才知道购物车里面有几本书。这个Session是保存在服务端的，有一个唯一标识。在服务端保存Session的方法很多，内存、数据库、文件都有。集群的时候也要考虑Session的转移，在大型的网站，一般会有专门的Session服务器集群，用来保存用户会话，这个时候 Session 信息都是放在内存的，使用一些缓存服务比如Memcached之类的来放 Session。
-
2. 思考一下服务端如何识别特定的客户？这个时候Cookie就登场了。每次HTTP请求的时候，客户端都会发送相应的Cookie信息到服务端。实际上大多数的应用都是用 Cookie 来实现Session跟踪的，第一次创建Session的时候，服务端会在HTTP协议中告诉客户端，需要在 Cookie 里面记录一个Session ID，以后每次请求把这个会话ID发送到服务器，我就知道你是谁了。有人问，如果客户端的浏览器禁用了 Cookie 怎么办？一般这种情况下，会使用一种叫做URL重写的技术来进行会话跟踪，即每次HTTP交互，URL后面都会被附加上一个诸如 sid=xxxxx 这样的参数，服务端据此来识别用户。
-
3. Cookie其实还可以用在一些方便用户的场景下，设想你某次登陆过一个网站，下次登录的时候不想再次输入账号了，怎么办？这个信息可以写到Cookie里面，访问网站的时候，网站页面的脚本可以读取这个信息，就自动帮你把用户名给填了，能够方便一下用户。这也是Cookie名称的由来，给用户的一点甜头。
-
所以，总结一下：
-
Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中；
-
Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。
-
-
map forEach(数组各个API细节)
-
dom事件代理,有什么优点?
-
-
三种隐藏方式差别:visibility:hidden,display:none,opacity:0,定位移动,移除屏幕.
渲染上的差异:
1.将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的回流和重绘。
2.设置元素的visibility为hidden，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会回流。
3.opacity:0,只是看不到元素,元素依然存在并且占有原有位置.
注: 事件绑定的差异:
1、display:none：元素彻底消失，不会触发绑定的事件.
2、visibility:hidden：无法触发其点击事件，有一种说法是display:none是元素看不见摸不着，而visibility:hidden是看不见摸得着，这种说法是不准确的，设置元素的visibility后无法触发点击事件，说明这种方法元素也是消失了，只是依然占据着页面空间。
3、opacity:0：可以触发点击事件，设置元素透明度为0后，元素只是相对于人眼不存在而已，对浏览器来说，它还是存在的，所以可以触发绑定事件
动画属性的差异:
1、display:none：完全不受transition属性的影响，元素立即消失
2、visibility：hidden：元素消失的时间跟transition属性设置的时间一样，但是没有动画效果.
3、opacity:0,动画属性生效,能够进行正常的动画效果.
promise
头条一面:
-
inline和block元素列举,block和inline-block区别?
-
span包含12px大小英文'abc',问span高度?baseline怎么理解?
-
css实现自适应正方形?
-
页面布局中，我们经常需要用百分比来实现宽度自适应，但是如果这时候高度要跟宽度呈固定比例变化，该怎么办呢？
-
很简单，我们可以利用元素的padding或margin的百分比值是参照宽度的这一特性来实现，
-
即如果元素的padding或margin值是百分比值，那么，它的值是根据父元素的宽度来计算的。
-
-
string查找第一个不重复字符.如果换成字符串呢?
-
Angular数据绑定机制?
-
重绘和回流的理解,如何减少回流和重绘
-
querySelectAll和ByClassName所获取元素的区别?如何绑定事件?
-
getComputedStyle用法?
-
getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。
-
-
addEventListener绑定事件?参数不同的执行顺序.
-
正则匹配电话号码.exec,match,search用法?推荐一篇高质量正则文章
-
数据类型判断的方法,toString判断的来源?
-
ES6 class原理?
-
function rest参数长度?function.length如何判断与arguments对象长度区别?
js defer async顺序,模块依赖(AMD,CMD差别)
defer:
该属性使得浏览器能延迟脚本的执行，等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。也就是说defer属性的