前言
根据慕课网的《快速搞定前端技术一面 匹配大厂面试要求》课程所整理的题目,陆续更新。如果你觉得本文相关知识点你已经掌握,你可以查看我之前的相关文章哦
常考面试题
1.性能优化
1.1 原则
- ①多使用内存、缓存、或其他方法
- ②减少CPU计算量,减少网络加载耗时
- ③适应于所有编程的性能优化——空间换时间
1.2 让加载更快
- ①减少资源体积:压缩代码
- ②减少访问次数:合并代码、SSR服务器端渲染,缓存
- ③使用更快的网络:CDN
1.3 让渲染更快
- ①CSS放在head,JS放在body最下面
- ②尽早开始执行JS,用DOMContentLoaded触发
- ③懒加载(图片懒加载、下滑加载更多、分页器)
- ④对DOM查询进行缓存
- ⑤频繁的DOM操作,合并到一起插入到DOM结构
- ⑥节流、防抖等常用性能优化方法
1.4 缓存
- ①静态资源加hash后缀,根据文件内容计算hash
- ②文件内容不变,则hash不变,则url不变
- ③url和文件不变,则会自动触发Http缓存机制,返回304
1.5 SSR
- ①服务器端渲染:将网页和数据一起加载,一起渲染
- ②非SSR(前后端分离):先加载网页,再加载数据,再渲染数据
1.6 懒加载
- 页面内容数据过多,可以做分页器,这样即可以节省某个页面加载时间
- 滑动懒加载,当滑到底部没数据的时候再加载新的内容
- 点击懒加载,点击按钮,类似加载更多触发加载新的内容
1.7 防抖及其封装
防抖
- 防抖,顾名思义,防止抖动,以免把一次事件误以为多次事件,敲键盘就是一个每天都会接触到的防抖操作
- 【防抖重在清零】 (看完防抖节流再体会一下这个重点)
应用场景(帮助你更好理解防抖)
- ①登录、发短信等按钮避免用户点击太快,以至于发送了多次请求,需要防抖
- ②调整浏览器窗口大小时,resize次数过于频繁,造成计算过多,此时需要一次到位
- ③文本编辑器实时保存,当无任何更改操作1秒后进行保存
- ④用户输入结束或暂停时,才会触发change事件,类似搜索框中输入信息停下来1秒后才会出现可能要搜索的内容
手写防抖封装
function debounce ( fn , delay = 500 ) {
let timer = null // timer在闭包中,不对外暴露,以免不小心获取进行修改造成错误
return function () {
if( timer ){
clearTimeout( timer )
} // 清空定时器
timer = setTimeout( () => {
fn.apply( this , arguments )
timer = null
} , delay )
}
}
1.8 节流及其封装
节流
- 顾名思义,控制水的流量。控制事件发生的频率,如控制为1秒发生一次,甚至1分钟发生一次。与服务端及网关控制的限流类似
- 【节流重在加锁】
应用场景(帮助你更好理解防抖)
- ①scroll事件,控制每隔一秒计算一次位置信息
- ②浏览器播放事件,控制每隔一秒计算一次进度信息
- ③拖拽一个元素时,要随时拿到该元素的被拖拽的位置,直接用drag事件,会频繁触发,很容易导致卡顿。此时采用节流,无论拖拽速度多快,都控制在每隔100ms触发一次
手写节流封装
function throttle ( fn , delay = 100 ) {
let timer = null
return function (){
if( timer ){
return
}
timer = setTimeout( () => {
fn.apply( this , arguments ) // 这里不能用fn(),会报错,无法获得事件源对象event
timer = null
} , delay ) // delay设置的时间内重复执行的定时任务会被清空
}
}
1.9 为什么防抖的是clearTimeout(timer),而节流的是return?
- 防抖是触发间隔大于time触发,所以每次在小于间隔time要清除上个定时器,而节流是不管time内触发多少次,只会每隔time时间触发一次,所以用return
- 假设time=100ms,一个人每50ms输入一个字符,连续10次,即500ms后防抖只会触发一次,而节流会触发5次。为什么呢?因为防抖的意思即输入完停止100ms后触发事件,而节流是控制100ms触发一次事件,所以防抖触发一次,节流会触发五次。(结合体会防抖重在清零,节流重在加锁这两句话)
2.Web安全
2.1 XSS攻击
XSS跨站请求攻击
以下都是可能发生的XSS注入攻击
- 在 HTML 中内嵌的文本中,恶意内容以 script 标签形成注入
- 在内联的 JavaScript中,拼接的数据突破了原本的限制(字符串,变量,方法名等)
- 在标签属性中,恶意内容包含引号,从而突破属性值的限制,注入其他属性或者标签
- 在标签的 href、src 等属性中,包含 javascript: 等可执行代码
- 在 onload、onerror、onclick 等事件中,注入不受控制代码
- 在 style 属性和标签中,包含类似 background-image:url(“javascript:…”); 的代码(新版本浏览器已经可以防范)
- 在 style 属性和标签中,包含类似 expression(…) 的 CSS 表达式代码(新版本浏览器已经可以防范)
XSS攻击场景 - 一个博客网站,我发表一篇博客,其中嵌入
<script>
脚本,脚本内容:获取cookie,发送到我的服务器(服务器配合跨域)阅读了的人的cookie就会被盗取
XSS预防
- ①替换特殊字符,如
<
变为<
,>
变为>
- ②那么
<script>
就会变为<script>
,直接显示,而不会作为脚本执行 - ③前端要替换,后端也要做替换,双保险
- ④主流的前端k
2.2 XSRF攻击
XSRF跨站请求伪装
XSRF攻击场景
- 你正在购物,看中了某个商品,商品id是100。付费接口是
xxx.com/pay?id=100
,但没有任何验证(现在的付费都会有验证,这里作为讲解,所以假设没有验证)。我是攻击者,我看中了一个商品,id是200。我想你发送了一封电子邮件,邮件标题很吸引人。但其实邮件正文隐藏着<img src='xxx.com/pay?id=200'>
(并附带有别的执行付费脚本)你点击查看了这封邮件,就帮我购买了id是200的商品。
XSRF预防
- 使用post接口
- 增加验证,例如密码、短信验证码、指纹等
3.描述从输入url到渲染出页面的整个过程
加载过程
- ①DNS解析:域名 -> IP地址
- ②浏览器根据IP地址向服务器发起Http请求
- ③服务器处理Http请求,并返回给浏览器
渲染过程
- ①根据HTML代码生成DOM Tree
- ②根据CSS代码生成CSSOM
- ③将DOM Tree 和 CSSOM 整合形成 Render Tree
- ④根据Render Tree渲染页面
- ⑤遇到
<script>
则暂停渲染,优先加载并执行JS代码(JS代码有可能改变DOM结构而重新渲染),完成再继续 - ⑥直至把Render Tree渲染完成
4.Linux常用命令
文件及文件夹操作
ls xxx
查看文件夹(平铺展开)ls -a
(all的意思,包括以.开头的隐藏文件)ll
查看文件夹(列表)ll xxx
(查看xxx文件夹下的文件)midir xxx
(创建xxx文件夹)rm -rf xxx
(把xxx及其所有子文件全部删除)cd xxx
(进入xxx目录)mv abc xxx
(把abc文件重命名为xxx文件)mv xxx sss路径
(把xxx文件移到sss路径目录)cp a.js a1.js
(拷贝、复制a.js为a1.js)rm a1.js
(直接删除单个文件)touch d.js
(新建文件d.js)vi d.js
(新建或进入一个文件d.js并且进入编辑)cat xxx
(查看xxx文件所有内容但不进入)head xxx
(查看xxx文件前面几行也不进入)grep "babel" xxx
(在xxx文件里查找babel内容)
Vim编辑器操作
- 按 i 开始编辑
- Esc 可退出编辑模式
:w
保存写入:q
退出:wq
(保存后退出):q!
(强制退出,不保存)
写在文末
如果你觉得我写得还不错的话,可以给我点个赞哦^^,如果哪里写错了、写得不好的地方,也请大家评论指出,以供我纠正。(这个系列也快完结了,大家可以复习复习前面的,接下来我会更新一些别的文章,也请大家可以继续关注哦)