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

一.浏览器渲染  

1.浏览器渲染原理

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

渲染顺序 HTML CSS JS

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

1. 解析HTML生成DOM树 - 渲染引擎首先解析HTML文档，生成DOM树
2. 构建Render树 - 接下来不管是内联式，外联式还是嵌入式引入的CSS样式会被解析生成CSSOM树，根据DOM树与CSSOM树生成另外一棵用于渲染的树-渲染树(Render tree)，
3. 布局Render树 - 然后对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置
4. 绘制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加速（内容分发网络）

将静态资源（如CSS、JavaScript、图片）部署到CDN上，使用户可以从离用户更近的服务器获取资源，减小延迟和提高加载速度。

CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络"边缘"，使用户可 以就近取得所需的内容，解决Internet网络拥塞状况，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等 原因，解决用户访问网站的响应速度慢的根本原因

5、DNS预解析

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

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

8、请减少对DOM的操作

9、精简CSS和JS文件

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

      图片优化：使用适当的图片格式（如JPEG、PNG、WebP）来减小图片的文件大小，使用图片压缩工具（如TinyPNG）来减小图片文件的大小，使用懒加载来延迟加载图片，只有当图片进入可视区域时才加载。

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>

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

        1.使用路由懒加载  图片懒加载