关键词：
Web前端经典面试题有哪些？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、项目上线流程是怎样的?
(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：远程仓库
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前端的小伙伴可以多留意，希望对大家有一定的帮助。
本文来自千锋教育，转载请注明出处。
宅家30天，吃透这份测试工程师面试700道题解析，成功定级阿里p7
...f1f;小编今天说的这富含的15个互联网大厂测试工程师核心面试700题解析整理！内容包括：软件测试基础210道面试题及答案解析Linux54道面试题及答案解析MySQL80道面试题及答案解析web测试10道面试题及答案解析接口测试35道... 查看详情
前端200道面试题及答案（更新中）(代码片段)
目录html相关1）说一下对cookie和Storage(localStorage和sessionStorage)的认识和区别？2）link和@import的区别3）浏览器如何实现不同标签页的通信？4）iframe的优缺点5）canvas6）做项目用到哪些h5新特性和css3... 查看详情
java--web前端面试题及答案（需更深入了解）
Web前端方面1、CSS引入的方式有哪些?1）外联：<link>标签2）内联：<style>标签3）元素内嵌：元素的style属性2、CSS选择符有哪些?标签选择符、类选择符、id选择符、组合选择符3、你做的页面在哪些流览器测试过?这些浏览器... 查看详情
22道java架构师面试题及答案分享
1、你认为项目中最重要的过程是那些? 分析、设计阶段尽量找出进度的优先级 2、如果给你一个4-6人的team，怎么分配? 挑选一技术过硬的人作为我的替补。其它人平均分配任务，每... 查看详情
史上最全40道dubbo面试题及答案，看完碾压面试官！
...是否用过，你都必须熟悉。下面我为大家准备了一些Dubbo常见的的面试题，一些是我经常问别人的，一些是我过去面试遇到的一些问题，总结给大家，希望对大家能有所帮助。1、Dubbo是什么？2、为什么要用Dubbo？3、Dubbo和Sprin 查看详情
springcloud面试题及答案300道，springcloud面试题总结(持续更新)
SpringCloud面试题及答案（SpringCloud面试题大全带答案）2021年面试题及答案【最新版】高级SpringCloud面试题大全，发现网上很多SpringCloud面试题及答案整理都没有答案，所以花了很长时间搜集，本套SpringCloud面试题... 查看详情
50道css基础面试题及答案
1介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+border+padding+margin低版本IE盒子模型：宽度=内容宽度（content+border+padding）+margin2box-sizing属性？用来控制元素的盒子... 查看详情
jvm面试题及答案整理（最新版）
...答案整理965道（2021最新版）这是我收集的《Jvm最常见的965道面试题》高级Java面试问题列表。这些问题主要来自JVM核心部分,你可能知道这些棘手的JVM问题的答案，或者觉得这些不足以挑战你的Java知识，但这些问题... 查看详情
redis面试题及答案
在网上看到有关Redis的50道面试题目，但是没有给出答案，之前我也在寻找这份试题的答案，特地把答案分享出来。有需要的可以看看咯花了大量时间整理了这套Redis面试题首发50题，绝无仅有，从入门到精通从基础，高级知识点... 查看详情
面试官最常问的10道测试用例和5道思维面试题及答案，每1题都很经典
...例是非常容被问到的一个点，今天小编就给大家把最常见的20道测试用例方面的问题给大家整理出来，希望对大家的面试提供帮助。之前给大家整理了一套软件测试的学习资料以及各大厂的面试题，因文章的篇幅有限&... 查看详情
（转）史上最全40道dubbo面试题及答案，看完碾压面试官！
...是否用过，你都必须熟悉。下面我为大家准备了一些Dubbo常见的的面试题，一些是我经常问别人的，一些是我过去面试遇到的一些问题，总结给大家，希望对大家能有所帮助。1、Dubbo是什么？Dubbo是阿里巴巴开源的基于Java的高性... 查看详情
600+道java面试题及答案整理(2021最新版)
栈长整理了2021年最新、最全的Java面试题，题目涉及Java基础、集合、多线程、IO、分布式、Spring全家桶、MyBatis、Dubbo、缓存、消息队列、Linux…等等。题库共600+道，带全部答案，非常齐全！Java基础1、面向对象... 查看详情
ssh框架面试题及答案分享！
SSH框架面试题有哪些?目前常用的Java框架有很多，其中SSH(SpringMVC、Spring、Hibernate)是很多企业在招聘过程中经常提及的，接下来小千就给大家分享一下有关SSH框架的面试题。1、什么是Spring?Spring是一个容器，可以接管各... 查看详情
分享几道前端面试题(代码片段)
...元素和伪类的区别？ 答案：1、伪元素使用2个冒号，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder等；伪类使用1个冒号，常见的有：:hover，:link，:active，:target，:not()，:focus等。2、伪元素添加了一... 查看详情
新手小白必知的5道web前端经典面试题
想成功就业web前端工程师，想要能高薪就业，那么除了好的web前端技能以外，还得有好的面试技巧，如果提前就了解更多企业的面试要求及面试题目，那么可以让我们的面试成功的几率大大的提高，今天就给大家分享5道经典的we... 查看详情
leetcode最常见的150道前端面试题（简单题上）(代码片段)
大家好，之前分享 leetcode最常见的150道前端面试题（简单题下）上篇来了。前言本文题目选自 LeetCode精选TOP面试题[1]，而这些题在自己和同事亲身经历中，确实遇到的几率在百分之80%以上（成都和北京的... 查看详情
最常见的java面试题及答案汇总
JavaWeb64.jsp和servlet有什么区别？jsp经编译后就变成了Servlet.（JSP的本质就是Servlet，JVM只能识别java的类，不能识别JSP的代码，Web容器将JSP的代码编译成JVM能够识别的java类）jsp更擅长表现于页面显示，servlet更擅长于逻辑控制。Servlet... 查看详情
最常见的java面试题及答案汇总
JavaWeb64.jsp和servlet有什么区别？jsp经编译后就变成了Servlet.（JSP的本质就是Servlet，JVM只能识别java的类，不能识别JSP的代码，Web容器将JSP的代码编译成JVM能够识别的java类）jsp更擅长表现于页面显示，servlet更擅长于逻辑控制。Servlet... 查看详情