前端思考 —— 性能优化

[yanyue404]

前言

可以落地的才是好的方案~

目录

• 安全
• 网络
• 性能优化

安全

不安全还提什么优化？

XSS

跨网站指令码（英语：Cross-site scripting，通常简称为：XSS）

如何攻击

XSS 攻击是指，通过执行恶意脚本，以实现窃取用户登陆态、劫持会话等目的的攻击方式。恶意脚本的输入源有，Cookies、Post 表单、Get 请求、HTTP 头内容等。通常，我们将一段 XSS 攻击的代码片段称之为 XSS 向量。

如何防御

1. 关键 Cookie 设置 HttpOnly：只能服务器端修改
2. 输入,输出检查：不要相信用户的任何输入
3. CSP 网站内容安全白名单过滤

cookie不可被获取：

输入输出的内容，对于引号，尖括号，斜杠进行转义：

function escape(str) {
  str = str.replace(/&/g, "&");
  str = str.replace(/</g, "&lt;");
  str = str.replace(/>/g, "&gt;");
  str = str.replace(/"/g, "&quto;");
  str = str.replace(/'/g, "&#39;");
  str = str.replace(/`/g, "&#96;");
  str = str.replace(/\//g, "&#x2F;");
  return str;
}

通过转义可以将攻击代码 <script>alert(1)</script> 变成

// escape('<script>alert(1)</script>');
&lt;script&gt;alert(1)&lt;&#x2F;script&gt;

对于显示富文本来说，不能通过上面的办法来转义所有字符，因为这样会把需要的格式也过滤掉。这种情况通常采用白名单过滤的办法，当然也可以通过黑名单过滤，但是考虑到需要过滤的标签和标签属性实在太多，更加推荐使用白名单的方式(如 sanitize-html)。

var xss = require("xss");
var html = xss('<h1 id="title">XSS Demo</h1><script>alert("xss");</script>');
// -> <h1>XSS Demo</h1>&lt;script&gt;alert("xss");&lt;/script&gt;
console.log(html);

以上示例使用了 js-xss 来实现。可以看到在输出中保留了 h1 标签且过滤了 script 标签

CSP 通过白名单控制，仅允许加载指定的资源:

通常可以通过 HTTP Header 中的 Content-Security-Policy 来开启 CSP

• 只允许加载本站资源

Content-Security-Policy: default-src ‘self’

• 只允许加载 HTTPS 协议图片

Content-Security-Policy: img-src https://*

• 允许加载任何来源框架

Content-Security-Policy: child-src 'none'

更多属性可以查看 这里

CSRF

跨站请求伪造（英语：Cross-site request forgery）

1. get 不修改数据
2. 不被第三方网站访问到用户的 cookie
3. Referer（该 HTTP 请求的来源地址）检查，阻止第三方网站请求接口
4. 请求时附带验证信息，比如验证码或者 token

⬆ 返回顶部

网络

两个思路方向：降低网络请求数量与加快网络速率

减少网络请求数量：

精灵图，HTTP Cache

加快网络速率：

CDN，DNS 预解析，gzip

HTTP Cache

注意：只有 get 类型的资源可以被 http 缓存。

我们可以使用强缓存加协商缓存共同处理。配置合适的 Cache-Control max-age时间，这样在这段时间内浏览器可以复用本地缓存的资源。

需要后端同学配合实现~

⬆ 返回顶部

性能优化

一、SEO

1. 添加 meta 标签（title,description,keywords）
2. 图片添加 alt 属性
3. ul 中 只能使用 li 标签
4. SSR 服务端渲染

二、资源加载

1. Gzip （HTTP 压缩）
2. 图片视频压缩后使用，可视区域懒加载
3. CDN 托管图片等文件资源 （Content Delivery Network，即内容分发网络）
4. CSS 与 JS 加载顺序，CSS 优选加载，JS 延迟加载
5. 精灵图（雪碧图），借助 webpack-spritesmith
6. Cache-Control 设置 max-age（充分利用浏览器和 HTTP 协议的缓存）

三、优化打包体积

1. 组件库、工具库等按需加载，如: vant、lodash 依赖，jweixin.js 只在微信加载
2. vue、vuex 和 vue-router 等不参与打包，使用 CDN 链接引入
3. webpack-bundle-analyzer 分析，去除重复打包依赖，移出很重的三方库
4. 避免重复请求，合理使用缓存 （第三方库与业务代码分离，可以合理缓存 第三方库打包出的 vendor.js，

参考链接

• 知乎 - 浅谈 Js 操作 Cookie，以及 HttpOnly 的限制
• webpack 打包 vue 速度太慢怎么办？

[nazhenhuiyi]

因为HTTP2的支持范围的提高，以往在 HTTP1.1时代的优化策略早就已经过时了。现在减少网络请求数量已经不太能算是好的优化方法