浏览器方面

Vue SSR 服务器端渲染

首先服务器渲染只有两个目的，

1，搜索引擎优化

2，首页渲染速度快

有两种方式参考官方文档，或者Next.js

vue-server-renderer 实现的vue-ssr依靠于这个库提供的API

七层网络协议 

1、物理层

计算机与计算机的通信，例如插网线

2、数据链路层

数据传播传输，可以理解成二进制，或者说一帧

3、网络层

ip地址 域名 等

4、传输层

端口范围 0-65535 0-1023是系统端口，建立端口到端口的链接

5、会话层

控制发包数据

6、表示层

文件格式

7、应用层

DNS：解决IP地址复杂难以记忆的问题，存储并完成自己所管辖范围内主机的域名到IP地址的映射
域名解析的顺序：浏览器缓存，找本机的hosts文件，路由缓存，找DNS服务器

浏览器渲染流程和原理

浏览器渲染原理及流程-CSDN博客

浏览器解析响应过程

详解浏览器解析一个URL的全过程_url解析-CSDN博客

前端性能优化 浏览器性能优化

前端性能优化9大策略（面试一网打尽）！-CSDN博客：
 

减少对HTTP的请求次数和大小 代码的优化  dns及HTTP通信方式 

1.js中减少闭包的使用,尽可能的手动释放不被站用的内存

2.尽量减少css和js文件（把需要引入的css合并成一个，js也是合并成一个），原理是在减少http请求次数，

3.尽量用矢量图或者svg图标代替传统的png等格式的图片

4.减少对DOM的操作（主要是减少DOM的重绘和回流（重排））

5.在js中避免“嵌套循环

 6.采用图片的懒加载（延迟加载），目的是减少页面第一次加载过程中http的请求次数

7.利用浏览器和服务器的缓存技术（304缓存），缓存静态资源

8.尽可能使用事件委托（事件代理）来处理事件绑定的操作，减少DOM的频繁操作，其中包括每一个DOM元素做事件绑定

9.减少使用css表达式（expression）

10.尽可能减少对标签选择器的使用（css选择器的解析是从右往左解析）

11.css雪碧图技术

12.减少cookie的使用（主要是减少本地cookie存储内容大小）

13.页面中的数据获取采用异步编程和延迟分批加载

14.页面中出现视频音频标签，我们不让页面加载的时候就去加载这些资源（要不然加载会变慢）（只需要设置preload="none"即可）等页面加载完成，音频播放的时候我们再加载资源

15.在客户端和服务端交互的时候，对于多项数据我们尽可能基于json格式来进行传送（json格式的数据处理方便，资源偏小） 

16.尽可能实现js的封装（低耦合高内聚），减少页面中的冗余代码（减少HTTP请求资源的大小） 17.在css导入的时候尽量减少使用@import导入式，因为@import是同步操作，而link是异步操作 18.使用window.requestAnimationFrame(js中的帧动画)代替传统的定时器动画

19.减少递归的使用，避免死递归，避免由于递归函数到制的栈内存嵌套

. 浏览器缓存优化
为了让浏览器缓存发挥最大作用，该策略尽量遵循以下五点就能发挥浏览器缓存最大作用。

「考虑拒绝一切缓存策略」：Cache-Control:no-store
「考虑资源是否每次向服务器请求」：Cache-Control:no-cache
「考虑资源是否被代理服务器缓存」：Cache-Control:public/private
「考虑资源过期时间」：Expires:t/Cache-Control:max-age=t,s-maxage=t
「考虑协商缓存」：Last-Modified/Etag
缓存策略通过设置HTTP报文实现，在形式上分为**「强缓存/强制缓存」和「协商缓存/对比缓存」**。为了方便对比，笔者将某些细节使用图例展示，相信你有更好的理解。

整个缓存策略机制很明了，先走强缓存，若命中失败才走协商缓存。若命中强缓存，直接使用强缓存；若未命中强缓存，发送请求到服务器检查是否命中协商缓存；若命中协商缓存，服务器返回304通知浏览器使用本地缓存，否则返回最新资源。

有两种较常用的应用场景值得使用缓存策略一试，当然更多应用场景都可根据项目需求制定。

「频繁变动资源」：设置Cache-Control:no-cache，使浏览器每次都发送请求到服务器，配合Last-Modified/ETag验证资源是否有效
「不常变化资源」：设置Cache-Control:max-age=31536000，对文件名哈希处理，当代码修改后生成新的文件名，当HTML文件引入文件名发生改变才会下载最新文件
2. 渲染层面性能优化
**「渲染层面」**的性能优化，无疑是如何让代码解析更好执行更快。因此笔者从以下五方面做出建议。

「CSS策略」：基于CSS规则
「DOM策略」：基于DOM操作
「阻塞策略」：基于脚本加载
「回流重绘策略」：基于回流重绘
「异步更新策略」：基于异步更新
上述五方面都是编写代码时完成，充满在整个项目流程的开发阶段里。因此在开发阶段需时刻注意以下涉及到的每一点，养成良好的开发习惯，性能优化也自然而然被使用上了。

渲染层面的性能优化更多表现在编码细节上，而并非实体代码。简单来说就是遵循某些编码规则，才能将渲染层面的性能优化发挥到最大作用。

**「回流重绘策略」**在渲染层面的性能优化里占比较重，也是最常规的性能优化之一。上年笔者发布的掘金小册《玩转CSS的艺术之美》使用一整章讲解回流重绘，本章已开通试读，更多细节请戳这里。

CSS策略
避免出现超过三层的嵌套规则
避免为ID选择器添加多余选择器
避免使用标签选择器代替类选择器
避免使用通配选择器，只对目标节点声明规则
避免重复匹配重复定义，关注可继承属性
DOM策略
缓存DOM计算属性
避免过多DOM操作
使用DOMFragment缓存批量化DOM操作
阻塞策略
脚本与DOM/其它脚本的依赖关系很强：对<script>设置defer
脚本与DOM/其它脚本的依赖关系不强：对<script>设置async
回流重绘策略
缓存DOM计算属性
使用类合并样式，避免逐条改变样式
使用display控制DOM显隐，将DOM离线化
异步更新策略
在异步任务中修改DOM时把其包装成微任务
3. 性能优化六大指标
六大指标基本囊括大部分性能优化细节，可作为九大策略的补充。笔者根据每条性能优化建议的特征将指标划分为以下六方面。

「加载优化」：资源在加载时可做的性能优化
「执行优化」：资源在执行时可做的性能优化
「渲染优化」：资源在渲染时可做的性能优化
「样式优化」：样式在编码时可做的性能优化
「脚本优化」：脚本在编码时可做的性能优化
「V8引擎优化」：针对V8引擎特征可做的性能优化