网站活泼,wordpress api post,旅游网站模板免费,个人网站做短视频Web前端经典面试题有哪些#xff1f;如何能走向高薪之路#xff1f;Web前端在近几年是越来越火热了#xff0c;很多人看到了前端的高薪资#xff0c;更看到了前端行业的发展前景#xff0c;所以纷纷投入到学习前端技术学习中来。下面给大家总结整理一些Web前端经典面试题如何能走向高薪之路Web前端在近几年是越来越火热了很多人看到了前端的高薪资更看到了前端行业的发展前景所以纷纷投入到学习前端技术学习中来。下面给大家总结整理一些Web前端经典面试题助力大家找到更好的工作走向高薪前端之路。 1、CSSJS代码压缩以及代码CDN托管图片整合。 (1)CSS,JS 代码压缩 可以应用gulp的gulp-uglifygulp-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但是会把子文件夹给提取出来不优雅。可以使用gulpWebpack来实现。 (2)转码测试 Webpack应用babel来对ES6转码开启devtool: “source-map 来进行浏览器测试。应用karma或mocha来做单元测试。 3、项目上线流程是怎样的? (1)流程建议 - 模拟线上的开发环境 本地反向代理线上真实环境开发即可。(apachenginxnodejs均可实现) - 模拟线上的测试环境 模拟线上的测试环境其实是需要一台有真实数据的测试机建议没条件搭daily的就直接用线上数据测好了只不过程序部分走你们的测试环境而已有条件搭daily最好。 - 可连调的测试环境 可连调的测试环境分为2种。一种是开发测试都在一个局域网段直接绑hosts即可不在一个网段就每人分配一台虚拟的测试机放在大家都可以访问到的公司内网代码直接往上布即可。 - 自动化的上线系统 自动化的上线系统可以采用Jenkins。如果没有可以自行搭建一个简易的上线系统原理是每次上线时都抽取最新的trunk或master做一个tag再打一个时间戳的标记然后分发到cdn就行了。界面里就2个功能打tag回滚到某tag部署。 - 适合前后端的开发流程 开发流程依据公司所用到的工具构建框架。原则就是分散独立开发互相不干扰连调时有hosts可绑即可。 (2)简单的可操作流程 - 代码通过git管理新需求创建新分支分支开发主干发布 - 上线走简易上线系统参见上一节 - 通过gulpWebpack连到发布系统一键集成本地只关心原码开发 - 本地环境通过Webpack反向代理的server - 搭建基于linux的本地测试机自动完成buildpush功能 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前端的小伙伴可以多留意希望对大家有一定的帮助。
