1. OSI网络七层模型
- 物理层
- 数据链路层
- 网络层
- 传输层
- 会话层
- 表示层
- 应用层
2. http常见状态码
- 200 请求成功
- 301 永久重定向
- 302 临时重定向
- 403 没权限
- 404 服务器没有找到资源
- 500 服务器错误
3. get和post的区别
- get获取数据，post提交数据
- get参数有长度限制，最长2048字节，post无限制
- get明文传输，post放在请求体上
4. 浏览器的时间传输机制
- 时间传输机制冒泡和捕获分别有微软和网景公司提出，为了解决页面事件流问题
- 捕获阶段，目标阶段，冒泡阶段
- 捕获
<div id="div1"> <div id="div2"> <div id="div3"> click </div> </div> </div> <script> const divOne = document.getElementById('div1') const divTwo = document.getElementById('div2') const divThree = document.getElementById('div3') divOne.addEventListener('click', () => { console.log('divOne') },true) divTwo.addEventListener('click', () => { console.log('divTwo') },true) divThree.addEventListener('click', () => { console.log('divThree') },true) </script> // divOne // divTwo // divThree
- 冒泡
<div id="div1"> <div id="div2"> <div id="div3"> click </div> </div> </div> <script> const divOne = document.getElementById('div1') const divTwo = document.getElementById('div2') const divThree = document.getElementById('div3') divOne.addEventListener('click', () => { console.log('divOne') },false) divTwo.addEventListener('click', () => { console.log('divTwo') },false) divThree.addEventListener('click', () => { console.log('divThree') },false) </script> // divThree // divTwo // divOne
5. localStorage和sessionStorage
- 相同点：
- localStorage和sessionStorage同属于web存储的范畴
- 用于存储客户端的本地数据
- 不同点：
- localStorage除非被清理，否则一致存在
- sessionStorage页面关闭就清理
- 他们存储大小都为5M
6. 浏览器事件循环机制
- 宏任务和微任务
- 宏任务：script代码段、setTimeout、setInterval、setImmediate、I/O、UI render
- 微任务：process.nextTick、Promise、Async/Await、Mutaton Observer
- 循环机制：执行宏任务，然后执行该宏任务产生的微任务，若微任务在执行过程中产生了新的微任务，则继续执行微任务，微任务执行完毕后，再回到宏任务中进行下一轮循环
- 实例：
console.log('script start') setTimeout(function() { console.log('setTimeout') }, 0) new Promise((resolve) => { console.log('promise one') resolve(1) console.log('promise then') }).then(res => { console.log('promise two') }) console.log('script end') // 先执行代码块宏任务，输出前四个，再执行宏任务中的微任务，输出promise two，再循环执行下一个宏任务 // stript start // promise one // promise then // script end // promise two // setTimeout
7. 浏览器回流和重绘
- 回流：重新绘制当前页面，包括整个结构和样式(把房子拆了重建)
- 重绘：重新绘制当前页面样式(重新废除)
- 最小化回流和重绘的次数
8. 跨域
- 种类：JSONP，nginx反向代理，CORS，postMessage
- jsonp：
- 原理：利用script标签没有跨域限制的漏洞，网页可以得到从其他源产生的JSON数据，但是需要对方服务器支持协定的callback回调函数支持
- 优点：json简单兼容性号，可以解决主流浏览器的跨域数据访问
- 缺点：仅支持get方法具有局限性，不安全可能受到xss攻击
9. 浏览器主要组成部分
- 用户界面
- 浏览器引擎
- 渲染引擎
- 网络模块
- 用户界面后端
- JavaScript解释器
- 数据存储模块
