web 前端在近几年是越来越火热了, 很多人看到了前端的高薪资, 更看到了前端行业的发展前景, 所以纷纷投入到学习前端技术学习中来. 下面给大家总结整理 2019 年 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,Node.JS 均可实现)
- 模拟线上的测试环境
模拟线上的测试环境, 其实是需要一台有真实数据的测试机, 建议没条件搭 daily 的, 就直接用线上数据测好了, 只不过程序部分走你们的测试环境而已, 有条件搭 daily 最好.
- 可连调的测试环境
可连调的测试环境, 分为 2 种. 一种是开发测试都在一个局域网段, 直接绑 hosts 即可, 不在一个网段, 就每人分配一台虚拟的测试机, 放在大家都可以访问到的公司内网, 代码直接往上布即可.
- 自动化的上线系统
自动化的上线系统, 可以采用 Jenkins. 如果没有, 可以自行搭建一个简易的上线系统, 原理是每次上线时都抽取最新的 trunk 或 master, 做一个 tag, 再打一个时间戳的标记, 然后分发到 cdn 就行了. 界面里就 2 个功能, 打 tag, 回滚到某 tag, 部署.
- 适合前后端的开发流程
开发流程依据公司所用到的工具, 构建, 框架. 原则就是分散独立开发, 互相不干扰, 连调时有 hosts 可绑即可.
(2)简单的可操作流程
- 代码通过 Git 管理, 新需求创建新分支, 分支开发, 主干发布
- 上线走简易上线系统, 参见上一节
- 通过 gulp+Webpack 连到发布系统, 一键集成, 本地只关心原码开发
- 本地环境通过 Webpack 反向代理的 server
- 搭建基于 Linux 的本地测试机, 自动完成 build+push 功能
顺便给大家推荐一个裙, 它的前面是 537, 中间是 631, 最后就是 707. 想要学习前端的小伙伴可以加入我们一起学习, 互相帮助. 群里每天晚上都有大神免费直播上课, 如果不是想学习的小伙伴就不要加啦.
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 前端的小伙伴可以多留意, 希望对大家有一定的帮助.
来源: http://www.jianshu.com/p/0017fcf156d9