前言:
想成功就业 web 前端工程师, 想要能高薪就业, 那么除了好的 Web 前端技能以外, 还得有好的面试技巧, 如果提前就了解更多企业的面试要求及面试题目, 那么可以让我们的面试成功的几率大大的提高, 今天就给大家分享 5 道经典的 Web 前端面试题, 相信可以祝大家一臂之力.
1,BFC
(1) w3c 规范中的 BFC 定义:
浮动元素和绝对定位元素, 非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions), 以及 overflow 值不为 "visiable" 的块级盒子, 都会为他们的内容创建新的 BFC(块级格式上下文).
在 BFC 中, 盒子从顶端开始垂直地一个接一个地排列, 两个盒子之间的垂直的间隙是由他们的 margin 值所决定的. 在一个 BFC 中, 两个相邻的块级盒子的垂直外边距会产生折叠.
在 BFC 中, 每一个盒子的左外边缘 (margin-left) 会触碰到容器的左边缘(border-left)(对于从右到左的格式来说, 则触碰到右边缘).
(2) BFC 的通俗理解:
首先 BFC 是一个名词, 是一个独立的布局环境, 我们可以理解为一个箱子 (实际上是看不见摸不着的), 箱子里面物品的摆放是不受外界的影响的. 转换为 BFC 的理解则是: BFC 中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响.) 并且在一个 BFC 中, 块盒与行盒 (行盒由一行中所有的内联元素所组成) 都会垂直的沿着其父元素的边框排列.
2, 前端工程化
场景: 你是第一天来公司上班的, 项目代码托管在 GitLab, 项目地址: Git@lab.com:org/project.Git, 现在有一处代码需要你修改. 请下完成此项任务中, 与 Git/GitLab 相关的操作步骤.
顺便给大家推荐一个裙, 它的前面是 537, 中间是 631, 最后就是 707. 想要学习前端的小伙伴可以加入我们一起学习, 互相帮助. 群里每天晚上都有大神免费直播上课, 如果不是想学习的小伙伴就不要加啦.
第一步:$> SSH-keygen -t rss -Czhangsan@abc.com
第二步: 拷贝公钥到 GitLab
第三步:
- $> Git config -global user.name zhangsan
- $> Git config -global user.emailzhangsan@abc.com
第四步:$> Git clone Git@lab.com:org/project.Git
第五步:$> Git checkout -b project-{{20170227:0}}-zhangsan-bugfix
第六步: 修改代码
第七步: Git status
第八步: Git add .
第九不: Git commit -am 'bugfix'
第八步: Git push --set-upstream origin project-{{20170227:0}}-zhangsan-bugfix
3,CSS,JS 代码压缩, 以及代码 CDN 托管, 图片整合.
(1)CSS,JS 代码压缩:
可以应用 gulp 的 gulp-uglify,gulp-minify-CSS 模块完成; 可以应用 webpack 的 UglifyJsPlugin 压缩插件完成.
(2)CDN:
顺便给大家推荐一个裙, 它的前面是 537, 中间是 631, 最后就是 707. 想要学习前端的小伙伴可以加入我们一起学习, 互相帮助. 群里每天晚上都有大神免费直播上课, 如果不是想学习的小伙伴就不要加啦.
内容分发网络 (CDN) 是一个经策略性部署的整体系统, 包括分布式存储, 负载均衡, 网络请求的重定向和内容管理 4 个要件. 主要特点有: 本地 Cache 加速, 镜像服务, 远程加速, 带宽优化. 关键技术有: 内容发布, 内容路由, 内容交换, 性能管理. CDN 网站加速适合以咨询为主的网站. CDN 是对域名加速不是对网站服务器加速. CDN 和镜像站比较不需要访客手动选择要访问的镜像站. CDN 使用后网站无需任何修改即可使用 CDN 获得加速效果. 如果通过 CDN 后看到的网页还是旧网页, 可以通过 URL 推送服务解决, 新增的网页和图片不需要 URL 推送. 使用动态网页可以不缓存即时性要求很高的网页和图片. CDN 可以通过 Git 或 SVN 来管理.
(3)图片整合
减少网站加载时间的最有效的方式之一就是减少网站的 HTTP 请求数. 实现这一目标的一个有效的方法就是通过 CSS Sprites-- 将多个图片整合到一个图片中, 然后再用 CSS 来定位. 缺点是可维护性差. 可以使用百度的 fis/webpack 来自动化管理 sprite.
4, 如何利用 webpack 把代码上传服务器以及转码测试?
(1)代码上传:
可以使用 sftp-webpack-plugin, 但是会把子文件夹给提取出来, 不优雅. 可以使用 gulp+webpack 来实现.
(2)转码测试
webpack 应用 babel 来对 ES6 转码, 开启 devtool: "source-map" 来进行浏览器测试. 应用 karma 或 mocha 来做单元测试.
5, 项目上线流程是怎样的?
(1)流程建议
- 模拟线上的开发环境
本地反向代理线上真实环境开发即可.(apache,nginx,Node.JS 均可实现)
- 模拟线上的测试环境
模拟线上的测试环境, 其实是需要一台有真实数据的测试机, 建议没条件搭 daily 的, 就直接用线上数据测好了, 只不过程序部分走你们的测试环境而已, 有条件搭 daily 最好.
顺便给大家推荐一个裙, 它的前面是 537, 中间是 631, 最后就是 707. 想要学习前端的小伙伴可以加入我们一起学习, 互相帮助. 群里每天晚上都有大神免费直播上课, 如果不是想学习的小伙伴就不要加啦.
- 可连调的测试环境
可连调的测试环境, 分为 2 种. 一种是开发测试都在一个局域网段, 直接绑 hosts 即可, 不在一个网段, 就每人分配一台虚拟的测试机, 放在大家都可以访问到的公司内网, 代码直接往上布即可.
- 自动化的上线系统
自动化的上线系统, 可以采用 Jenkins. 如果没有, 可以自行搭建一个简易的上线系统, 原理是每次上线时都抽取最新的 trunk 或 master, 做一个 tag, 再打一个时间戳的标记, 然后分发到 cdn 就行了. 界面里就 2 个功能, 打 tag, 回滚到某 tag, 部署.
- 适合前后端的开发流程
开发流程依据公司所用到的工具, 构建, 框架. 原则就是分散独立开发, 互相不干扰, 连调时有 hosts 可绑即可.
(2)简单的可操作流程
- 代码通过 Git 管理, 新需求创建新分支, 分支开发, 主干发布
- 上线走简易上线系统, 参见上一节
- 通过 gulp+webpack 连到发布系统, 一键集成, 本地只关心原码开发
- 本地环境通过 webpack 反向代理的 server
- 搭建基于 Linux 的本地测试机, 自动完成 build+push 功能
以上是一些面试中出现频临比较高的, 大家可以多了解, 最后祝大家早日学有所成, 拿到满意 offer, 快速升职加薪, 走上人生巅峰.
来源: http://www.jianshu.com/p/b61802d7de12