前端工程
项目构建
-
理解npm、yarn依赖包管理的原理，两者的区别
-
可以使用npm运行自定义脚本
-
理解Babel、ESLint、webpack等工具在项目中承担的作用
Babel是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
ESLint实在JS代码中识别和报告模式匹配的工具，目标是保证代码的一致性和避免错误。
-
ESLint规则检测原理，常用的ESLint配置
ESLint 的核心是由各种 rule 组成的集合
-
Babel的核心原理，可以自己编写一个Babel插件
-
可以配置一种前端代码兼容方案，如Polyfill
由于 Babel 假定你的代码将在 ES5 环境中执行，因此使用的都是 ES5 函数。如果你所使用的运行环境 对 ES5 的支持有限或不支持，例如低版本的 IE，那么就需要使用 @babel/polyfill 来满足需求
-
Webpack的编译原理、构建流程、热更新原理，chunk、bundle和module的区别和应用
编译原理
一切皆为模块，由于webpack只支持js文件，所以需要用loader 转换为webpack支持的模块，其中plugin 用于扩张webpack 的功能，在webpack构建生命周期的过程中，在合适的时机做了合适的事情。
构建流程
- 初始化参数：从配置文件和Shell语句中读取与合并参数，得出最终的参数；
- 开始编译：用上一步得到的参数初始化Compiler对象，加载所有配置的插件，执行对象的
run方法开始执行编译； - 确定入口：根据配置中的
entry找出所有的入口文件； - 编译模块：从入口文件出发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
- 完成模块编译：在经过第4步使用Loader翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
- 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
- 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。
在整个构建流程中，Webpack会在恰当的时机执行Plugin里定义的逻辑，从而完成Plugin插件的优化任务。
module
模块，在Webpack中一切皆模块，一个模块即为一个文件。Webpack会从Entry开始递归找出所有的依赖模块
chunk
代码块，一个chunk由多个模块组成，它用于代码合并与分割
bundle
由许多不同的模块生成，它包含已经经过加载和编译过程的源文件的最终版本。可以和chunk长的一模一样,但是大部分情况下他是多个chunk的集合
-
可熟练配置已有的loaders和plugins解决问题，可以自己编写loaders和plugins
nginx
-
正向代理与反向代理的特点和实例
正向代理
意思时一个位于客户端和原始服务器之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定原始服务器，然后代理向原始服务器转交请求并将获得的内容返回给客服端。
实例：找到一个可以访问国外网站的代理服务器，我们将请求发送给代理服务器，代理服务器去访问国外的网站，然后将访问到的数据传递给我们
特点：服务器只清楚请求来自哪个代理服务器，而不清楚来自哪个具体的客户端，屏蔽或隐藏了真实客户端信息。
反向代理
指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络的服务器，并将从服务器上得到的结果返回给客户端。
实例：主要用于服务器集群分布式部署的情况下，反向代理隐藏了服务器的信息
-
可手动搭建一个简单的nginx服务器
Nginx由内核和模块组成，其中，内核的设计非常微小和简介，完成的工作也非常简单，仅仅通过配置文件将客户端请求映射到一个location block，而在这个location中所配置的每个指令将会启动不同的模块去完成相应的工作。
-
熟练应用常用的nginx内置变量，掌握常用的匹配规则写法
-
可以用nginx实现请求过滤、配置gzip、负载均衡等，并能解释其内部原理
开发提速
-
熟练掌握一种接口管理、接口mock工具的使用，如yapi
-
掌握一种高效的日志埋点方案，可快速使用日志查询工具定位线上问题
埋点，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及实施过程。技术实质是先监听软件运行过程中的事件，当需要关注的事件发生时进行判断和捕获。
-
理解TDD与BDD模式，至少会使用一种前端单元测试框架
TDD：测试驱动开发
BDD：行为驱动开发，二者都是敏捷开发的一种技术
简单来说就是，TDD就是像是我点击了这个按钮，我触发什么事件去执行。BDD就是说，我点击这个按钮我要展现出什么效果来
版本控制
-
理解Git的核心原理、工作流程、和SVN的区别
Git是最先进的分布式版本控制系统。根本上是一套内容寻址文件系统。核心在于工作区、暂存区、版本库。
工作流程
初始化一个Git仓库，使用git init命令
添加文件到Git仓库，分两步，git add <file>添加多个文件，git commit -m<message>
将工作区中的文件，先保存到暂存区，当执行commit时，将暂存区中的文件保存到版本库中。
SVN是集中式的版本控制系统，版本库是自重存放在中央服务器的。
-
熟练使用常规的Git命令、git rebase、git stash等进阶命令
git stash # 暂存当前修改，将所有至为HEAD状态
git stash list # 查看所有暂存
git stash show -p stash@{0} # 参考第一次暂存
git stash apply stash@{0} # 应用第一次暂存
git stash pop 恢复工作现场并且将stash中的内容也删除
-
可以快速解决线上分支回滚、线上分支错误合并等复杂问题
持续集成
-
理解CI/CD技术的意义，至少熟练掌握一种CI/CD工具的使用，如Jenkins
CI 持续集成是在源代码变更后自动检测、拉取、构建进行单元测试的过程。持续集成是启动管道的环节。
CD 持续部署指整个流程链（管道），它自动检测源代码变更并通过构建、测试、打包等操作运行他们以生成可部署的版本
持续部署包括持续集成，持续测试和持续交付。
Jenkins是一个开源的、可扩展的持续集成交付部署的基于web界面的平台。
-
可以独立完成架构设计、技术选型、环境搭建、全流程开发、部署上线等一套完整的开发流程
性能优化
-
了解前端性能衡量指标、性能监控要点，掌握一种前端性能监控方案
可以使用window.performance API进行简单的监控。
-
了解常见的Web、App性能优化方案
页面级优化：
1.减少HTTP请求数：设置缓存，资源合并与压缩、雪碧图、inline images
2.外部脚本置底
3.懒加载JS
4.精简JS和CSS
代码级优化：
1.JS：减少DOM操作、避免使用eval，with、减少作用域链查找
2.css、html、image
3.合理使用CDN
4.避免使用iframe
-
SEO排名规则、SEO优化方案、前后端分离的SEO
规则
1、在title、description和keywords标签中布局关键词：应在20字符内，描述小于100，关键词控制在200字符内
2、在网站导航、栏目将名称和文章标题等重要位置部署关键词
3、在连接中部署关键词
优化方案
1、网页头部meta优化：包含三大标签title、keywords、description填写正确内容
2、网站H标签代码优化：H1标签只出现一次
3、a标签优化
4、img标签优化：上传图片一定填写alt属性
SEO本质是一个服务器向另一个服务器发起请求，解析请求内容。但一般来说搜索引擎是不回去执行请求到的js的。也就是说，如果一个单页应用，html在服务器端还没有渲染部分数据数据，在浏览器才渲染出数据，而搜索引擎请求到的html是没有渲染数据的。 这样就很不利于内容被搜索引擎搜索到。 所以服务端渲染就是尽量在服务器发送到浏览器前 页面上就是有数据的。
-
SSR实现方案、优缺点、及其性能优化
-
Webpack的性能优化方案
-
Canvas性能优化方案
-
React、Vue等框架使用性能优化方案
前端安全
-
XSS工具的原理、分类、具体案例，前端如何防御
原理：跨站脚本攻击，通过web站点漏洞，向客户端交付恶意脚本代码，实现对客户端攻击目的。
分类：
1、存储型（持久型）===> 将js脚本上传至server，其他用户访问server时都会加载这个js。eg：论坛发帖。server没有对帖子内哦那个进行过滤，导致上传了一段js脚本
2、反射型（非持久） ===> client将恶意js发给server（可将js包含在get请求头中），server再将这个js返回给client，client就能在浏览器中运行这个js了
3、DOM型（也属于反射型） ===> 不必将js上传至server就能在client执行
反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库里，反射型 XSS 的恶意代码存在 URL 里。
-
CSRF攻击的原理、具体案例，前端如何防御
原理：跨站请求伪造，攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。
防护策略：同源检测、CSRF Token、分布式校验、双重Cookie
-
HTTP劫持、页面劫持的原理、防御措施
HTTP劫持
在用户的客户端与其要访问的服务器经过网络协议协调后，二者之间建立了一条专用的数据通道，用户端程序在系统中开放指定网络端口用于接受数据报文，服务器端将全部数据按指定网络协议规则进行分解打包，形成连续数据报文。
在用户的浏览器连上被访问的网站服务器，发送了HTTP请求后，运营商的路由器会首先收到此次HTTP请求，之后运营商路由器的旁路设备标记此TCP连接为HTTP协议，之后可以抢在网站服务器返回数据之前发送HTTP协议的302代码进行下载软件的劫持，浏览器收到302代码后就会跳转到错误的软件下载地址下载软件了，随后网站服务器的真正数据到达后反而会被丢弃。或者，旁路设备在标记此TCP连接为HTTP协议后，直接返回修改后的HTML代码，导致浏览器中被插入了运营商的广告，随后网站服务器的真正数据到达后最终也是被丢弃。
防御措施
HTTPS