前端常见知识点二之浏览器

前端常见知识点之浏览器

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

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

前端常见知识点二之浏览器相关推荐

前端常见知识点三之HTML
前端常见知识点三之HTML 1.HTML5 drag api dragstart:事件主体是被拖放元素,在开始拖元素时触发 darg:事件是被拖放元素,在正在拖放时触发 dragenter:事件主体是 ...
前端常见知识点五之Fetch
前端常见知识点五之Fetch fetch()是 XMLHttpRequest 的升级版,用于在 JavaScript 脚本里面发出 HTTP 请求. fetch发送2次请求的原因 fetch发送pos ...
前端常见知识点四之webscoket
前端常见知识四之webscoket 1. 概览 1)WebSocket 它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一 ...
前端常见知识点一之HTTP
大半年没更新了,一直忙,公司也没有外网,这次找些材料整理复习巩固一下.资料来源于网络. 这里写目录标题一.HTTP与HTTPS 1.http和https基本概念 2.http和https的区别 3. ...
php(常见知识点二)
116.cookie 伪造你的第三方应用端的 cookie 被恶意的用户截取到,然后向服务器端发送,并且通过验证,他们就会冒充用户进行登录,这就是 cookie 伪造防 cookie 伪造: 现 ...
web前端知识点太多_web前端常见知识点
css table布局的缺点 1.Table要比其它html标记占更多的字节.(延迟下载时间,占用服务器更多的流量资源.) 2.Tablle会阻挡浏览器渲染引擎的渲染顺序.(会延迟页面的生成速度,让用 ...
前端面试知识点大全——浏览器篇
总纲:前端面试知识点大全目录 1.浏览器工作原理 2.浏览器如何解析css,如何渲染css的 2.1 构建DOM树 2.2 构建CSSOM规则树(就是css规则树) 2.3 渲染阻塞 2.4 构建渲 ...
我所碰到的面试题之------前端常见浏览器兼容性问题解决方案---
我所碰到的面试题之------前端常见浏览器兼容性问题解决方案--- 参考文章: (1)我所碰到的面试题之------前端常见浏览器兼容性问题解决方案--- (2)https://www.cnblog ...
反爬与反反爬常见知识点
服务器反爬的原因1. 爬虫占总PV较高,浪费资源2. 资源被批量抓走,丧失竞争力3. 法律的灰色地带服务器常反什么样的爬虫1. 十分低级的应届毕业生根本不管服务器的压力,很容易把站点搞挂2. 十分低级 ...