JavaScript - フロントエンドはパフォーマンスとセキュリティについて質問されましたが、包括的な概要はありますか?

Question

フロントエンドのパフォーマンスとセキュリティはより重要であり、頻繁に言及されます。

個人的な理解:

＃＃＃＃＃＃パフォーマンス＃＃＃＃＃＃

ファイルのマージ

ファイル圧縮
スプライト画像
gzip [通常、バックエンドの nginx または Apache で構成されますが、フロントエンドは問題外のような気がします]
動的読み込み
cdn (通常、運用保守側には専任の人員が対応しており、フロントエンドについては言及できません)
＃＃＃＃＃＃安全性＃＃＃＃＃＃

質問:

経験がある方は、それを共有して要約してください。ありがとう！

天蓬老师 · Answer

性能：
原则1：减少http请求，合并图片，css文件
原则2：缓存利用：使用CDN，使用外部js和css，添加Exp。ires头，减少DNS查询，配置Etag,使用Ajax缓存。
原则3：请求带宽：开启GZIP,精简js,移除重复脚本，图像优化。
原则4：页面结构：样式放在头部，及js放在底部，尽早刷新文档输出
原则5.避免css表达式，避免重定向
其实从特定的业务场景出发，会理解的更深一点，比如说，搜索结果页
安全：
XSS

phpcn_u1582 · Answer

恰好最近也在准备面试，整理了一点我自己的看法

性能

http请求

减少http请求的主要主要思想就是减少HTML文档内链接的资源数量：

项目上线时将CSS`JavaScript`等文件压缩合并打包，减少源文件的数量和体积
将多张小图片制作成精灵图
将资源转换为base64编码
使用缓存可以加快网页打开速度，有效减少http请求
使用懒加载，按需加载对应资源

页面打开速度

使用CDN加载资源
将CSS放在页面头部，防止页面闪烁
将JavaScript异步或延迟加载，防止JavaScript运行阻塞页面加载
延迟请求首屏外的文件，即优先加载首屏内容。

执行效率

选择器从右向左解析，嵌套顺序不宜过深
JavaScript中减少作用域链的查找，避免使用eval和Function等性能缓慢的接口
DOM操作的代价是十分昂贵的，可以使用DocumentFragment暂时存放那些一次插入文档的节点

前端安全

前端安全主要表现为通过浏览器间接影响到用户数据的安全问题。

XSS

跨站脚本攻击(Cross Site Scripting)指的是恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的，比如盗取用户的cookie。
XSS的问题是找到目标网站可插入执行脚本的漏洞，比如某段编辑内容，如果不处理用户的输入就直接存储到数据库中，则用户访问对页面时，恶意脚本被渲染到页面上，就可能执行对应的攻击。

CSRF

跨站请求伪造，比如目标网站的删除文章功能接受到来自恶意网站客户端发出的删除文章请求，这个请求是跨站点的，并且是伪造的（不是目标网站用户的本意）。
实现方式是在恶意网站上先构建一个GET请求（由于Ajax的同源限制，可以使用img的src请求等），然后欺骗目标网站用户访问该恶意网站，则在访问时会发起对应请求（并附带对应的Cookie等用户识别信息），此时攻击也会发生