前端面试

1. vue优化

代码	webpack打包
减少直接dom操作	webpack-bundle-analyzer分析打包文件
v-for 遍历避免同时使用 v-if	url-loader转换小图为base64
图片懒加载	image-webpack-loader压缩大图
路由懒加载	splitChunks提取文件
第三方库按需引入	terser-webpack-plugin、optimize-css-assets-webpack-plugin压缩js、css
节流、防抖	thread-loader开启 Loader 多进程转换
虚拟列表	AutoDllPlugin提前打包公共代码

2. 移动端浏览器兼容

问题	解决方案
css样式	清除默认样式，如Normalize.css；添加前缀
ios下输入英文首字母默认大写	<input autocapitalize="off" autocorrect="off" />
移动端字体小于12px使用四周边框或者背景色块，部分安卓文字偏上	可以使用整体放大1倍(width、height、font-size等等)，再使用transform缩放
在Android上placeholder文字设置行高会偏上	input有placeholder情况下不要设置行高
overflow: scroll或auto；在iOS上滑动卡顿的问题	-webkit-overflow-scrolling: touch;
ios日期时间转换	date.replace(/-/g, '/').xxx
点击<button><input>有灰色透明背景	-webkit-tap-highlight-color：rgba(0,0,0,0)
flex不兼容，加前缀也不行	display:-webkit-box;display:box;display:-webkit-flex;display:flex;
浏览器部分兼容	<meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection">
transition闪屏	-webkit-transform-style:preserve-3d;-webkit-backface-visiblity:hidden;

3. 前端安全

问题种类	原理	攻击方式	解决方案
XSS：跨站脚本攻击	攻击者往 web 页面里插入恶意的 HTML 代码（Javascript、css、html 标签等），当用户浏览该页面时，嵌入其中的 HTML 代码会被执行，从而达到恶意攻击用户的目的。如盗取用户 cookie 执行一系列操作，破坏页面结构、重定向到其他网站等	1、DOM Based XSS：基于网页 DOM 结构的攻击；2、input 标签 value 属性赋值；3、利用 a 标签的 href 属性的赋值；4、image 标签 src 属性，onload、onerror、onclick 事件中注入恶意代码；5、Stored XSS：存储式XSS漏洞	1、 web 页面中可由用户输入的地方，如果对输入的数据转义、过滤处理；2、 后台输出页面的时候，也需要对输出内容进行转义、过滤处理（因为攻击者可能通过其他方式把恶意脚本写入数据库）；3、 前端对 html 标签属性、css 属性赋值的地方进行校验
CSRF：跨站点请求伪造	攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。	受害者登录A网站，并且保留了登录凭证（Cookie）->攻击者引诱受害者访问B网站->B网站向A网站发送了一个请求，浏览器请求头中会默认携带A网站的Cookie	1、验证Origin Header&Referer Header；2、添加并验证 token；3、添加自定义http请求头；4、cookie设置SameSite禁止第三方使用；5、设置X-FRAME-OPTIONS控制页面是否可被嵌入iframe；6、使用https；7、使用sandbox禁止被使用的iframe对当前网站某些操作；8、使用POST请求