前端常见知识点二之浏览器 -尊龙游戏旗舰厅官网

前端常见知识点之浏览器

目录

• • 前端常见知识点之浏览器
  • • 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

总结

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

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。