web前端面试应注意什么?下面就跟着千锋西安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、webpack 和 gulp对比

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

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

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

　　4、webpack打包文件太大怎么办?

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

　　以上这些常见的web前端面试题。大家可以收藏学习一下，对于面试web前端的小伙伴可以多留意，希望对大家有一定的帮助。

　　如果对web前端感兴趣，不妨来千锋西安校区看看!

上一篇

千锋西安老师分享常见Python面试题

下一篇

千锋教育解析软件测试工程师职业规划路线