在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
很多小伙伴在面试的时候会遇到各种各样的面试题。同样从一个学校出来的大学生,经常在面试的时候面临不同的结局,并不一定是部分同学掌握的知识不够丰富,更多的时候是因为在面试的时候无法系统的解答面试官的问题。所以多参考一下经典的web前端面试题,对未来的就业会有很大的帮助。
1、CSS,JS代码压缩
可以应用gulp的gulp-uglify,gulp-minify-css模块完成;可以应用webpack的 UglifyJsPlugin压缩插件完成。
2、如何利用webpack把代码上传服务器以及转码测试?
(1)代码上传:可以使用sftp-webpack-plugin,但是会把子文件夹给提取出来,不优雅。可以使用gulp+webpack来实现。
(2)转码测试:webpack应用babel来对ES6转码,开启devtool: “source-map" 来进行浏览器测试。应用karma或mocha来做单元测试。
3、项目上线流程是怎样的?
(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功能
4、git常用命令
Workspace:工作区
Index / Stage:暂存区
Repository:仓库区(或本地仓库)
Remote:远程仓库
5、webpack 和 gulp对比
Gulp 就是为了规范前端开发流程,实现前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能的一个前端自动化构建工具。说的形象点,“Gulp就像是一个产品的流水线,整个产品从无到有,都要受流水线的控制,在流水线上我们可以对产品进行管理。” 另外,Gulp是通过task对整个开发过程进行构建。
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。
Gulp和Webpack功能实现对比:从基本概念、启动本地Server、sass/less预编译、模块化开发、文件合并与压缩、mock数据、版本控制、组件控制八个方面对Gulp和Webpack进行对比。
6、webpack打包文件太大怎么办?
webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大。可以从去除不必要的插件,提取第三方库,代码压缩,代码分割,设置缓存几个方面着手优化。
7、不想让别人盗用你的图片,访问你的服务器资源该怎么处理?
目前常用的防盗链方法主要有两种:
(1)设置Referer:适合不想写代码的用户,也适合喜欢开发的用户
(2)签名URL:适合喜欢开发的用户
8、精灵图和base64如何选择?
css精灵,用于一些小的图标不是特别多,一个的体积也稍大,比如大于10K(这个没有严格的界定)。
base64,用于小图标体积较小(相对于css精灵),多少都无所谓。字体图标,用于一些别人做好的图标库(也有少数自己去做的)用起来比较方便,他的图标只能用于单色,图标用只能于一种颜色。
9、webpack怎么引入第三方的库?
拿jQuery为例:
entry: {
page: 'path/to/page.js',
jquery: 'node_modules/jquery/dist/jquery.min.js'
}
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
chunks: ['jquery', 'page'] // 按照先后顺序插入script标签
})
以上9道题为目前web前端面试过程中比较常见的面试题。大家可以收藏学习一下,同时对于面试而言,从业者不仅仅需要了解基本的web前端开发的知识,同时要尽量多的掌握web前端框架。例如博学谷在线课程中涉及的,目前最常用的三大框架Vue、React、Angular。这样才能成为更加优秀的受企业欢迎的web前端工程师。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
7个优秀的开放式前端面试题
本文为大家整理了7个比较优秀的开放式前端面试题与大家分享。所谓开放式,是没有完全固定的答案,最重要的是答题的思路是否对你未来的面试有所帮助。下面就跟着小编一起学习这7个开放式的前端面试题吧。
12522
2019-08-06 10:20:47
常见web前端面试题(包含答案)
入职互联网技术岗位都有一个特点,需要参加面试以及笔试。而这两个过程中都有很多涉及到技术的问题。所以博学谷为大家整理了部分常见的web前端面试题,并完善了其中答案,希望对求知的小伙伴有所帮助。
6781
2019-08-08 14:08:31
Web前端程序员必备 前端面试题汇总(1)
任何技术岗位面试的时候都要经过人力面试和技术岗位面试至少两次。人力面试一般也就是考察一下个人品质以及薪资问题,而技术岗位则是考察你是否有真才实学。本文和大家分享一个难到了很多前端工程师的面试题:Quirks模式是什么?它和 Standards 模式有什么区别?
5910
2019-06-27 18:15:42
Web前端求职必备 常见前端面试题汇总(二)
一般情况下web前端面试的时候并不会设计特别复杂的问题。但是依旧有很多同学在比较基础的问题上栽了跟头。所以小编结合多套面试题,为大家整理出8个虽然简单面试题,即将面试或者正在面试的小伙伴速度参考一下,别让小问题组织了你高薪的步伐。
6060
2019-06-28 18:29:15
前端面试中常见的浏览器相关问题
疫情好转后。迎来一波复工热潮。在这个时候,也是许多小伙伴求职面试的高峰期。因此小编为大家整理了前端面试中常见的浏览器相关问题,众所周知,浏览器的相关问题是前端面试中的基础问题,也是几乎必考的问题。希望大家可以在前端面试前,多刷刷题,准备得更加充分。
4732
2020-03-23 17:47:15