Open goldEli opened 6 years ago
当输入 URL 回车之后，会发生加载和渲染两个过程：
为什么 CSS 加载要放到 HTML 的头部？
让浏览器先拿到 CSS 文件，生成 CSSOM，当 DOM 生成后可以一次性生成 RenderTree，避免页面卡顿
为什么 JavaScript 文件要放到 HTML 底部？
由于 JavaScript 执行的线程和页面渲染的线程是同一个，所以遇到 script 标签时，会阻塞渲染。当用户打开页面，应该让用户先看到页面，所以将 JavaScript 文件放到 HTML 底部。
还有一个原因是，如果 JavaScript 中涉及到 DOM 操作，放到 HTML 底部可以确保 DOM 已经渲染完成，并能操作到相关节点。
性能优化大体思路，主要分为两个部分：
比如，当用户输入用户名密码后，数据提交到后端，后端直接拿用户名密码拼接 SQL 语句。如果用户输入恶意的代码，那最后拼接的 SQL 就会有问题，造成 SQL 注入。
解决方式之一，加入用户输入校验。
比如你在某网站上发布一篇文章，在文章中写了一些代码，比如 document.cookie 来获取访问该网页的用户，并将该用户的 cookie 上传到你的服务器。
document.cookie
解决办法：
对敏感的 cookie 这是 http-only 来阻止 JavaScript 脚本的访问。
http-only
过滤用户的输入，比如
& 替换为：& < 替换为：< > 替换为：> ” 替换为：" ‘ 替换为：' / 替换为：/
假如一个支付网站的转账接口是 http://www.bug.com?id=123&money=1000，请求该接口转账完成。
http://www.bug.com?id=123&money=1000
如果用户登录了 www.bug.com ，此时用户打开了一个邮件，邮件中有这么一行代码 <img src = "http://www.buy.com?id=123%money=1000"></img>。这样就在用户不知情的情况下偷偷的把1000块钱转给了id为123的账号。
www.bug.com
<img src = "http://www.buy.com?id=123%money=1000"></img>
解决方法：
对凡是涉及到支付的接口，都要单独输入密码，或者重新登录。
知识点
当 URL 输入之后发生了什么？
当输入 URL 回车之后，会发生加载和渲染两个过程：
加载
渲染
为什么 CSS 加载要放到 HTML 的头部？
让浏览器先拿到 CSS 文件，生成 CSSOM，当 DOM 生成后可以一次性生成 RenderTree，避免页面卡顿
为什么 JavaScript 文件要放到 HTML 底部？
由于 JavaScript 执行的线程和页面渲染的线程是同一个，所以遇到 script 标签时，会阻塞渲染。当用户打开页面，应该让用户先看到页面，所以将 JavaScript 文件放到 HTML 底部。
还有一个原因是，如果 JavaScript 中涉及到 DOM 操作，放到 HTML 底部可以确保 DOM 已经渲染完成，并能操作到相关节点。
性能优化
性能优化大体思路，主要分为两个部分：
减少页面体积，减少网络请求时间
优化页面加载
WEB 安全
SQL 注入
比如，当用户输入用户名密码后，数据提交到后端，后端直接拿用户名密码拼接 SQL 语句。如果用户输入恶意的代码，那最后拼接的 SQL 就会有问题，造成 SQL 注入。
解决方式之一，加入用户输入校验。
XSS ( Cross Site Script 跨站脚本攻击）
比如你在某网站上发布一篇文章，在文章中写了一些代码，比如
document.cookie来获取访问该网页的用户，并将该用户的 cookie 上传到你的服务器。解决办法：
对敏感的 cookie 这是
http-only来阻止 JavaScript 脚本的访问。过滤用户的输入，比如
CSRF （Cross-site requst forgery）跨站伪造请求
假如一个支付网站的转账接口是
http://www.bug.com?id=123&money=1000，请求该接口转账完成。如果用户登录了
www.bug.com，此时用户打开了一个邮件，邮件中有这么一行代码<img src = "http://www.buy.com?id=123%money=1000"></img>。这样就在用户不知情的情况下偷偷的把1000块钱转给了id为123的账号。解决方法：
对凡是涉及到支付的接口，都要单独输入密码，或者重新登录。