前端常见知识点二之浏览器 -ag凯发k8国际
ag凯发k8国际
收集整理的这篇文章主要介绍了
前端常见知识点二之浏览器
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
前端常见知识点之浏览器
目录
- 前端常见知识点之浏览器
- 1.web quality(无障碍)
- 2.几个实用的bom对象方法
- 3. cookie、sessionstroage、localstroage的区别
- 4.cookie和[session](https://zhuanlan.zhihu.com/p/88499420)的区别
- 5.描述一下xss和csrf攻击?如何防御?
- 6.click在ios上有300ms延迟,原因及如何解决
- 7.addeventlistener参数
- 8.前端优化
- 9.在地址栏里输入一个url,到页面呈现,中间会发生什么?
- 10.event loop(事件轮询)
1.web quality(无障碍)
能够被残障人士使用的网站称得上一个易用的(易访问的)网站
使用alt属性:
有时候浏览器无法显示图像,alt会发挥它的作用:
- 用户关闭了图像显示
- 不支持显示图形的迷你浏览器
- 浏览器是语音浏览器(供盲人和弱势群体使用)
如果您使用了alt属性,那么浏览器至少可以显示或读出有关图像的描述。
2.几个实用的bom对象方法
bom–浏览器对象。
location.href-- 返回或设置文档的url
location.search-- 返回url中的查询字符串部分(?id=5&name=xxx)
location.hash-- 返回url中#后面的内容(#/discover/playlist/?cat=xx")
location.host-- 返回域名部分
location.hostname-- 返回域名部分不包含端口
location.pathname-- 返回url域名后的部分
location.port-- 返回url中的端口部分
location.protocol-- 返回协议部分
location.assign-- 设置当前文档的url
location.replace()-- 设置当前文档的url,并且在history对象的地址列表中移除
location.reload()-- 重载当前页面
history.go()-- 前进或后退指定页面数3.
history.back()-- 后退一页
history.forward()-- 前进一页
navigator.useragent-- 返回用户胡代理 头的字符串表示(就是包括浏览器版本信息等字符串)
navigator.cookieenabled— 返回浏览器是否启用cookie
3. cookie、sessionstroage、localstroage的区别
- 共同点:都是保存在浏览器,并且是同源的
- cookie:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionstorage和localstorage不会自动把数据发送给服务器,仅在本地保存。cookie数据还有路径(path)的概念。可以限制cookie只属于某个路径下,存储大小很小只有4k左右。key:可以在浏览器和服务器来回传递,存储量小,只有大约4k左右。
- sessionstorage: 仅在当前浏览器窗口关闭前有效,不能持久保持。localstroage始终有效,窗口关闭或浏览器关闭也一直保存。大小都为5m。key:本身就是一个会话过程,关闭浏览器后消失,session为一个会话,当页面不同,即使是同一页面打开两次,也被视为同一会话
- localstroage:localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。key:同源窗口都会共享,并且不会失效,不管窗口或者浏览器关闭与否都会始终生效
- 补充cookie作用:1. 保存用户登录状态。使用户下次访问不需要重新登陆。cookie还可以设置过期时间,当超过时间期限后,cookie就会失效。2. 跟踪用户行为。cookie能够2保存用户的上次的选择。如果网站提供了换肤或者更换布局的功能,那么可以使用cookie来记录用户的选项。例如:背景色、分辨率等。当用户下次访问时,仍然可以保存上次访问的界面风格。
4.cookie和session的区别
5.描述一下xss和csrf攻击?如何防御?
- xss防御的总体思路:对输入(和url参数)进行过滤,对输出进行编码,也就是对提交的所有内容进行过滤。对url中的参数进行过滤,过滤会导致脚本执行的相关内容。然后对动态输出到页面的内容进行编码,使脚本无法在浏览器中执行。虽然对输入过滤可以被绕过,但也还是会拦截很大一部分的xss攻击。
cookie如何防范xss攻击?需要在http头部配置:set-cookie:httponly–这个属性可以防止xss,它会禁止js脚本来访问cookie; secure–这个属性告诉浏览器仅在请求为https的时候发送cookie; - 防御csrf攻击主要有三种策略:验证http referer字段;在本地请求中添加token并验证;在http头中自定义属性并验证。
6.click在ios上有300ms延迟,原因及如何解决
粗暴型,禁用缩放
利用fastclick,其原理是:
检测到touchend事件后,立即发出模拟click时间,并且吧浏览器300ms之后真正出现的时间给阻断掉
7.addeventlistener参数
addeventlistener(event,function,usercapture)
event指定事件名;function指定要事件触发时执行的函数;usecapture事件是否在捕获或者冒泡阶段执行。
8.前端优化
降低请求量: 合并资源、减少http请求数、minify/gzip压缩、webp、lazyload;
加快请求速度:预解析dns、减少域名数、并行加载、cdn分发;
缓存:http协议缓存请求、离线缓存manifest、离线数据缓存localstrong;
渲染:js/css优化、加载顺序、服务端渲染、piprline。
9.在地址栏里输入一个url,到页面呈现,中间会发生什么?
dns解析 => tcp连接 => 发送http请求 => 服务器处理请求并返回http报文 => 浏览器解析渲染页面 => 连接结束
为了寻找这个ip,浏览器首先会寻找缓存,查看缓存中是否有记录,缓存的查找记录为:浏览器缓存 => 系统缓存 => 路由缓存。缓存中没有则查找系统的hosts文件中是否有记录,如果没有则查询dns服务器,得到服务器的ip地址
这个请求报文会包括这次请求的信息,主要是请求方法,请求说明和请求附带的数据,并将这个http请求封装在一个tcp包中,这个tcp包会依次经过传输层、网络层、数据链路层、物理层到达服务器。
10.event loop(事件轮询)
一个程序结构,用来等待、发送,消息和事件。用来协调事件,用户交互,脚本,渲染,网络等任务。
- 宏任务:script、定时器、i/o操作、ui渲染
- 微任务:ajax、promise
总结
以上是ag凯发k8国际为你收集整理的前端常见知识点二之浏览器的全部内容,希望文章能够帮你解决所遇到的问题。
- 上一篇:
- 下一篇: 前端常见知识点四之webscoket