javascript - Das Frontend wurde nach Leistung und Sicherheit gefragt. Gibt es eine umfassende Zusammenfassung?

Question

Front-End-Leistung und Sicherheit sind wichtiger und werden oft erwähnt.

Einige persönliche Verständnisse:

Leistung

Dateizusammenführung
Dateikomprimierung
Sprite-Bild
gzip [Im Allgemeinen auf Nginx oder Apache im Backend konfiguriert, ich habe das Gefühl, dass das Frontend nicht in Frage kommt]
Dynamisches Laden
cdn (Im Allgemeinen gibt es engagiertes Personal auf der Betriebs- und Wartungsseite, nicht im Frontend)

Sicherheit

SQL-Injection [Cross-Site-Angriff]

Frage:
Bitte teilen Sie Ihre Erfahrungen und fassen Sie sie zusammen. Danke!

天蓬老师 · 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等用户识别信息），此时攻击也会发生

界面操作劫持

界面伪造，盗取用户信息啥的...

PHP中文网 · Answer

性能代码压缩图片压缩减少http请求 ajax异步等等都有利于性能

安全 XXS 加密代码