侧边栏壁纸
  • 累计撰写 29 篇文章
  • 累计收到 1 条评论

浏览器

admin
2022-06-14 / 0 评论 / 18 阅读 / 正在检测是否收录...

问题

  1. 常见状态码?
  2. http的几种请求方法?
  3. Get和post区别?
  4. 减少网页加载的办法?
  5. http协议中的header及含义?
  6. 浏览器事件传输机制以及应用场景?
  7. LocalStorage、sessionStorage、indexexDB?
  8. 浏览器事件循环机制?
  9. 浏览器渲染过程?
  10. 浏览器中的回流和重绘?
  11. Iframe?
  12. Defer和async的区别?
  13. 同源策略与跨域?
  14. 触发跨域场景?
  15. 跨域问题解决方案?
  16. Cookie,token,session storage, localStorage 区别?
  17. Cookie中的属性?
  18. 输入Url后的过程?
  19. 浏览器垃圾回收机制?
  20. 浏览器缓存机制?
  21. 常见安全问题?
  22. 常见http请求头和响应头?
  23. http和https区别?
  24. https中间人攻击?
  25. Http1.x,http2.x区别?
  26. Ajax原理?
  27. CDN?

答案:

常见状态码
200 成功 301 永久重定向 302 临时重定向 304 命中缓存 403 没权限 404 服务器上没找到该资源 505服务器错误
301和302区别
相同:都表示重定向,即拿到这个状态码后会跳转到其他url
不同:301是永久移除了之前的网站,302是以前网站还存在,只不过换了连接。

http的几种请求方法
Get 获取服务器资源,参数长度有限制,最长2048字节,明文传播,会在链接中显示
Post 向服务器提交数据 无限制 放在请求体中传播
Put 修改服务器资源
Delete 删除服务器资源

Get和post区别
Get数据显示在url中,post数据不会显示在url中
Get对数据长度有限制,最长是2048个字符,post无限制
Get可收藏为书签,post不可以
Get后退按刷新无影响,post数据会被重新提交
编码类型不同
Get历史参数会保留在浏览器历史中,post不会
post更加安全
get请求只会有一次tcp连接,post请求有两次

减少网页加载的办法
服务器:Cdn加速 gzip压缩 开启强缓存或者协商缓存 增加服务器带宽
客户端:优化代码 减少dom操作添加事件委托 防抖节流 懒加载 精灵图 少用iframe

浏览器事件传输机制---为了解决页面中事件发生顺序的问题
事件触发的三个阶段----捕获阶段--目标阶段--冒泡阶段
和定时器一样多一个参数,true代表捕获阶段,从外到内触发 1 2 3
False代表冒泡阶段,从内到外触发 3 2 1

LocalStorage与sessionStorage、indexexDB
相同:都是web存储的范畴 用于存储客户的本地数据 存储数据都是5m 同源且同步
不同:数据生命周期来看LocalStorage被主动清理前一直有,sessionStorage关闭页面就没了
indexexDB,是浏览器自带的数据库,包括索引、事务处理和查询功能
特点:存储是以键值对形式存储的,所有类型数据都可以存储
是异步的,操作的时候不会锁死浏览器。Webstroage是同步的
支持事务 不能跨域 存储空间大 支持二进制存储

事件循环机制的执行顺序
首先,js执行代码分为同步任务和异步任务,同步任务会放到栈中依次执行,而异步任务是会放在任务队列中等到同步任务执行完毕后才执行,异步任务又分成宏任务和微任务,先执行宏任务,在执行宏任务产生的微任务,如果微任务中产生了微任务,那么则会等待宏任务的下一轮循环,先把首次遇到的微任务执行完毕,然后继续执行,等到没有任务可以执行的时候再去执行又产生的微任务

浏览器渲染过程 DOM --- CSDOM --- render tree --- 回流得到节点几何信息 --- 重绘得到节点像素 --- 绘制

浏览器中的回流和重绘
回流--重新绘制当前整个页面,包括整个结构和样式
重绘--重新绘制当前页面样式
如何避免?
1 最小化回流和重绘的次数
2 使用文档片段fragment

Iframe
在Iframe标签可以定义图片网页等内容,当页面中代码大量相同的时候可以使用该标签将重复的部分嵌入
优点:
1 原封不动嵌入网页 2 多个网页引用ifrme可以只修改其中内容就全部修改
3 增加复用性
缺点:
1 阻塞主页面onload事件(页面或图像加载后立即发生的事件就是onload)
2 用的多的时候会导致滚动条多
3 代码复杂,不利于搜索引擎优化
4 兼容性差,增加服务器http请求

Defer和async的区别
主要是在执行时间,defer会在文档解析之后执行,并且多个defer会按照顺序执行,async则是在j's加载之后就会执行,并且在多个async 的时候是哪个加载好就执行哪个

同源策略 协议 端口 域名
是一个安全策略,限制文档的交互,避免恶意文档减少攻击。
跨域 --- 协议 端口 域名任意一个不同
触发跨域场景
1.域名不同 (www.yangwei.com 和www.wuyu.com 即为不同的域名)
2.二级域名相同,子域名不同 (www.wuhan.yangwei.com www.shenzheng.yangwei.com 为子域不同)
3.端口不同,协议不同 ( http://www.yangwei.comhttps://www.yangwei.com属于跨域www.yangwei.con:8888和www.yangwei.con:8080)
跨域问题解决方案
1 jsonp
利用script标签没有跨域限制的漏洞(src属性),网页可以得到从其他来源动态产生的json数据,也就是说从src标签访问跨域的数据是不会报错的,但是需要对方服务器做支持才可以(https://www.baidu.com?callback=getData
具体实现就是