性能优化
1、减少http请求
一、CSS Sprites（CSS 精灵）：
将多张图片合并成一幅单独的图，通过 background-position 来显示；
二、合并样式表和脚本：
将引入的 css 文件和 js 文件合并成一个样式表；
三、使用CDN：
加载不是经常更新和修改的静态资源(如：图片、CSS、JS第三方库等)，一是CDN域名一般会缓存在本地，二是CDN的网络请求速度是非常快的。
2、非核心代码异步加载
一、defer：
在HTML解析完之后才会执行，若有多个，按照加载的顺序一次执行
二、async：
在加载完之后立即执行，若有多个，执行顺序和加载顺序无关
demo：
<script src="defer.js" defer></script>
<script src="async.js" async></script>
3、利用浏览器缓存
一、强缓存
****(响应头)Response Headers
- Cache-Control:
no-cache/no-store/max-age=8640000 - Expires:
"资源的最后修改时间"
二、协商缓存
(响应头)Response Headers
- Last-Modified：资源的最后修改时间
- Etag：资源的唯一标识
(请求头)Request Headers
-
If-Modified-Since：表示上次请求资源时服务器返回的
Last-Modified值 -
If-None-Match：表示上次请求资源时服务器返回的
ETag值
4、预解析DNS
-
使用
<link rel="dns-prefetch" href="//leslie.com">预解析DNS -
页面中的所有 a 标签在高级浏览器里是默认打开了DNS预解析的，若页面是
https协议打开的很多浏览器的 a 标签是默认关闭DNS预解析的，通过<meta http-equiv="x-dns-prefetch-control" content="on">强制打开 a 标签的DNS预解析
5、懒加载、虚拟列表
<img src="preview.png" data-src="real.png">
<script>
const myImg = document.getElementsByTagName('img')[0]
myImg.src = myImg.getAttribute('data-src')
const io = new IntersectionObserver((entries) => {
// 如果 intersectionRatio 为 0，则目标在视野外，我们不需要做任何事情。
if(entries[0].intersectionRatio < 0) return
loadItems(10)
console.log('load more items')
})
io.observe(document.querySelector('#scrollerFooter'))
</script>
6、使用防抖和节流
一、防抖（debounce）
目的：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
const debounce = function(fn, delay = 300) {
let timer = null
return function() {
if(timer) {
clearTimeout(timer)
}
timer = setTimeout(function() {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
const el = document.querySelector('#input')
el.addEventListener('keyup', debounce(function(name) {
console.log(`${ name } ${ 330 }ms内只触发一次.`)
}, 330).bind(el, 'leslie'))
二、节流（throttle）
目的：高频事件被触发，但在n秒内只会执行一次，节流会稀释函数的执行频率。
const throttle = function(fn, delay = 60) {
let timer = null
return function() {
if(timer) {
return
}
timer = setTimeout(function() {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
window.addEventListener('resize', throttle(function(name) {
console.log(`${ name } ${ 500 }内只执行一次.`)
}, 500).bind({}, 'leslie'))
7、DOM查询/DOM操作
一、对 DOM 查询进行缓存
const myBox = document.getElementById('myBox')
myBox.addEventListener('click', (event) => {
console.log(event.target)
})
二、对频繁的 DOM 操作，合并到一起插入 DOM 结构
const myList = document.getElementById('myList')
const myFragment = document.createDocumentFragment()
for(let i = 0; i < 10; i++) {
const li = document.createElement('li')
li.innerHTML = i
myFragment.appendChild(li)
}
myList.appendChild(myFragment)
三、window.onload 和 DOMContentLoaded 的区别
window.addEventListener('load', function() {
// 页面的全部资源（包括图片、视频等）加载完才会执行
})
document.addEventListener('DOMContentLoaded', function() {
// DOM 渲染完即可执行，此时图片、视频可能还未加载完
})
网络安全
1、XSS(跨站脚本攻击)
概述：攻击者通过恶意脚本窃取用户的敏感信息、会话令牌等。
解决：替换特殊字符，npm install xss。
2、CSRF(跨站请求伪造攻击)
概述：“假传圣旨”，通过恶意链接、图片嵌入恶意代码等，诱骗用户执行攻击者选择的操作，实现转账、修改密码、购物等。
解决：验证Referer字段、添加Token 验证、短信通知。
3、文件上传漏洞
除了校验上传文件的大小、后缀外，还可以对文件的内容进行检测和压缩，或者将文件存储在独立安全的服务器中。
4、数据窃取
常见的有：爬虫。
反爬机制：限制查询数据最大返回条数、查询数据的频率、人机识别、数据加密、添加权限保护等。
5、盗刷资源
常见的有：数据库资源、服务器/带宽资源、CDN资源、
短信包。
预防：限制频率、限制次数、限制带宽。
6、拒绝服务攻击
概述：利用单台或多台工具疯狂向服务器发送数据包，几个G足以让服务器瘫痪。
由于ddos攻击的ip和用户都是伪造的，所以非常难分辨，ddos也很难根治的。一般只能通过限制某个地区的ip或者限制单个ip的请求频率来缓解。最有效的方法是上高防，比如：高防服务器、高防ip、高防cdn等。
7、零日攻击
概述：零日指还没有补丁的安全漏洞。零日攻击就是黑客趁开发人员还没有得到消息修复漏洞，提前攻击。
预防：增强安全意识，发现漏洞抓紧修复，尽可能少的使用陌生的、不成熟的代码依赖，以及对程序进行良好的网络隔离。
8、社会工程
指通过和他人交流、套话或诈骗获取网站机密信息。
