
用 Vue 3、TypeScript 和本地 Node SSE 服务展示工具进度,正确处理事件拆分、合并、重复和断流。公开页提供字节回放,源码包含可运行的真实本地 HTTP 示例;不涉及模型 token 流式输出。
最近在写 AI Agent 的前端实践,也保留前端技术与生活笔记。
继续阅读早期的前端技术笔记,或从归档按时间查找。
查看完整归档以 React 项目为例,梳理服务端渲染的流程及路由、状态管理和数据获取等实现细节。
本节以Vue的服务器端渲染为例,首先介绍基本流程,然后通过一个代码实例探讨其中的若干细节,并从中带领读者体会服务器端渲染是如何解决首屏性能问题的。
前端工程师的工作范畴其实不仅仅局限在客户端浏览器,特别是在处理性能优化问题时,往往需要站在全栈的角度去审视系统的每个细节。
页面布局也叫作重排和回流,指的是浏览器对页面元素的几何属性进行计算并将最终结果绘制出来的过程。凡是元素的宽高尺寸、在页面中的位置及隐藏或显示等信息发生改变时,都会触发页面的重新布局。
在JavaScript处理过后,若发生了添加和删除元素,对样式属性和类进行了修改,就都会导致浏览器重新计算所涉及元素的样式,某些修改还可能会引起页面布局的更改和浏览器的重新绘制,本节就着眼于样式相关的优化点,来看看如何提升前端渲染性能。
本节侧重优化JavaScript 的执行来改善用户在渲染方面的性能体验。
从关键渲染路径出发,讨论浏览器取得资源后,如何优化页面渲染性能。
权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源
浏览器向网络请求到的所有数据,并非每个字节都具有相同的优先级或重要性。所以浏览器通常都会采取启发式算法,对所要加载的内容先进行推测,将相对重要的信息优先呈现给用户,比如浏览器一般会先加载 CSS文件,然后再去加载JavaScript脚本和图像文件。
对图像与视频的延迟加载,从理论上看必然会对性能产生重要的影响,但在实现过程中有许多细节需需要注意,稍有差池都可能就会产生意想不到的结果。因此,总结以下几点注意事项。
请我喝杯咖啡吧~
支付宝
微信