页面加载
加载资源的形式
1.输入url或跳转页面加载html2.加载html中的静态资源
加载一个资源的过程
1.浏览器根据DNS服务器得到域名的IP地址2.向这个IP的机器发送http请求3.服务器收到、处理并返回http请求4.浏览器得到返回内容
浏览器渲染页面的过程
1.根据HTML结构生成DOM TreeWalker2.根据CSS生成CSSOM3.将DOM和CSSOM整合成RenderTree4.根据RenderTree开始渲染和展示5.遇到<script>时，会执行并阻塞渲染
window.onload 和 DOMContentLoaded的区别？
window.addEventListener(‘load’, function () {
// 页面的全部资源加载完才会执行，包括图片、视频等
});
document.addEventListener(‘DOMContentLoaded’, function () {
// DOM 渲染完即可执行，此时图片、视频还可能没有加载完
});
性能优化
性能优化的原则
1.多使用内存、缓存或者其他方法2.减少CPU计算，减少网络
从哪里入手
1.加载页面和静态资源2.页面渲染
加载资源优化
1.静态资源的压缩合并，雪碧图2.静态资源缓存3.使用CDN让资源加载更快4.使用SSR后端渲染，数据直接输出到HTML中
渲染优化
CSS放前面，JS放后面懒加载（图片懒加载、下拉加载更多）减少DOM查询，对DOM查询做缓存减少DOM操作，多个操作尽量合并在一起执行事件防抖和节流尽早执行操作（如DOMContentLoaded）
前端安全
常见的两种网站攻击方式
1.XSS 跨站请求攻击2.XSRF 跨站请求伪造
XSS 跨站请求攻击示例：
在新浪博客写一篇文章，同时偷偷插入一段<script>攻击代码中，获取cookie，发送到自己的服务器发布博客，有人查看博客内容会把查看者的cookie发送到攻击者的服务器
解决办法：前端替换关键字，例如替换 < 和 > ，替换成字符实体。建议后端替换（前端js执行效率低，影响性能）
XSRF 跨站请求伪造示例：
你已登录一个购物网站，正在浏览商品假如该网站付费接口是 xxx.com/pay?id=100 但是没有任何验证然后你收到一封邮件，隐藏着<img src=”xxx.com/pay?id=100″>你查看邮件的时候，就已经悄悄的付费购买了
解决办法：增加验证流程，如验证指纹、输入密码、短信验证码
发表回复