前端面试--页面性能优化与安全

前端性能优化的办法
①资源压缩和合并
②异步加载async和defer
③浏览器缓存
④使用CDN
【浏览器缓存是对二次访问的速度提升，CDN是对于首次访问的加速，从网络层面进行优化】
一个地区内只要有一个用户先加载资源，在CDN中建立了缓存，该地区的其他后续用户都能因此而受益。
⑤资源预加载
【预先告知浏览器某些资源可能在将来会被使用到。<link rel="dns-prefetch" href="//example.com">】

预加载和懒加载
懒加载也叫延迟加载，作用：提升用户体验，减少无效资源加载，防止并发加载的资源过多阻塞js的加载。
它的原理是，先将图片src属性设置为空字符串，将图片的真实路径设置在data-origin属性中，当页面滚动
时监听scroll事件，在scroll的事件回调中，将进入屏幕浏览器区域的图片src属性设置为data-orgin中的值，
即可实现延时加载

预加载是将一些重要的资源提前加载到本地，这样在后面需要用到时直接从缓存中获取。
作用：提升用户体验，减少等待时间。

懒加载和预加载的对比：
两者可以提升页面性能，懒加载延迟加载，对服务器前端可以缓解压力，预加载则会增加服务器前端的压力。

函数防抖和节流
解决以下问题：用户频繁触发事件，向后台发送数据，对服务器造成压力；浏览器事件浏览器窗口变化，鼠标移动
等造成浏览器性能问题。【限制某个方法被频繁触发】

函数节流（throttle）
一个函数执行后，只有大于设定的周期后才执行第二次
实现原理：利用闭包特性--可以使得上次触发的时间保存到内存中
function throttle(fn, delay) {
    // 记录上一次函数触发的时间
    var lastTime = 0;
    return function() {
        // 记录当前函数触发的时间
        var nowTime = Date.now();
        if (nowTime - lastTime > delay) {
        // 修正this指向问题
            fn.call(this);
        // 同步时间
          lastTime = nowTime;
        }
    }
}

应用场景：
dom元素拖拽功能，搜索联想（keyup），计算鼠标移动距离，监听滚动事件

函数防抖（debounce）
一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。
实现原理：利用闭包特性--可以使得变量timer的值长期保存在内存中
function debounce(fn, delay) {
    // 记录上一次的延时器
   var timer = null;
    return function() {
    // 清除上一次延时器
    clearTimeout(timer)
    timer = setTimeout(function() {
            fn.apply(this)
        }, delay)
    }
}

应用场景：
对应连续的事件响应我们只需只需一次回调

常见的web安全攻防解析
XSS（跨站脚本攻击）--非持久型和持久型
非持久型：一般是通过给别人发送带有恶意脚本代码参数的 URL，当 URL 地址被打开时，
特有的恶意代码参数被 HTML 解析、执行。
持久型：--利用form表单提交，将代码注入数据库，前端页面获取时将其渲染执行。
防御方法：HttpOnly Cookie，存库是对字符进行转义，
设置 HTTP Header 中的 Content-Security-Policy（只允许加载本站资源，只允许加载 HTTPS 协议图片）

CSRF（跨站请求伪造）
利用用户已登录的身份，在用户毫不知情的情况下，以用户的名义完成非法操作
要完成CSRF攻击必须有的三个条件：
用户已经登录了站点 A，并在本地记录了 cookie
在用户没有登出站点 A 的情况下（也就是 cookie 生效的情况下），
访问了恶意攻击者提供的引诱危险站点 B (B 站点要求访问站点A)。
站点 A 没有做任何 CSRF 防御

防御方法：get请求不对数据进行修改，不让第三方网站访问到用户的cookie，阻止第三方网站请求接口，
请求时附带验证信息，比如验证码或token

点击劫持
攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中，并将 iframe 设置为透明，
在页面中透出一个按钮诱导用户点击。
防御方法：X-FRAME-OPTIONS
URL跳转漏洞
借助未验证的URL跳转，将应用程序引导到不安全的第三方区域，从而导致的安全问题。
SQL注入
OS命令注入攻击