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 功能
4, 工程化怎么管理的?
gulp 和 Webpack
5,Git 常用命令
Workspace: 工作区
Index / Stage: 暂存区
Repository: 仓库区(或本地仓库)
Remote: 远程仓库
- 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 标签
- })
来源: http://www.jianshu.com/p/fd4ac21e80fe