前端大杂烩之浏览器相关（一）

1. 跨域，为什么JS会对跨域做出限制

如果浏览器不对跨域进行限制，用户的数据很容易被其他人盗取，网站也容易被恶意攻击，所以为了浏览器安全，浏览器实现了同源策略，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源；

2. 前端安全：xss，csrf

什么是XSS、CSRF

XSS：跨站脚本（Cross-site scripting，通常简称为XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。

CSRF：又称XSRF，冒充用户发起请求（在用户不知情的情况下）,完成一些违背用户意愿的请求（如恶意发帖，删帖，改密码，发邮件等）。

如何防范XSS、CSRF

CSRF依赖于XSS，防范了XSS，也就基本防范了CSRF。而防范XSS的方法，除了后端对数据进行过滤，前端也可以做初步的筛选，例如，尽量使用innerText(IE)和textContent(Firefox),也就是jQuery的text()来输出文本内容。

3. 浏览器怎么加载页面的？script脚本阻塞有什么解决方法？defer和async的区别？

浏览器怎么加载页面的

1、首先浏览器先把这个HTML文档先转化为DOM树，然后根据这个DOM树，进行渲染，转化为可视的东西；

2、在渲染的时候，浏览器从上到下依次渲染DOM树，当发现有外链资源或脚本的时候会异步发起请求加载，同时DOM树的解析继续。一般我们都会把style都放在head里面，那么这样浏览器就先拿到了css样式文件，他就知道如何讲每个元素绘出来放在哪个位置;

3、如果遇到图片浏览器不会等图片加载完再去加载，而是继续加载，这样就会出现个问题，当图片加载完时，在页面插入图片会影响页面的结果，浏览器就又要重新排布，这样浏览器又要花费时间跟经历去排布，所有如果图片是固定的尺寸，我们在写CSS的时候就应该给他加上宽高，浏览器就会预留一个位置给图片，这样就避免了重新排布;

script脚本阻塞有什么解决方法

一般解决办法：将script标签放在body最底部、合并脚本文件，将几个脚本文件合并为一个，减少下载次数。

无阻塞脚本的方法：

1、为script标签定义一个扩展属性defer。

2、动态脚本注入，用javascript动态创建script元素及其内容，这种方法重点在于，无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。

3、XMLHtmlRequest脚本注入，先创建一个XHR对象，然后用它下载javascript文件，最后通过创建动态script元素将代码注入页面中。这种方法的主要优点是，下载javascript代码但不立即执行。主要局限性是，javascript文件必须与所请求的页面处于相同的域。

4. 浏览器强缓存和协商缓存

浏览器在第一次请求获取到资源后，再次请求时：

1、浏览器会先获取该资源缓存的header信息，根据其中的expires和cahe-control判断是否使用强缓存，若使用则直接从缓存中获取资源，包括缓存的header信息，本次请求不会与服务器进行通信；

2、如果不使用强缓存，浏览器会发送请求到服务器，该请求会携带第一次请求返回的有关缓存的header字段信息（Last-Modified/IF-Modified-Since、Etag/IF-None-Match），由服务器根据请求中的相关header信息来判断是否使用协商缓存，若使用，则服务器返回新的响应header信息来更新缓存中的对应header信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容。

强缓存

Expires：它的值为一个绝对时间的GMT格式的时间字符串，这个时间代表着这个资源的失效时间。

Cache-Control：主要是利用该字段的max-age值来进行判断，它是一个相对时间。

Cache-Control与Expires可以在服务端配置同时启用，同时启用的时候Cache-Control优先级高。

协商缓存

Last-Modify/If-Modify-Since：浏览器第一次请求一个资源时，会在header上加上Last-Modify，它标识该资源的最后修改时间。当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存。

ETag/If-None-Match：ETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化。服务器根据浏览器上发送的If-None-Match值来判断是否命中缓存。

Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续对比Last-Modified，如果相同，返回304。

5. web存储、cookies、localstroge等的使用和区别

sessionStroge和localStroge是HTML5 Web Stroge API提供的，在此之前，cookie是主要的存储方式。

webstorage与cookie的区别

1、cookie数据始终在http请求中携带，可以在浏览器和服务器之间传递，而localStorage和sessionStorage的数据仅在本地保存。

2、cookie的存储数据大小不能超过4k，sessionStorage和localStorage存储数据大小可以达到5M或者更大。

3、cookie的生命周期一般在其设置的过期时间之前有效。而sessionStorage仅在关闭窗口前有效，localStorage持久有效，直至手动删除。

4、cookie和localStorage在所有同源窗口中可以共享。sessionStroge在不同浏览器窗口不共享，即使是同一个页面。

5、web storage支持事件通知机制，可以将数据更新的通知发送给监听者。

前端大杂烩之浏览器相关（一）相关推荐

前端面试中浏览器相关问题（二）：回流与重绘
前端面试中浏览器相关问题(二):回流与重绘文章目录前端面试中浏览器相关问题(二):回流与重绘浏览器的渲染过程生成渲染树回流重绘何时发生回流重绘浏览器的优化机制减少回流和重绘最小化重 ...
web前端学习day_03:JavaScript:如何使用/ 语法/ 方法/ NaN/ js对象分类/ BOM浏览器相关/ 事件/ DOM文档对象模型
JavaScript 给页面添加动态效果 JavaScript是一门编程语言,和Java没有关系,为了蹭热度. 语言特点: 属于脚本语言,不需要编译直接解析执行. 基于面向对象属于弱类型语言, 强类 ...
前端必读：浏览器内部工作原理
前端必读:浏览器内部工作原理作者: Tali Garsiel 发布时间: 2012-02-09 14:32 阅读: 2133 次原文链接全屏阅读 [收藏] http://kb.c ...
WEB前端底层知识--浏览器是如何工作的
随笔- 6 文章- 2 评论- 103 WEB前端底层知识--浏览器是如何工作的概述对于一直从事B/S架构(B/S也是一种C/S架构,只不过C/S自己写显示而B/S有相对统一的显示引擎实现而已 ...
Henry前端笔记之 HTML相关
Henry前端笔记之 HTML相关一些标签的使用,切记所有标签都需要闭合,不管是单体标签还是成对标签.(尽管目前浏览器是识别有些标签不闭合的情况,但是取的最好的保证兼容性,使用闭合) 标签写法要用小 ...
打造前端MAC工作站以及相关文章索引
打造前端MAC工作站以及相关文章索引前言这个系列的博文将会非常多,为了便于大家查找,因此在这里置顶这篇索引准备工作什么是前端工程师?前端工程师需要掌握什么技能? 前端工程师应该选择什么操作系统 ...
前端面试八股—浏览器（一）
文章目录前端安全 CSRF XSS 网络劫持前端存储缓存强制缓存协商缓存点击刷新或按F5.按Ctrl+F5强制刷新.地址栏回车的区别存储方式 cookie cookie.session. ...
浏览器相关内容总结?
1.cookie和sessionStorage和localStorage的区别共同点:都保存在浏览器端,且同源的.区别: 1.cookie数据始终在同源的http请求中携带(即使不需要),即cook ...
AI问答：浏览器相关知识
一.浏览器的发展历史可以分成以下几个阶段 1. 单一线程浏览器时代:早期的浏览器如Mosaic.Netscape Navigator.Internet Explorer等都是单一线程的,无法同时处理多 ...

前端大杂烩之浏览器相关（一）

前端大杂烩之浏览器相关（一）相关推荐

最新文章

热门文章