基础强化

• 1. 聊一聊前端存储。
     (1)老朋友cookie
     (2)短暂的sessionStorage
     (3)简易强大的localStorage
     (4) websql 与indexeddb
     详细见 https://segmentfault.com/a/1190000005927232

• 2. 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 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
     详细参见
     http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
     https://www.zhihu.com/question/28433480

前端工程化

• 3. 场景：你是第一天来公司上班的，项目代码托管在 Gitlab，项目地址: gt@lab.com: org/project.gt，现在有一处代码需要你修改。请下完成此项任务中，与 git/gitlab相关的操作步骤。
     第一步：$> ssh-keygen-trss-zhangsan@abc.com
     第二步：拷贝公钥到 gitlab
     第三步：$> git config -global user name zhangsan => $> gitconfig-globaluser.emailzhangsan@abc.com
     第四步：$> gitclonegit (@lab. com:org/project.git
     第五步：$> git checkout -b project-20170227- zhangsan- bugfix
     第六步：修改代码
     第七步：git status
     第八步：git add
     第九步：git commit- am ' bugfix
     第十步：git push- set-upstream origin project20170227- zhangsan- bugfix

• 4. CSS, JS 代码压缩，以及代码 CDN 托管，图片整合。
     (1) CSS, JS 代码压缩
     可以应用 gulp 的 gulp- uglify, gulp- minify-CSs 模块完成；可以应用 webpackf 的 Uglify Jsplugin 压缩插件完成。
     (2) CDN
     内容分发网络（CDN）是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理 4 个要件。主要特点有：本地 Cache 加速，镜像服务，远程加速，带宽优化。关键技术有：内容发布，内容路由，内容交换，性能管理。CDN 网站加速适合以咨询为主的网站。CDN 是对域名加速不是对网站服务器加速。CDN 和镜像站比较不需要访客手动选择要访问的镜像站。CDN 使用后网站无需任何修改即可使用 CDN 获得加速效果。如果通过 CDN 后看到的网页还是旧网页，可以通过 URL 推送服务解決，新增的网页和图片不需要 URL 推送。使用动态网页可以不缓存即时性要求很高的网页和图片。CDN 可以通过 gt 或 SVN 来管理
     (3) 图片整合
     减少网站加载时间的最有效的方式之一就是減少网站的 HTPい请求数。实现这一目标的一个有效的方法就是通过 CSS Spritesーー将多个图片整合到一个图片中，然后再用 CSS来定 位。缺点是可维护性差。可以使用百度的 fis/webpack 来自动化管理 sprite

• 5. 如何利用 webpack 把代码上传服务器以及转码测试？
     (1) 代码上传
     可以使用 sftp-webpack-plugin，但是会把子文件夹给提取出来，不优雅。可以使用 gulp + webpack 来实现
     (2) 转码测试
     webpack 应用 babel 来对 ES6 转码，开启 devtool: "source-map"来进行浏览器测试。应用 karma 或 mocha 来做单元测试。

• 6. 项目上线流程是怎样的？
     (1) 流程建议
     模拟线上的开发环境
     本地反向代理线上真实环境开发即可。（apache, nginx, modest 均可实现）
     模拟线上的测试环境
     模拟线上的测试环境，其实是需要一台有真实数据的測试机，建议没条件搭 daily 的，就直接用线上数据测好了，只不过程序部分走你们的測试环境而已，有条件搭 daly 最好。
     可连调的测试环境
     可连调的测试环境，分为 2 种。一种是开发测试都在一个局域网段，直接绑 hosts 即可，不在一个网段，就每人分配一台虚拟的测试机，放在大家都可以访问到的公司内网，代码直接往上布即可。
     自动化的上线系统
     自动化的上线系统，可以采用 Jenkins。如果没有，可以自行搭建一个简易的上线系统，原理是每次上线时都抽取最新的 tunk 或 master，做一个 tag，再打一个时间戳的标记，然后分发到 cdn 就行了。界面里就 2 个功能，打 tag，回滚到某 tag，部署。
     适合前后端的开发流程
     开发流程依据公司所用到的工具，构建，框架。原则就是分散独立开发，互相不干扰，连调时有 hosts。可绑即可。
     (2) 简单的可操作流程
     代码通过 gt 管理，新需求创建新分支，分支开发，主干发布
     上线走简易上线系统
     通过 gulp+ webpack 连到发布系统，一键集成，本地只关心原码开发
     本地环境通过 webpack 反向代理的 server
     搭建基于 linux 的本地測试机，自动完成 build+push 功能

• 7. 工程化怎么管理的？
     gulp 和 webpack

     
     

8. git 常用命令
   Workspace：工作区
   Index/ Stage：暂存区
   Repository：仓库区（或本地仓库）
   Remote：远程仓库
   详细参见：http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html

• 9. Webpack 和 gulp 对比
     Gulp 就是为了规范前端开发流程，突现前后端分离、模块化开发、版本控制、文件合并与压缩、mock 数据等功能的一个前端自动化构建工具。说的形象点，"Gulp 就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。”另外，Gup 是通过 task 对整个开发过程进行构建。
     Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔等到实际需要的时候再异步加载。通过 loaders 的转换，任何形式的资源都可以视作模块，七如 Commonjs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等
     Gulp 和 Webpack 功能实现对比：从基本概念、启动本地 server、sass/less 预编译、模块化开发、文件合并与压缩、mock 数据、版本控制、组件控制八个方面对 Gulp 和 Webpack 进行对比。
     详细参见 http://www.tuicool.com/articles/e632EbA

• 10. Webpack 打包文件太大怎么办？
      webpack 把我们所有的文件都打包成一个 JS 文件，这样即使你是小项目，打包后的文件也会非常大。可以从去除不必要的插件，提取第三方库，代码压缩，代码分割，设置缓存几个方面着手优化。
      详细参见http://www.jianshu.com/p/a64735eb0e2b

• 11. 不想让别人盗用你的图片，访问你的服务器资源该怎么处理？
      目前常用的防盗链方法主要有两种：
      (1) 设置 Referer：适合不想写代码的用户，也适合喜欢开发的用户
      (2) 签名 URL：适合喜欢开发的用户
      详细参见: https://yq.aliyun.com/articles/57931

• 12. 精灵图和 base64 如如何选择？
      css 精灵，用于一些小的图标不是特别多，一个的体积也稍大，比如大于 10 K（这个没有严格的界定）。
      base64, 用于小图标体积较小（相对于 css 精灵），多少都无所谓。字体图标，用于一些别人做好的图标库（也有少数自己去做的）用起来比较方便，他的图标只能用于单色，图标用只能于一种颜色。

• 13. 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 
})

• 15. 用过Nginx吗?都用过哪些?
      nginx是一个高性能的HTTP和反向代理服务器。
      常使用场景:
      (1)反向代理
      (2)网站负载均衡
      详细参见: http://www.cnblogs.com/hobinly/p/6023883.html

移动端布局与适配