网络安全与性能优化网络安全 xss（Cross-Site Scripting）跨站请求攻击原理：攻击者向页面插入scr

网络安全

xss（Cross-Site Scripting）跨站请求攻击

原理：攻击者向页面插入script脚本，浏览网页时会执行脚本，就可以获取用户信息比如cookie

// 替换特殊符号，<变成&lt; >变成&gt;
// 浏览器解析时，只有遇到<script>才会被当做脚本执行。&lt;script&gt会渲染成<script>，不会被当做脚本执行
// 前端收发的数据要做转义处理，后端接收数据也要做转义处理

xsrf（Cross Site Request Forgery）跨站请求伪造

发送邮件，正文隐藏着

// 一键完成端的操作接口
<img src="xxx.com/xxx?id=xx" />

解决方法

img不会有跨域，可以携带用户信息。改成post接口，img就调不通接口了
增加验证：密码、短信等

性能优化原则

多使用内存、缓存或其他方法（渲染更快、运行更流畅）
减少CPU计算量、减少网络加载耗时
适用于所有变成的性能优化-空间换时间

加载更快

减少资源体积：压缩代码。如webpack线上模式压缩代码体积，js、css、图片都可以
减少访问次数：合并代码、SSR服务端渲染，缓存。如webpack会把js资源合并、css雪碧图
使用更快的网络cdn：静态资源可以使用cdn，根据地域做网络服务的

ssr

将网页和数据在服务端拼接好，返回前端，一起加载、渲染
非ssr，先加载网页，再加载数据，再渲染数据
jsp、asp、php，现在的vur、react的ssr

渲染更快

css放到head里，js放到body最下边
尽早执行js，在DOMContentLoaded中
懒加载（图片兰架子啊，上滑加载更多）
对dom查询缓存。缓存dom查询结果，如dom长度
频繁操作dom，合并到一起插入dom。fragment
节流防抖，体验的优化，只是让体检更加流畅

load和DOMContentLoaded

<body>
    <img src="xxx.png" alt="" srcset="" id="img1" />
    <script>
        window.addEventListener('load', function () {
            console.log('load...')
        })
        window.addEventListener('DOMContentLoaded', function () {
            console.log('DOMContentLoad...')
        })
        const img1 = document.getElementById('img1')
        img1.addEventListener('load', function () {
            console.log('img.load...')
        })
    </script>
</body>
// 输出:
// DOMContentLoad...
// img.load...
// load...

缓存

静态资源加contenthash
内容不变hash不变url就不会变
ur和文件不变，会触发http缓存机制，304

懒加载

先给图片放一个比较小的图片，再替换

function fnLoadImg() {
    const imgs = document.querySelectorAll('img[data-src]')
    if (imgs.length > 0) {
        imgs.forEach((img) => {
            const { top } = img.getBoundingClientRect()
            if (top < window.innerHeight) {
                img.src = img.dataset.src
                img.removeAttribute('data-src')
            }
        })
    }
}
fnLoadImg()
window.addEventListener('scroll', _.throttle(fnLoadImg, 200))