一、性能优化1.1原则①使用更多内存、缓存或其他方法②减少CPU计算，减少网络加载时间③适用于所有编程性能优化-空间换时间1.2让加载更快①减少资源体积：压缩代码②减少访问次数：合并代码、SSR服务端渲染、缓存③使用更快的网络：CDN1.3让渲染更快①CSS放在头部，JS放在底部body②尽早开始执行JS，使用DOMContentLoaded触发③延迟加载（图片延迟加载，向下滑动加载更多，pager）④缓存DOM查询⑤频繁的DOM操作，合并在一起插入DOM结构⑥节流，反shake等常见的性能优化方法1.4缓存①静态资源添加hash后缀，根据文件内容计算hash②如果文件内容没有变化，则有h不会变，那么url就不会变③url和file都不会变，会自动触发Http缓存机制，返回3041.5SSR①服务端渲染：将网页和数据一起加载，一起渲染②非SSR（前后端分离）：先加载网页，再加载数据，再渲染数据1.6Lazyloadingpagecontent如果数据太多，可以作为pager，可以节省某个页面的加载时间。滑动延迟加载，当底部没有数据时再加载新的内容。点击lazyloading，点击按钮，类似loadingmore，触发加载新内容1.7Anti-shake及其包“Anti-shake”Anti-shake，顾名思义就是防止晃动，以免误认为一个事件是多个事件中，敲击键盘是你每天都会接触到的防抖操作。》（看完防抖节流，再来体验一下这一点）《应用场景》（帮助大家更好地理解防抖）①登录、发送短信等按钮，防止用户点击过快，导致发送多个请求,需要防抖抖动②调整浏览器窗口大小时，调整大小的次数太频繁，导致计算量太大，这时候需要一次性到位③文本编辑器保存在实时，1秒后保存，无任何更改操作。④当用户输入结束或暂停时，会触发更改事件，类似于搜索框中输入信息，会出现可能搜索到的内容1秒后，“手写防抖包”函数debounce(fn,delay=500){lettimer=null//timer在闭包中，错误对外暴露，以免不小心获取修改导致错误returnfunction(){if(timer){clearTimeout(timer)}//清除定时器timer=null},delay)}}1.8Throttling及其封装“Throttling”顾名思义就是控制水流控制事件的频率，比如每秒一次，甚至每分钟一次。类似于服务器和网关控制的限流。《【节流重点锁定】》和《应用场景》（帮助大家更好的理解防抖）①滚动事件，控制每秒计算位置信息②浏览器播放事件，控制每秒计算进度信息③拖拽时element，必须随时获取元素被拖拽的位置，直接使用拖拽事件，会频繁触发，容易造成卡顿。这时候使用节流，无论拖动速度多快，都控制每100ms触发一次“手写节流包”functionthrottle(fn,delay=100){lettimer=nullreturnfunction(){if(timer){return}timer=setTimeout(()=>{fn.apply(this,arguments)//这里不能使用fn()，会报错，获取不到事件源对象eventtimer=null},delay)//在delay设置的时间内重复执行定时任务会被清除}}1.9为什么clearTimeout(timer)是用来防抖，return是用来节流的？防抖是指触发间隔大于时间触发，所以每次小于间隔时间，需要清空之前的定时器，而throttling是指无论在时间内触发多少次，每次只会触发一次，所以使用return假设time=100ms，一个人每50ms输入一个字符连续10次，也就是500ms之后，防抖只会触发一次，节流触发5次。为什么？因为防抖是输入停止100ms后触发事件，而throttling是控制每100ms触发一个事件，所以防抖触发一次，throttling触发五次。（结合“体验防抖重在清除，节流重在加锁”两句）2.Web安全2.1XSS攻击“XSS跨站请求攻击”以下是HTML中可能的XSS注入攻击嵌入文中，恶意内容以脚本标签的形式注入内联JavaScript，拼接数据突破原有限制（字符串、变量、方法名等）标签属性，恶意内容包含引号，从而突破属性值限制，在标签的href、src等属性中注入其他属性或标签，包括javascript等可执行代码：在onload、onerror、onclick等事件中，在style属性中注入不受控制的代码以及标签，包括类似background-image:url("javascript:...");的代码（新版浏览器已经可以阻止）在style属性和标签中，包含CSS表达式代码如expression(...)（新版浏览器服务器已经可以阻止）“XSS攻击场景”一个博客站点，我发表了一篇博客,里面嵌入了会变成会暂停渲染，先加载执行JS代码（JS代码可能会改变DOM结构重新渲染），以及然后继续⑥直到RenderTree的渲染完成。4.Linux常用命令“文件及文件夹操作”lsxxx查看文件夹（平铺）ls-a（意思是全部，包括.开头的隐藏文件）ll查看文件夹（列表）llxxx（查看xxx文件夹下的文件）mkdirxxx(创建xxx文件夹）rm-rfxxx（删除xxx及其所有子文件）cdxxx（进入xxx目录）mvabcxxx（将abc文件重命名为xxx文件）mvxxxssspath（将xxx文件移动到sss路径目录）cpa.jsa1.js（复制，将a.js复制到a1.js）rma1.js（直接删除单个文件）touchd.js（新建一个文件d.js）vid.js（创建或进入一个文件d.js，进入编辑器）catxxx（查看xxx文件的所有内容但不要输入）headxxx（查看xxx文件的前几行，不要输入）grep"babel"xxx(找到xxx文件中的babel内容)》Vim编辑器按i开始编辑Esc退出编辑模式:wsavewrite:qexit:wq(保存退出):q!(强制退出不保存)
