前端一面基础知识 ⑥——性能优化、Web安全、Linux常用命令

前言

常考面试题

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次数过于频繁，造成计算过多，此时需要一次到位
• ④用户输入结束或暂停时，才会触发change事件，类似搜索框中输入信息停下来1秒后才会出现可能要搜索的内容

手写防抖封装

1.8 节流及其封装

节流

• 顾名思义，控制水的流量。控制事件发生的频率，如控制为1秒发生一次，甚至1分钟发生一次。与服务端及 关控制的限流类似
• 【节流重在加锁】

应用场景（帮助你更好理解防抖）

• ①scroll事件，控制每隔一秒计算一次位置信息
• ②浏览器播放事件，控制每隔一秒计算一次进度信息
• ③拖拽一个元素时，要随时拿到该元素的被拖拽的位置，直接用drag事件，会频繁触发，很容易导致卡顿。此时采用节流，无论拖拽速度多快，都控制在每隔100ms触发一次

手写节流封装

1.9 为什么防抖的是clearTimeout(timer)，而节流的是return/h4>

• 防抖是触发间隔大于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攻击场景
• 一个博客 站，我发表一篇博客，其中嵌入脚本，脚本内容：获取cookie，发送到我的服务器（服务器配合跨域）阅读了的人的cookie就会被盗取

XSS预防

• ①替换特殊字符，如变为，变为
• ②那么就会变为，直接显示，而不会作为脚本执行
• ③前端要替换，后端也要做替换，双保险
• ④主流的前端k

2.2 XSRF攻击

XSRF跨站请求伪装

XSRF攻击场景

• 你正在购物，看中了某个商品，商品id是100。付费接口是，但没有任何验证（现在的付费都会有验证，这里作为讲解，所以假设没有验证）。我是攻击者，我看中了一个商品，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渲染页面
• ⑤遇到则暂停渲染，优先加载并执行JS代码（JS代码有可能改变DOM结构而重新渲染），完成再继续
• ⑥直至把Render Tree渲染完成

4.Linux常用命令

文件及文件夹操作

• 查看文件夹（平铺展开）
• （all的意思，包括以.开头的隐藏文件）
• 查看文件夹（列表）
• （查看xxx文件夹下的文件）
• （创建xxx文件夹）
• （把xxx及其所有子文件全部删除）
• （进入xxx目录）
• （把abc文件重命名为xxx文件）
• （把xxx文件移到sss路径目录）
• （拷贝、复制a.js为a1.js）
• （直接删除单个文件）
• （新建文件d.js）
• （查看xxx文件所有内容但不进入）
• （查看xxx文件前面几行也不进入）
• （在xxx文件里查找babel内容）

• 保存写入
• 退出
• （保存后退出）
• （强制退出，不保存）

写在文末

    如果你觉得我写得还不错的话，可以给我点个赞哦^^，如果哪里写错了、写得不好的地方，也请大家评论指出，以供我纠正。（这个系列也快完结了，大家可以复习复习前面的，接下来我会更新一些别的文章，也请大家可以继续关注哦）

其它文章

• 前端一面基础知识 ⑤——Http、Ajax、跨域
• 前端一面基础知识 ④——事件与DOM
• 前端一面基础知识 ③——异步（面试场景题）
• 前端一面基础知识 ②——作用域和闭包（面试场景题）
• 前端一面基础知识 ①——CSS面试题
• 面筋系列①——滴滴sp一面面试真题
• 面筋系列②——滴滴实习生一面凉经

文章知识点与官方知识档案匹配，可进一步学习相关知识CS入门技能树Linux进阶新增用户24975 人正在系统学习中