前端面试题整理
题目question
✧ 用原生JavaScript的实现过什么功能吗？
✧ 模块化开发怎么做？
✧ JS模块加载器的轮子怎么造，也就是如何实现一个模块加载器？
✧ 需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
✧ 原来公司工作流程是怎么样的，如何与其他人协作的？如何夸部门合作的？
✧ 打点方式
✧ 设计模式 知道什么是singleton单例模式, factory工厂模式, strategy策略模式, decrator装饰者模式，adapter适配器模式么?
✧ 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
✧ 部分地区用户反应网站很卡，请问有哪些可能性的原因，以及解决方法？
✧ 从打开app到刷新出内容，整个过程中都发生了什么，如果感觉慢，怎么定位问题，怎么解决?
✧ 你怎么看待Web App 、hybrid App、Native App？
✧ 你移动端前端开发的理解？（和 Web 前端开发的主要区别是什么？）
✧ 当团队人手不足，把功能代码写完已经需要加班的情况下，你会做前端代码的测试吗？
✧ 说说最近最流行的一些东西吧？常去哪些网站？
✧ 简单描述一下你做过的移动APP项目研发流程？
✧ 你认为怎样才是全端工程师（Full Stack developer）？
✧ 介绍一个你最得意的作品吧？
✧ 最近在学什么东西？
✧ 如何管理前端团队?
✧ 最近在学什么？能谈谈你未来3，5年给自己的规划吗？
✧ ES6是如何实现编译成ES5的？
✧ css-loader的原理？
✧ 服务器代理转发时，该如何处理cookie？
✧ 什么是“前端路由”？什么时候适合使用“前端路由”？“前端路由”有哪些优点和缺点？
☞ 用原生JavaScript的实现过什么功能吗？
此题用意是希望面试者能在不依赖的框架下实现一些常用功能
可回答简单的模板渲染（实现原理：借助正则表达式和String.prototype.replace(str, callback)实现），
setTimeout实现节流（throttling)防抖(debouncing)，
简单动画（用js预先算好每一帧要描绘的图形的位置，大小等属性，定时渲染，降低每帧运算量，带重力效果的动画），
☞ 模块化开发怎么做？
es6 module (node2)
commonJS (nodejs) require()
requireJS
☞ JS模块加载器的轮子怎么造，也就是如何实现一个模块加载器？
资源定位（即require操作）
模块加载顺序（解决循环依赖）
作用域管理（解决模块私有作用域）
模块初始化后重复利用的问题
（https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/）
☞ 需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
hashchange（兼容性较好，作为兜底方案）
history manipulate（浏览器之间支持程度不同，较新浏览器支持较好）pushState()、 popstate
☞ 原来公司工作流程是怎么样的，如何与其他人协作的？如何夸部门合作的？
⓵ 需求评审（技术提出实现上的问题，以及开发性价比等，产品针对技术反馈调整需求）
⓶ UI设计
⓷ 排期（分模块）
⓸ 开发
⑴（前后端分离项目先通过rap、swagger等工具约定前后端接口；否则前端负责编写服务端模板blade、smarty、velocity【JS动画库】；与客户端有接口协议的话，也要在这个阶段约定好）
⑵ 整体适配方案、使用框架选型、工程脚手架
⑶ 分模块开发
⑷ 通过git进行代码合并
⑸（添加打点调用）
⑹ 自测
⑺（与后端、客户端接口联调）
⓹ 提测->改bug->提测
⓺ 上线
⓻ 线上回归
❀ 协作工具：jira，atlassian conference
☞ 打点方式
百度统计
自有统计方式（navigator.sendBeacon()，GET图片）
❀ 目的：便于产品功能优化（产品、运营方向）、便于分析用户（数据挖掘方向）、便于分析服务稳定性和网络、页面性能数据（技术方向、Performance.getEntries()打点）
☞ 设计模式 知道什么是singleton单例模式, factory工厂模式, strategy策略模式, decrator装饰者模式，adapter适配器模式么?
模板方法模式
职责链模式
发布订阅模式
代理模式
外观模式
☞ 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
dom操作： jquery zepto
mvc、mvvm：anglarJS，react，vueJS
模板： mustache，Handlebars
工具类： underscore lodash pdf.js
路由： 做spa（单页面应用：好处是更接近原生app的体验）
状态管理： Redux vuex
动画相关： Velocity.js 、three.js
UI库： boostrap
全栈： extjs
绘图： echarts，highcharts
测试： unitjs（面向接口开发）
app类： react native， weex
适配型： Modernizr（检查浏览器特性检查）
css： scss/sass/less/stylus
http调试：fiddler（charles）
开发：vscode（微软，免费，强大，插件，调试，shell，任务，生态圈）
UI调试：chrome
工程化：webpack，gulp，fis，grunt，browerfy
切图：ps，GIMP
版本管理：git，svn
性能分析：chrome developer tools
包管理：npm，github
开发社区：stackoverflow
mock数据/接口定义：rap、swagger
实验工具/参考：JSFiddle，codepen
轮播图、转盘、日历、倒计时、进度条
☞ Web页面性能测试工具有哪些
✿ 基于网页分析工具：
1、阿里测
2、百度应用性能检测中心
✿ 在线网站
1、Web PageTest
2、ShowSlow
✿ 基于浏览器分析工具：
1、Chrome自带工具F12
2、Speed Tracer
基于chrome的插件，同样是有google产的，这个是web前端页的性能记录和分析工具，同时还提供一个规则和建议的评测。
3、FireBug
它可以对页面进行调试，可以记录所有网页的访问耗时，下载的资源等。
4、Page Speed
基于firebug的web页面优化的评测工具，同时还有支持chrome的插件，因为是google产的。
5、YSlow
基于firebug的评测分析工具，yahoo产；和page speed类似工具，会给出页面的评分和优化说规则，同时会提供页面下载资源的统计分析功能，还提供了一些小工具，如js运行检测，图片的优化工具，未符合规则的资源有哪些等等。总的来说是page speed的增强版。
☞ 部分地区用户反应网站很卡，请问有哪些可能性的原因，以及解决方法？
机器（手机）配置差，用户网速慢或信号不好，dns慢或不稳定，没用cdn（静态资源），没用多线机房（动态资源），网站线路不好，线路故障，机房故障，
服务器负载高，大量请求排队甚至失败（超时被丢弃），服务器带宽跟不上，服务性能跟不上，
页面：请求多，文件大小大，域名没有分流，首屏没单独优化，dom过于庞大，样式表选择器没优化，js没优化，动效没有优化，单屏图片过于密集
☞ 从打开app到刷新出内容，整个过程中都发生了什么，如果感觉慢，怎么定位问题，怎么解决?
先加载本地缓存（如果有的话），然后调用接口获取最新数据，然后渲染界面
接口调用慢：有可能是dns问题，网速较慢，服务端响应慢，可以通过服务端日志判断，如果怀疑dns慢可以单独对dns进行测试，网速慢可通过静态文件传输测试
界面宣染慢：由于本机资源不足造成，可重启手机，也可能是系统问题，可换同型号手机进行测试，也可能是加载资源过多（特别是视频，图片等），可减少相应资源请求判断，也可能是程序优化不足，可以通过查看手机cpu、内存占用情况判断
☞ 除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？
对服务端语言也感兴趣，曾写过php的简单程序
☞ 你怎么看待Web App 、hybrid App、Native App？
ღ web app: 使用html、css3、js等web技术构建的app，它是前端开发人员向模仿native app方向做出的一个尝试，比如h5游戏，它的特点是开发门槛更低，周期更短，且用户不用下载安装包，使用门槛低，但是，因为web技术并不足以支撑app级别效果，所以性能存在较明显的差距，功能也有诸多限制
ღ hybrid app: 是指在native app内，通过webview 或其他手段，嵌入web语言编写的app，他的特点是，由native app提供了底层接口，可以增强web app的体验，扩展功能，所以叫hybrid app
ღ native app: 一般是指使用java或object C等语言开发的，需要编译、打包、安装才可使用的一类app，它的特点是开发成本较高，性能较好
☞ 你移动端前端开发的理解？（和 Web 前端开发的主要区别是什么？）
主要区别是移动端所使用的设备性能较差，需要更好的优化，面对的浏览器环境更为复杂，需要更全面的适配工作，且移动端可以旋转设备，也对响应式布局提出了更大挑战，
且移动端网速可能较慢，需要对加载速度，特别是首屏加载做特殊优化，另外整站的流量也需要一定控制，
移动端调试较为困难，特别是没有提供开发者调试工具的浏览器。往往只能靠实验。
好处是大部分移动端浏览器都是webkit内核，可以远离IE 而且可以使用较多web语言新特性
☞ 如何设计突发大规模并发架构？
前端页面作为第一道屏障，在高峰期通过页面加人为限制降低用户访问频率
还可通过验证码等技术手段，规避机器脚本的自动化请求，也可降低一般用户的访问频率
可以通过队列的方式，将流量以排队的方式慢慢消耗，同时页面以友好的交互安抚用户
可以通过缓存或多级缓存降低只读请求的压力
可以通过主动放弃请求，返回错误的方式避免服务器过载
☞ 当团队人手不足，把功能代码写完已经需要加班的情况下，你会做前端代码的测试吗？
会的 因为我是测试驱动的开发习惯，一边开发一边测试
☞ 说说最近最流行的一些东西吧？常去哪些网站？
mdn，github，stackoverflow，google developers，segmentfault，codepen
https://zhuanlan.zhihu.com/zero-weapp
☞ 简单描述一下你做过的移动APP项目研发流程？
☞ 你在现在的团队处于什么样的角色，起到了什么明显的作用？
☞ 你认为怎样才是全端工程师（Full Stack developer）？
可以一个人完成包括服务端的网站或app开发，又能开发前端，又能开发服务端，还能设计数据库
☞ 你有自己的技术博客吗，用了哪些技术？
md技术，编译成网页
☞ 介绍一个你最得意的作品吧？
活动模板
☞ 项目中遇到国哪些印象深刻的技术难题，具体是什么问题，怎么解决？有什么收获
转盘动画
第⓿步: 通过 setinterval 不断修改 transform 的 rotate() 函数
第❶步: 通过zepto animate方法操纵transform属性实现, 很慢
第❷步: transform 加上3d属性 perspective: 1000，利用了gpu，效果稍好
第❸步: 使用 animation 属性实现，缺点是每次都需要新建大量属性到样式表，较为繁琐，而且支持的浏览器较少（前几年）
第❹步: 使用 transition 属性，控制 rotate xxturn实现，同时加3d属性加速，效果较好，且程序实现上较为简单
第❺步: 发现一个问题，需要转多次的时候，圈数会不断增加，为了调试方便需要重置圈数，解决此问题需要先解除 transition 再重置
☞ 最近在学什么东西？
es6 2018
☞ 你的优点是什么？缺点是什么？
坚持不懈，不轻易放弃。缺点是有时候会考虑太多，过度设计
☞ 如何管理前端团队?
☞ 最近在学什么？能谈谈你未来3，5年给自己的规划吗？
目标是成为全栈工程师，近期在学es6+ 明年计划学习node，能使用express/koa开发简单后端
☞ ES6是如何实现编译成ES5的？
transpiles工具 babel（部分特性不支持）
☞ css-loader的原理？
☞ 服务器代理转发时，该如何处理cookie？
☞ 什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
1，什么是前端路由？
路由是根据不同的 url 地址展示不同的内容或页面
前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。
2，什么时候使用前端路由？
在单页面应用，大部分页面结构不变，只改变部分内容的使用
3，前端路由有什么优点和缺点？
优点：
用户体验好，不需要每次都从服务器全部获取，快速展现给用户
缺点：
使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置
