Web前台学习面试题总结

Web前台在近几年是越来越火热了，很多人看到了前台的高薪资，更看到了前台行业的发展前景，所以纷纷投入到学习前台技术学习中来。下面给大家总结整理2019年Web前台经典面试题，助力大家找到更好的工作，走向高薪前台之路。

1、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。

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、工程化怎样管理的?

gulp和Webpack

5、git常用命令

Workspace：工作区

Index / Stage：暂存区

Repository：仓库区(或者本地仓库)

Remote：远程仓库

小编推荐一个学Web前台的学习裙【 547，302，383 】，无论你是大牛还是小白，是想转行还是想入行都可以来理解一起进步一起学习！裙内有开发工具，很多干货和技术资料分享！

6、Webpack 和 gulp比照

Gulp 就是为了规范前台开发流程，实现前后台分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能的一个前台自动化构建工具。说的形象点，“Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。” 另外，Gulp是通过task对整个开发过程进行构建。

Webpack 是当下最热门的前台资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前台资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader的转换，任何形式的资源都可以视作模块，比方 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。

Gulp和Webpack功能实现比照：从基本概念、启动本地Server、sass/less预编译、模块化开发、文件合并与压缩、mock数据、版本控制、组件控制八个方面对Gulp和Webpack进行比照。

7、Webpack打包文件太大怎样办?

Webpack 把我们所有的文件都打包成一个 JS 文件，这样即便你是小项目，打包后的文件也会非常大。可以从去除不必要的插件，提取第三方库，代码压缩，代码分割，设置缓存几个方面着手优化。

8、不想让别人盗用你的图片，访问你的服务器资源该怎样解决?

目前常用的防盗链方法主要有两种：

(1)设置Referer：适合不想写代码的客户，也适合喜欢开发的客户

(2)签名URL：适合喜欢开发的客户

9、精灵图和base64如何选择?

css精灵，用于少量小的图标不是特别多，一个的体积也稍大，比方大于10K(这个没有严格的界定)。

base64，用于小图标体积较小(相对于css精灵)，多少都无所谓。字体图标，用于少量别人做好的图标库(也有少数自己去做的)用起来比较方便，他的图标只能用于单色，图标用只能于一种颜色。

10、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标签

})

以前十道题为Web前台较长出现的面试题。大家可以收藏学习一下，对于面试Web前台的小伙伴可以多留意，希望对大家有肯定的帮助。