前端面试扩展---kalrry

自我介绍

01、叫什么
02、来自哪里
03、就职于哪家公司或者之前就职于哪些公司
04、这家公司主要是干什么的或者说上家公司主要是干什么的
05、在公司里担任什么职位
06、工作内容是什么
07、用了什么技术，做了什么事
08、除去工作外，平时喜欢做些什么
09、有发展目标的话也可以说说
10、为什么离职啊

1、你们公司有自己的脚手架工具么，他是怎么工作的？

有的 在项目最开始的时候，就帮你搭建好架子，脚手架工具会生成好一些基本代码，一般是遵循MVC结构代码。比如生成好 struts+spring+hibernate 三个框架整合好的脚手架代码，会包含一下简单的CRUD代码、数据源、视图层等等项目中很常用的。

2、webpack的核心思想是什么

一句话概括：webpack是一个模块打包工具（module bundler）。重点在于两个关键词“模块”和“打包”

3、Loader和Plugin的区别

Loader

直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。

Plugin

直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

4、有哪些常见的Loader和Plugin，简单聊一聊各自的作用

Loader:

babel-loader：把 ES6 转换成 ES5css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。

Plugin:

define-plugin：定义环境变量
commons-chunk-plugin：提取公共代码
uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码

5、说一下 Webpack 的热更新原理吧

webpack热更新Hot Module Replacement应该所有人都知道，现象就是你修改代码保存之后，浏览器不会刷新，只会修改你更改过的依赖代码。我们平时用webpack-dev-server如果没有配置，是直接刷新浏览器，并不是热更新。
之前遇见几次问webpack热更新原理，我只是知道和怎么使用，也没真的去了解一下，这次了解了一下，发现没有对webpack深层次研究，根本不懂，所以今天只是简单了解一下，具体还是得去研究源码才能真正掌握。
实现webpack热更新就不说了，官网HMR指南写的很清楚，用vue开发或者用react开发也都可以看效果。至于HMR的好处说来说去就一个，提升开发效率，即不用你手动刷新浏览器，还可以保持浏览器状态。
我们一般用webpack-dev-server启动一个开发服务，webpack内部实现watch，文件发生修改就重新打包编译保存在内存中，webpack-dev-server依赖中间件webpack-dev-middleware和webpack之间进行交互，如果文件变化了，没有配置热更新，webpack-dev-server会通知浏览器进行刷新，注意是刷新不是热更新。启动开发服务之后，浏览器和服务端是通过websocket进行长连接的，可以自己在network里面看。

6、如何优化 Webpack 的构建速度

1.多入口情况下，使用CommonsChunkPlugin来提取公共代码
2.通过externals配置来提取常用库
3.利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
4.使用Happypack 实现多线程加速编译
5.使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。 原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
6.使用Tree-shaking和Scope Hoisting来剔除多余代码

7、代码分割的本质是什么？有什么意义呢？

工程化 好维护

8、babel原理

简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。本文以 babel 6.x 为基准进行讨论。最近 babel 出了 7.x，放在最后聊。
严格来说，babel 也可以转化为更低的规范。但以目前情况来说，es5 规范已经足以覆盖绝大部分浏览器，因此常规来说转到 es5 是一个安全且流行的做法。
如果你对 es5/es2015 等等也不了解的话，那你可能真的需要先补补课了。

9、linux部署和windows sever服务器区别？

linux无图形界面 windows server有图形界面
linux是社区免费 winows server 收费

10、公司项目发布流程是什么样的？

项目流程，说重要，其实对研发同学来说没啥“技术含量”；说不重要，很有可能造成项目失控，比如：

1. Bug很多，修复的速度赶不上出现的速度
2. 花时间做出来的成品根本不符合需求，或者需求本身就不合理
3. 已开发的功能总是对开发新功能没有任何帮助甚至造成障碍
4. 项目无限期delay，经常反工，永远无法诞生出可用的产出
   我们的项目开发流程，脱胎于百度。
   我们采用主流的敏捷开发方式，特点就是小步快跑，注重计划和总结。
   一个大型的项目或产品会拆分成 版本 > story > 模块 这样的三层进行开发，针对一个story或者大型功能模块，流程是这样的：
   

下面会详细讲一下每个阶段的：

1. 阶段目标
   每个阶段我们最终想达到一个什么效果
2. 要做的准备
   进入这个阶段前，需要有哪些准备动作
3. 解决的问题
   这个阶段过程中，需要解决哪些问题
   在这个流程中，必须完成每个阶段的项目目标，才能进入下个阶段。
4. 需求评审
   一般由PM发起，项目组所有成员都参与。
5. 阶段目标
   所有成员详细了解需求方案
6. 要做的准备
   提前一天发评审会邀和相关文档
   提前看需求文档，了解需求内容
   熟悉相关业务和代码
7. 解决的问题
   项目组所有成员统一需求认知
   初步评估需求方案，技术可行性
   预估项目容量
8. 设计评审
   这里说的设计，不是UI/UE的设计，而是技术方案的设计，一般由RD/FE发起。
9. 阶段目标
   梳理所有技术点的实现方案
10. 要做的准备
    提前一天发评审会邀和相关文档
    提前评估各自的实现方案
    复杂的技术点，需要提前沟通
11. 解决的问题
    项目组成员间沟通技术实现方案
    确定各端交互的方式，以文字的形式留存
    评估详细排期
12. 评估排期
    项目组成员各自评估排期，最后merge到一起。
13. 阶段目标
    产出全员无异议的开发计划，以文字形式留存
    这个阶段有几个注意点：
    对需求进行尽量细的功能点拆分，有助于准确评估排期（精确到0.5天）
    根据实际项目情况，预留适当的buffer时间（大约为项目总时长的5% ~ 10%）
    排期一旦确定，视为对所有成员的承诺，非极端情况不可更改
14. 排期规范
    内容包含：项目名称、参与项目人员、日期、开发功能点简述、项目天数
    排期邮件一般由项目负责人汇总
    邮件需知会参与项目各方同学及leader
15. 项目开发
    各自开发，达到可联调状态

11、前端开发方式

我们采用分支开发分支发布的方式，而不是分支开发主干发布，是因为我们有现成的平台（百度效率云）支持这种开发方式。
一般项目都是前后端独立开发，前端采用本地devserver + proxy/mock的方式（接口有现成的就用proxy，没有则用mock平台伪造数据）
用例评审
一般由QA同学发起，项目组成员全部参加，评审测试用例的准确性和完整性，一般在项目开发过程中进行，没有固定时间。
阶段目标
所有成员详细了解并产出最终的测试用例
要做的准备
提前一天发评审会邀和相关文档
明晰需求细节
解决的问题
关注测试用例是否覆盖到所有情况，是否有欠妥的部分
可以借助测试用例review已经开发的内容
联调
由RD/FE发起，仅开发人员参与，尽可能利用一套统一的环境，进行联调。
阶段目标
各端调通完整流程
联调规范
需各端功能开发均已完毕才可开始
有QA的项目，在联调过程中覆盖大多数测试用例
无QA的项目，需自己整理测试用例，并在联调过程中尽可能覆盖
项目验收
由RD/FE发起，邀请PM/UI/UE等角色，对产品进行全方位的验收
阶段目标
完整流程通过，保证无遗漏需求
验收规范
项目联调、自测结束后可发起验收，UI/UE进行视觉交互验收，PM进行功能验收
中大型项目排期时至少预留1天验收时间
测试
有QA的项目，由QA发起，利用1套或多套环境进行项目测试。
阶段目标
项目达到可上线状态
测试阶段规范
提测给QA的代码必须通过自测和验收
提测分支若落后主干，同步之后再提测
提供编译后代码，保证与上线代码一致性
严禁使用QA环境调试bug
阻塞测试流程的bug及时修复
其余bug可定期统一修复
上线
最后的阶段，由RD/FE发起，把项目代码部署到线上。
阶段目标
项目代码部署到线上所有机器
前端资源发布路径怎么实现非覆盖式发布（平滑升级）？
用 CDN 是必然的，只是如何尽可能多地把静态资源放到 CDN 上去。对于图片这种数量有限的资源，一般新增多少都会放到 CDN 而不在乎成本。至于 JavaScript 这类打包方案有无穷组合的资源，则需要特别的优化了。最笨的办法，当然是人手划定几个基本的打包方案，然后在 CDN 上部署。如果组合数有限，把所有打包方案都缓存到 CDN 也是可以的（没有人请求的打包方案就不生成了）。更先进的办法是，统计实际请求的打包方案，然后自动生成优化的打包方案，并且缓存在 CDN 上。
考虑到各家大公司采用的语言不一样，用什么服务器也是不确定的。甚至在一家公司内不同语言的系统用的服务器就不一样。同理，不同团队的合作方式不一样，导致了设计到实现的流程也不一样。就算在同一家公司内，也有可能同时存在最保守的团队和最敏捷的团队，一边必须设计定稿了才开始写第一行代码，另一边想到什么写什么觉得不好看再找设计师调整。
大公司一般都不会非常多的依赖于开源项目，而是自己做自己的项目然后开源。一方面这是 Not Invented Here 的问题；另一方面，确实通用的开源项目无法满足某一家公司非常特定的某些需求，所以就算 idea 是很好的，大公司也会把 idea 搬过来再结合自己的需求做一个自己的版本。

12、场景：

你是第一天来公司上班的，项目代码托管在GitLab，项目地址：git@lab.com:org/project.git,现在有一处代码需要你修改。请下完成此项任务中，与git/gitlab相关的操作步骤。
第一步：$> ssh-keygen -t rss -C zhangsan@abc.com
第二步：拷贝公钥到gitlab
第三步：
$> git config —global user.name zhangsan
$>gitconfig—globaluser.emailzhangsan@abc.com第四步：$> git clone git@lab.com:org/project.git
第五步：$> git checkout -b project-20170227-zhangsan-bugfix
第六步：修改代码
第七步：git status
第八步：git add .
第九不：git commit -am ‘bugfix’
第八步：git push --set-upstream origin project-20170227-zhangsan-bugfix

13、CSS，JS代码压缩，以及代码CDN托管，图片整合。

（1）CSS,JS 代码压缩：
可以应用gulp的gulp-uglify，gulp-minify-css模块完成；可以应用webpack的 UglifyJsPlugin压缩插件完成。
（2）CDN：
内容分发网络(CDN)是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件。主要特点有：本地Cache加速，镜像服务，远程加速，带宽优化。关键技术有：内容发布，内容路由，内容交换，性能管理。CDN网站加速适合以咨询为主的网站。CDN是对域名加速不是对网站服务器加速。CDN和镜像站比较不需要访客手动选择要访问的镜像站。CDN使用后网站无需任何修改即可使用CDN获得加速效果。如果通过CDN后看到的网页还是旧网页，可以通过URL推送服务解决，新增的网页和图片不需要URL推送。使用动态网页可以不缓存即时性要求很高的网页和图片。CDN可以通过git或SVN来管理。
（3）图片整合
减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS来定位。缺点是可维护性差。可以使用百度的fis/webpack来自动化管理sprite。

14、如何利用webpack把代码上传服务器以及转码测试？

（1）代码上传：
可以使用sftp-webpack-plugin，但是会把子文件夹给提取出来，不优雅。可以使用gulp+webpack来实现。
（2）转码测试
webpack应用babel来对ES6转码，开启devtool: “source-map" 来进行浏览器测试。应用karma或mocha来做单元测试。

15、项目上线流程是怎样的？

（1）流程建议

• 模拟线上的开发环境
  本地反向代理线上真实环境开发即可。（apache，nginx，nodejs均可实现）
• 模拟线上的测试环境
  模拟线上的测试环境，其实是需要一台有真实数据的测试机，建议没条件搭daily的，就直接用线上数据测好了，只不过程序部分走你们的测试环境而已，有条件搭daily最好。
• 可连调的测试环境
  可连调的测试环境，分为2种。一种是开发测试都在一个局域网段，直接绑hosts即可，不在一个网段，就每人分配一台虚拟的测试机，放在大家都可以访问到的公司内网，代码直接往上布即可。
• 自动化的上线系统
  自动化的上线系统，可以采用Jenkins。如果没有，可以自行搭建一个简易的上线系统，原理是每次上线时都抽取最新的trunk或master，做一个tag，再打一个时间戳的标记，然后分发到cdn就行了。界面里就2个功能，打tag，回滚到某tag，部署。
• 适合前后端的开发流程
  开发流程依据公司所用到的工具，构建，框架。原则就是分散独立开发，互相不干扰，连调时有hosts可绑即可。
  （2）简单的可操作流程
• 代码通过git管理，新需求创建新分支，分支开发，主干发布
• 上线走简易上线系统，参见上一节
• 通过gulp+webpack连到发布系统，一键集成，本地只关心原码开发
• 本地环境通过webpack反向代理的server
• 搭建基于linux的本地测试机，自动完成build+push功能

16、工程化怎么管理的?

gulp和webpack

17、webpack 和 gulp对比

Gulp 就是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能的一个前端自动化构建工具。说的形象点，“Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。” 另外，Gulp是通过task对整个开发过程进行构建。
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。
Gulp和Webpack功能实现对比：从基本概念、启动本地Server、sass/less预编译、模块化开发、文件合并与压缩、mock数据、版本控制、组件控制八个方面对Gulp和Webpack进行对比。

18、不想让别人盗用你的图片，访问你的服务器资源该怎么处理？

目前常用的防盗链方法主要有两种：
（1）设置Referer：适合不想写代码的用户，也适合喜欢开发的用户
（2）签名URL：适合喜欢开发的用户

19、用过Nginx吗？都用过哪些？

nginx是一个高性能的HTTP和反向代理服务器。
常使用场景：
（1）反向代理
（2）网站负载均衡