千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:首页  >  关于学院  >  行业动态  >  正文

web前端经典面试题总结整理

时间:2018-12-29 11:38     来源:千锋教育 作者:千锋老师
分享: 更多

  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。

h5

  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前端的小伙伴可以多留意,希望对大家有一定的帮助。

相关文章

  • 北京天丰利校区(总部)地址:北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2、3层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋3楼
    咨询电话: 0755-23015275/23015546-801(硅谷) 0755-86660670-801(大学城)
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-811-9990 021-65233829-609
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 郑州校区地址:郑州市二七区航海中路60号海为科技园C区10层、12层
    咨询电话:0371-55191750
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 广州校区地址:广州市天河区元岗路200号慧通产业园B9三层
    咨询电话:020-38035223 020-38035220
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 大连校区地址:辽宁省大连市高新园区爱贤街10号大连设计城A座901
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 武汉金融港校区地址:武汉市东湖高新技术开发区光谷大道77号金融港B18栋3楼
    武汉智慧园校区地址:武汉市东湖高新技术开发区光谷大道61号智慧园21栋2楼
    咨询电话:027-59313371
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、360网络安全、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:400-811-9990 028-83178771
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85363390
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 杭州旺田校区:浙江省杭州市江干区九堡旺田书画城A座4层
    杭州龙驰校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层
    咨询电话:400-811-9990 0571-86893632/0571-86094032
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 青岛校区地址:青岛市市北区龙城路卓越世纪中心3号楼8层801
    咨询电话:0532-80911190
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:400-811-9990 023-68883009
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513210
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号 科技创新城19号楼B座五楼
    咨询电话:400-811-9990/0451-87173191
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 南京校区地址:南京市建邺区应天大街780号应天智汇产业园弘辉园1幢2楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋教育移动站

    扫一扫快速进入
    千锋移动端页面

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱