输入url回车之后发生了什么
- dns解析查询其ip（根域=>顶级域名=>二级域名=>主机地址）
- 请求头里命中缓存规则，如果有就读取缓存里的web资源
- 通过ip和服务器建立TCP连接
- 发起http请求，根据返回的状态码做对应的处理（可能301重定向）
- 服务器收到请求并响应HTTP请求（可能返回304）
- 浏览器接到资源开始解析和渲染页面
- 断开连接
更详细的讲解
一次搞定前端“核心主线”——从输入URL到页面展示发生了什么--知乎
浏览器线程
浏览器是多线程，一般常驻线程：
javascript引擎线程
负责处理 Javascript 脚本程序，与GUI渲染线程互斥，不能同时执行
GUI渲染线程
负责渲染html，处理reflow和repaint
浏览器事件触发线程
当一个事件被触发时，该线程把事件放在待处理任务队列的队尾，等待js引擎处理，包括1.定时任务、2.用户点击等行为、3.ajax异步请求等
异步http请求线程
XMLHttpRequest在连接后，浏览器会开启一个异步http请求线程，检测到状态变更后，如果设置回调函数，将函数放进js引擎的队列中
页面渲染过程
-
解析html构建dom树，解析css构建css规则树
-
根据dom树和css树 生成reader树
-
布局 reader树
-
绘制reader树
-
回流/重排
reflow当浏览器发现某个部分发生了变化，影响了布局，需要倒回去重新渲染，这个回退的过程叫
reflow -
重绘
repaint不影响周围和内部布局的改变，只需要重画，比如背景色，文字颜色，边框颜色等
浏览器缓存
见我的另一篇文章：http科普
浏览器存储
cookie
- 是服务器发送到用户浏览器并保存在本地的一小块数据
- 有过期时间和大小限制，参数有domain=;expires=;max-age=;
- 兼容性很好
- httpOnly可防止篡改
sessionStorage
- 会话阶段一直在，除非手动清除或者关闭当前窗口
- key和value都是字符串，如果不存在返回null
- sessionStorage只能当前窗口访问，同地址不同窗口无法共享
localStorage
- 一直存在，除非手动清除或者卸载浏览器
- key和value都是字符串，如果不存在返回null
- 数据只区分域名和浏览器，不区分窗口
IndexedDB
- noSql 关系型数据库
浏览器安全
XSS(Cross Site Scripting)
跨站脚本攻击
wiki
是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。
- Reflected XSS（基于反射的 XSS攻击）
- Stored XSS（基于存储的 XSS攻击）
- DOM-based or local XSS（基于DOM或本地的 XSS 攻击）
场景
- 在网页 input 或者 textarea 中输入
<script>alert('xss')</script>或者其他脚本 - 直接使用 URL 参数攻击
https://www.baidu.com?jarttoTest=<script>alert(document.cookie)</script>
防御
- 输入过滤
- 输出转义
- 使用 HttpOnly Cookie
CSRF(Cross Site Requst Forgery)
跨站请求伪造
wiki
利用 用户已登录的web应用程序，执行非用户意愿的操作
场景
在用户不知情的情况下，发起一个网站A的http请求，浏览器会自动把该用户的cookie带上，由于对于网站A，该用户是已登录状态（cookie有效），所以会被服务端认为是本人操作。
防御：
- 验证 HTTP Referer 字段，利用 HTTP 头中的 Referer 判断请求来源是否合法
- 在请求地址中添加 token 并验证
- 验证码
onload和DOMContentLoaded
document.addEventListener('DOMContentLoaded',function () {
//dom加载完就触发
alert(1)
});
window.onload = function () {
//页面资源加载完成（当阻塞资源与非阻塞资源全部加载完才会触发）
alert(2)
}
网页快捷键accesskey
accesskey属性目前是h5标准中的一个全局快捷键访问属性，通过在任意元素上注入accesskey属性值，在浏览器中触发相应的快捷键，即可实现对相应元素的focus或click；
<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/accesskey" target="_blank" accesskey="x">快捷键x：accesskey</a>
<div accesskey="z" onclick="this.style.color = 'red';">快捷键z：变红</div>
在新窗口打开链接
- a标签的target属性
- 在
head标签下 加上<base target="_blank">
