浏览器，渲染，页面优化，存储，缓存，同源策略，跨域问题

一.浏览器渲染

1.浏览器渲染原理

原文链接：https://blog.csdn.net/qq_45952585/article/details/124069123前端项目性能优化方案有哪些_前端性能优化有哪些方法_IsAnSir的博客-CSDN博客

渲染顺序 HTML CSS JS

2.渲染流程有四个主要步骤：

解析HTML生成DOM树 - 渲染引擎首先解析HTML文档，生成DOM树
构建Render树 - 接下来不管是内联式，外联式还是嵌入式引入的CSS样式会被解析生成CSSOM树，根据DOM树与CSSOM树生成另外一棵用于渲染的树-渲染树(Render tree)，
布局Render树 - 然后对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置
绘制Render树 - 最后遍历渲染树并用UI后端层将每一个节点绘制出来

来自 <浏览器渲染原理及流程_南一师兄的博客-CSDN博客>

3.一个完整的渲染流程大致可总结如下:

1.解析HTML生成DOM树 - 渲染引擎首先解析HTML文档，生成DOM树。

2.渲染引擎将CSS样式表解析生成CSS树,计算出DOM节点的样式。

3.DOM树 + CSS树创建布局Render树，并计算元素的布局信息。

4.对布局树进行分层，并生成图层树。

5.对每个图层生成绘制列表，并将其提交给合成线程。

6.对每个图层进行单独的绘制

7.合并图层。

原文链接：https://blog.csdn.net/p1967914901/article/details/122690769

4.DOM树和渲染树有什么区别？

DOM树是和HTML标签一一对应的，包括head和隐藏元素

渲染树是不包含head和隐藏元素

二.性能页面优化，首屏优化

1.前端性能优化以及解决方案

前端项目性能优化方案有哪些_前端性能优化有哪些方法_IsAnSir的博客-CSDN博客

1、请减少HTTP请求：

2、非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别

3、利用浏览器缓存

4、使用CDN加速（内容分发网络）

5、DNS预解析

6、使用JSON格式来进行数据交换

7、请正确理解 Repaint(重绘) 和 Reflow(回流/重排)

8、请减少对DOM的操作

9、精简CSS和JS文件

10、压缩图片和使用图片Sprite技术

11、注意控制Cookie大小和污染

12、开启Gzip（代码压缩）

13、减少不必要的Cookie

14、脚本优化

15、前端代码结构的优化

16、SEO优化

2.提升页面性能优化的常见方式：

1、资源压缩合并，减少http请求

2、非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别

3、利用浏览器缓存 --> 缓存的分类 --> 缓存的原理

缓存是所有性能优化的方式中最重要的一步【重要】

有的人可能会回答local storage 和session storage，其实不是这个。浏览器缓存和存储不是一回事。

4、使用CDN

浏览器第一次打开页面时，缓存是起不了作用的。这个时候，CDN就上场了。

5、DNS预解析

来自 <https://www.cnblogs.com/qianguyihao/p/8550195.html>

3.web前端开发，如何提高页面性能优化？详细

内容方面：

1.减少 HTTP 请求 (Make Fewer HTTP Requests)

2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)

3.使得 Ajax 可缓存 (Make Ajax Cacheable)

针对CSS：

1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)

2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)

4.避免 CSS 表达式 (Avoid CSS Expressions)

针对JavaScript ：

1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

4. 移除重复脚本 (Remove Duplicate Scripts)

面向图片(Image)：

1.优化图片

2 不要在 HTML 中使用缩放图片

3 使用恰当的图片格式

4 使用 CSS Sprites 技巧对图片优化

5、前端开发中，如何优化图像？图像格式的区别？

优化图像：

1、不用图片，尽量用css3代替。比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。

2、使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！

3.、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。

基本上，内容图片多为照片之类的，适用于JPEG。

而修饰图片通常更适合用无损压缩的PNG。

GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。

4、按照HTTP协议设置合理的缓存。

5、使用字体图标webfont、CSS Sprites等。

6、用CSS或JavaScript实现预加载。

7、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。

来自 <2018最新Web前端经典面试试题及答案 - 知乎>

4.首屏优化该如何去做？

1.使用路由懒加载

2.非首屏组件使用异步组件

3.首屏不中要的组件延迟加载

4.静态资源放在CDN上

(CDN是构建在网络上的内容分发网络，具备内容存储和分发两个关键要素,

其基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。

5.减少首屏上JS、CSS等资源文件的大小

6.使用服务端渲染

7.尽量减少DOM的数量和层级

8.使用精灵图请求

9.做一些loading

10.开启Gzip压缩

11.图片懒加载

5.防抖和节流是什么？

都是应对页面中频繁触发事件的，方案如下：

防抖:避免事件重复触发

使用场景:1.频繁和服务端交互 2.输入框的自动保存事件

节流:把频繁触发的事件减少,每隔一段时间执行

使用场景:scroll事件

三.浏览器存储方式，缓存

1..浏览器的存储方式有哪些？

1.cookies

H5标准前的本地存储方式

兼容性好，请求头自带cookie

存储量小，资源浪费，使用麻烦（封装）

2.localstorage

H5加入的以键值对为标准的方式

操作方便，永久存储，兼容性较好

保存值的类型被限定，浏览器在隐私模式下不可读取，不能被爬虫

3.sessionstorage:当前页面关闭后就会立刻清理，会话级别的存储方式

4.indexedDB:H5标准的存储方式，他是以键值对进行存储，可以快速读取，适合WEB场景

1.5 cookie的特点

cookie存储数据在客户端浏览器

浏览器对于单个cookie的大小有限制(4kb)以及对同一个域名下的总cookie数量有限制(20个)作用：
cookie一般用于存储少量的不太敏感的数据
在不登录的情况下完成服务器对客户端的身份识别
存储量小，资源浪费，使用麻烦（封装）
1.域的限制 2.时间限制 3.空间限制，cookie只能存储4kb
4.数量限制,每个域下最多不能超过50个cookie5.存储数据类型限制,cookie只能存储字符串

四.同源策略

1.说一下什么是“同源策略”？

http:// www. aaa.com:8080/index/vue.js

协议子域名主域名端口号资源

同源策略是浏览器的核心，如果没有这个策略就会遭受网络攻击

主要指的就是协议+域名+端口号三者一致，若其中一个不一样则不是同源，会产生跨域

三个允许跨域加载资源的标签：img link script

跨域是可以发送请求，后端也会正常返回结果，只不过这个结果被浏览器拦截了！

JSONP

CORS

websocket

反向代理

五.跨域

1、为什么会出现跨域问题

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。

在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。在请求的过程中我们要想回去数据一般都是post/get请求，所以跨域问题出现

跨域

2、什么是跨域

当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域

当前页面url 被请求页面url 是否跨域原因

http://www.test.com/ http://www.test.com/index.html 否同源（协议、域名、端口号相同）

http://www.test.com/ https://www.test.com/index.html 跨域协议不同（http/https）

http://www.test.com/ 百度一下，你就知道跨域主域名不同（test/baidu）

http://www.test.com/ http://blog.test.com/ 跨域子域名不同（www/blog）

http://www.test.com:8080/ http://www.test.com:7001/ 跨域端口号不同（8080/7001）

3、解决跨域

方式一：使用 ajax 的 jsonp

使用该方式的缺点：请求方式只能是 get 请求

方式二：使用 jQuery 的 jsonp 插件

特点： get 请求、 post 请求；

但从服务器从获取的数据，依然是 jsonp 格式。

插件下载网址：https://github.com/jaubourg/jquery-jsonp

方式三：使用CORS：跨域资源共享

原理：服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求

限制：浏览器需要支持HTML5，可以支持POST，PUT等方法兼容ie9以上

需要后台设置

Access-Control-Allow-Origin: * //允许所有域名访问，或者

Access-Control-Allow-Origin: http://a.com //只允许所有域名访问

方式四.反向代理

方式五.window+iframe

方式六.动态创建一个script标签。利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容

步骤：

1. 去创建一个script标签

2. script的src属性设置接口地址

3. 接口参数,必须要带一个自定义函数名要不然后台无法返回数据。

4. 通过定义函数名去接收后台返回数据

//去创建一个script标签

var script = document.createElement("script");

//script的src属性设置接口地址并带一个callback回调函数名称

script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback";

//插入到页面

document.head.appendChild(script);

//通过定义函数名去接收后台返回数据function jsonpCallback(data){

//注意 jsonp返回的数据是json对象可以直接使用

//ajax 取得数据是json字符串需要转换成json对象才可以使用。

}

4.http与https的区别

　　http是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出;而消息内容则具有一个类似MIME的格式。

　HTTPS全称为Hyper Text Transfer Protocol over SecureSocket Layer)，是以安全为目标的HTTP通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。

　1、传输信息安全性不同：http是超文本传输协议，信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。而https协议是具有安全性的ssl加密传输协议，为浏览器和服务器之间的通信加密，确保数据传输的安全。

　　2、连接方式不同：http的连接很简单，是无状态的；而https协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议。

　　3、端口不同：http协议使用的端口是80，https协议使用的端口是443。

　　4、证书申请方式不同：http协议可以免费申请，而https协议需要到ca申请证书，一般免费证书很少，需要交费。

2.说一下浏览器的缓存策略

强缓存（本地缓存）、协商缓存（弱缓存）
强缓：不发起请求，直接使用缓存里的内容，浏览器把JS，CSS，image等存到内存中，下次用户访问直接从内存中取，提高性
协缓：需要像后台发请求，通过判断来决定是否使用协商缓存，如果请求内容没有变化，则返回304，浏览器就用缓存里的内容
强缓存的触发：
HTTP1.0:时间戳响应标头
HTTP1.1:Cache-Control响应标头
协商缓存触发：
HTTP1.0:请求头：if-modified-since 响应头：last-modified
HTTP1.1:请求头：if-none-match 响应头：Etag