前端常见知识点之浏览器
目录
1.web Quality(无障碍)
能够被残障人士使用的网站称得上一个易用的(易访问的)网站
使用alt属性:
<img src='xxx.jpg' alt='this is a xxx'/>
有时候浏览器无法显示图像,alt会发挥它的作用:
- 用户关闭了图像显示
- 不支持显示图形的迷你浏览器
- 浏览器是语音浏览器(供盲人和弱势群体使用)
如果您使用了alt属性,那么浏览器至少可以显示或读出有关图像的描述。
2.几个实用的BOM对象方法
BOM–浏览器对象。
- location对象
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对象
history.go()-- 前进或后退指定页面数3.
history.back()-- 后退一页
history.forward()-- 前进一页 - Navigator对象
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的区别
- cookie数据存放在客户的浏览器上,session数据放在服务器上
- cookie不是很安全,别人可分析存放在本地的cookie进行cookie欺骗,考虑到安全应当使用session
- session会在一定时间内保存在服务器上,当访问增多,会比较占用服务器的性能,考虑到减轻服务器性能方面,应当使用cookie
- 单个cookie保存额数据不能超过4k,很多浏览器都限制一个站点最多保存20个cookie
- 读取方式,cookie需要用document.cookie来读取
5.描述一下XSS和CSRF攻击?如何防御?
- XSS(跨站脚本攻击)是指在攻击者在返回的HTML中嵌入js脚本,当渲染DOM树的过程中发生了不在预期内执行的js代码时,就发生了XSS攻击。大多数XSS攻击的主要方式是嵌入一段远程或者第三方域上的JS代码。实际上是在目标网站的作用域下执行了这段JS代码。
- CSRF(跨站请求伪造),在别的站点伪造了一个请求。专业术语来说就是在受害者访问一个网站时,其cookie还没有过期的情况下,攻击者伪造一个链接地址发送受害者让其点击。从而形成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延迟,原因及如何解决
-
粗暴型,禁用缩放
<meta name="viewport" content="width=device-width,user-scalable=no"
-
利用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报文 => 浏览器解析渲染页面 => 连接结束
- 在输入URL后,首先需要找到这个url域名的服务器ip:
为了寻找这个ip,浏览器首先会寻找缓存,查看缓存中是否有记录,缓存的查找记录为:浏览器缓存 => 系统缓存 => 路由缓存。缓存中没有则查找系统的hosts文件中是否有记录,如果没有则查询DNS服务器,得到服务器的IP地址 - 浏览器根据ip已及相应的端口号,构造一个http请求:
这个请求报文会包括这次请求的信息,主要是请求方法,请求说明和请求附带的数据,并将这个http请求封装在一个tcp包中,这个tcp包会依次经过传输层、网络层、数据链路层、物理层到达服务器。 - 服务器解析这个请求来作出响应,返回相应的html给浏览器:
- 因为html是一个树型结构,浏览器根据这个html来构建Dom树,
- 在dom树的构建过程中如果遇到JS脚本和外部JS连接,则会停止构建DOM树来执行和下载相应的代码,会造成阻塞(这就是为什么推荐js代码应该放在html代码的后面)
- 之后根据外部样式、内部样式、内联样式构建一个css对象模型树CSSOM树;
- 构建完成后CSSOM树和DOM树合并为渲染树,排除非视觉节点,比如script,meta标签和排除display为none的节点。
- 之后进行布局,布局主要是确定各个元素的位置和尺寸
- 之后是渲染页面,加载资源,对图片视频等资源进行并行下载(浏览器对每个域的并行下载有一定的限制,一般是4-6个,当然在这些所有的请求中我们还需要关注的就是缓存,缓存一般通过cache-control、last-Modify、expires等首部字段控制 )在请求这些有设置了缓存的数据时,会先查看是否过期,如果没有过期则直接使用本地缓存,过期则请求并在服务器校验文件是否修改,决定是否返回304
10.Event loop(事件轮询)
一个程序结构,用来等待、发送,消息和事件。用来协调事件,用户交互,脚本,渲染,网络等任务。
- 在浏览器中,所有的同步任务都在主线程上执行,形成一个"执行栈"
- 主线程之外,存在一个“任务队列”,在主线程执行过程中,同步代码立即执行,,异步任务会被放置在任务队列中
- 执行栈中的同步任务执行完之后,队列任务中的异步任务开始执行
- 异步任务又分两种:宏任务和微任务,如果是宏任务会新建一个任务队列,微任务则直接放入微任务队列中,所以微任务要比宏任务先执行
- 宏任务:script、定时器、I/O操作、UI渲染
- 微任务:ajax、promise