知乎

时间：20221110

问题一

该图片是20221110打开知乎以后，进入控制台的截图。

将会引发的问题：

• 如果在知乎的网站中内嵌iframe，内嵌的界面无法使用上图中的cookie。
• 根据不同的情况在SameSite为Lax的情况下可能会出现不同的Bug，只要理解SameSite具体功能，就能迎刃而解。

小小感慨：前端编辑的一个难以解决的问题就是兼容性问题。不同的浏览器厂商在不同的角度为浏览器做着贡献。这些角度在没有形成大一统标准之前给前端工程师带来了很大的麻烦。

出现error的原因描述：chrome为了防止CSRF问题，在Chrome里添加了一个SameSite功能，chrome默认值是Lax，从源头上解决CSRF问题。

此时的情况是:

Cookies are not sent on normal cross-site subrequests (for example to load images or frames into a third party site), but are sent when a user is navigating to the origin site (i.e., when following a link)

可以参考SameSite了解该属性概况。。

while SameSite对该属性的应用给出了小栗子。

问题二

先查看是否有内存泄漏

performance monitor面板：

这种情况下也只是大概率发生了内存泄漏，毕竟不能否定业务的复杂性，人家就是有这种需求，刷新一下不是重启界面，而是监听了刷新按钮并在刷新后创建新对象（假设你有这样的需求，但是我在刷新了几次后，仅仅知乎就占用了240MB左右的内存，相比于第一次进入知乎占用60MB左右的内存，这已经很夸张了）。所以这里我们就按照内存泄漏来分析。

内存泄漏主要是因为OS资源被管理（被管理的过程需要用到内存，内存是有限的，资源的管理可以被反映到内存中）的过程中资源没有及时释放。

那我们接下来就按照内存泄漏的角度去分析可能存在的原因。

• 缓存（OS内存管理）
• 浏览器队列消费不及时（可以包含OS内存管理、外设管理、文件管理、进程/线程管理、I/O管理）
• 全局变量（OS内存管理）
• 计时器中引用没有清除（OS内存管理，也可以涉及对其他资源的管理）
• 闭包（OS内存管理，也可以涉及对其他资源的管理）
• 事件监听（OS内存管理，也可以涉及对其他资源的管理）
• ......

上面是前端编程过程中较常见的内存泄漏的问题。使用chrome提供的接口对其他OS资源的使用也会导致内存泄漏。eg：调用chrome接口读取文件（文件管理）。

比较刷新前后的内存快照，发现了一些Detached DOM，Event等。

刷新前后的对比图（只摘出了部分对象）：

在当前环境只能看到build之后的代码，因此略过具体的分析过程~

再看看其他的

可以想办法使FP&FCP尽量提前，LCP靠后，DCL位于中间。

啦啦啦啦，关于知乎，就先分析到这里吧~