前端常见知识点二之浏览器 -凯发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属性：

<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延迟，原因及如何解决

粗暴型，禁用缩放

利用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

总结

以上是凯发k8官方网为你收集整理的前端常见知识点二之浏览器的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。