# 前言

上一篇我们已经围绕 “网络层面” 探索页面性能优化的方案，接下来本篇围绕 “浏览器渲染层面” 继续开展探索。正文开始前，我们思考如下问题：

1. 浏览器渲染页面会经过哪几个关键环节？“渲染层面” 的优化从哪几方面着手？
2. “渲染层面” 的性能优化方案会有哪些？

# 前言

# 项目背景

中小项目，Vue-cli3 + vue2 + webpack4

# 目标

缩短白屏时间，用户能够更快的看到我的页面！

白屏时间：从打开页面到看到页面，中间白屏停留的时间。

# 方向

1. 减少资源体积，从而缩短请求时间

2. 减少资源请求个数，从而缩短等待时间

如果一个网页中包含比较多的图片，在页面加载时，会严重拖慢整个页面的加载速度，这就是我们今天要解决的问题.

这篇文章聊一下如何去优化图片，提高页面的加载速度。文章中演示的例子，只是将几张大图片简单的展示出来，通过这个例子去展示如何优化.

例子的源码在 github.com/XYShaoKang/… 中，可以克隆到本地进行调试，在线预览地址 xyshaokang.github.io/image-optim…

# 性能优化的意义

# 1. 性能是留住用户很重要的一环

• pinterest 重建了他们的页面以实现性能，使感知等待时间减少了 40％，从而将搜索引擎流量和注册量提高了 15％。
• 通过将平均页面加载时间减少 850 毫秒，COOK 发现他们能够将转化率提高 7％，将跳出率降低 7％，并将每个页面的页面数量增加 10％。
• BBC 发现，他们在网站加载的每一秒钟内就会损失 10％ 的用户。
• DoubleClick by Google 发现，如果网页加载时间超过 3 秒，则会有 53％ 的用户放弃移动网站的访问。

# 什么是认证（Authentication）

• 通俗地讲就是验证当前用户的身份，证明 “你是你自己”（比如：你每天上下班打卡，都需要通过指纹打卡，当你的指纹和系统里录入的指纹相匹配时，就打卡成功）
• 互联网中的认证：
• 用户名密码登录
• 邮箱发送登录链接
• 手机号接收验证码
• 只要你能收到邮箱 / 验证码，就默认你是账号的主人

# 什么是授权（Authorization）

• 用户授予第三方应用访问该用户某些资源的权限
• 你在安装手机应用的时候，APP 会询问是否允许授予权限（访问相册、地理位置等权限）
• 你在访问微信小程序时，当登录时，小程序会询问是否允许授予权限（获取昵称、头像、地区、性别等个人信息）
• 实现授权的方式有： cookie 、 session 、 token 、 OAuth

# 什么是凭证（Credentials）

• 实现认证和授权的前提是需要一种媒介（证书） 来标记访问者的身份
• 在战国时期，商鞅变法，发明了照身帖。照身帖由官府发放，是一块打磨光滑细密的竹板，上面刻有持有人的头像和籍贯信息。国人必须持有，如若没有就被认为是黑户，或者间谍之类的。
• 在现实生活中，每个人都会有一张专属的居民身份证，是用于证明持有人身份的一种法定证件。通过身份证，我们可以办理手机卡 / 银行卡 / 个人贷款 / 交通出行等等，这就是认证的凭证。
• 在互联网应用中，一般网站（如掘金）会有两种模式，游客模式和登录模式。游客模式下，可以正常浏览网站上面的文章，一旦想要点赞 / 收藏 / 分享文章，就需要登录或者注册账号。当用户登录成功后，服务器会给该用户使用的浏览器颁发一个令牌（token），这个令牌用来表明你的身份，每次浏览器发送请求时会带上这个令牌，就可以使用游客模式下无法使用的功能。

前言

Vue3 已经推出很长时间了，它周边的生态也是越来越完善了。之前我们使用 Vue2 的时候，Vuex 可以说是必备的，它作为一个状态管理工具，给我们带来了极大的方便。Vue3 推出后，虽然相对于 Vue2 很多东西都变了，但是核心的东西还是没有变的，比如说状态管理、路由等等。再 Vue3 种，尤大神推荐我们使用 pinia 来实现状态管理，他也说 pinia 就是 Vuex 的新版本。

那么 pinia 究竟是何方神圣，本篇文章带大家一起学透它！

TCP 三次握手和四次挥手的问题在面试中是最为常见的考点之一。很多读者都知道三次和四次，但是如果问深入一点，他们往往都无法作出准确回答。本篇尝试使用动画来对这个知识点进行讲解，期望读者们可以更加简单地地理解 TCP 交互的本质。

同域下多窗口间 localStorage 能共享吗？

• 答案是可以，如果页面中出现了串数据的话，很大概率就是 localStorage 共享导致的。

那么， sessionStorage 在多窗口之间能共享状态吗？

# 一、查阅文档

根据 MDN 的说法： sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

1. 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
2. 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文， 这点和 session cookies 的运行方式不同。
3. 打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage 。
4. 关闭对应浏览器标签或窗口，会清除对应的 sessionStorage 。

path 是 SVG 基本形状中最强大的一个，不仅可以实现 SVG 预定义的 line、rect、circle、ellipse、line、polyline、polygon 六种基本形状，还可以实现更复杂的效果，我们就开始学习 path 如何应用。

path 元素的能力

path 元素是 SVG 基本形状中最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。

比如矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形等。

更重要的是能够绘制一些曲线，如贝塞尔曲线、二次曲线等。

path 元素的形状是通过属性 d 来定义的，d 属性通过 “命令和坐标” 的序列来控制整个 path 绘制的路径