摘要: 浏览器渲染过程 什么是渲染过程?简单来说,渲染引擎根据 HTML 文件描述构建相应的数学模型,调用浏览器各个零部件,从而将网页资源代码转换为图像结果,这个过程就是渲染过程(如下图)。 从这个流程来看,浏览器呈现网页这个过程,宛如一个黑盒。在这个神秘的黑盒中,有许多功能模块,内核内部的实现正是这些功能 阅读全文
posted @ 2022-10-28 11:30 自在一方 阅读(176) 评论(0) 推荐(0) 编辑
摘要: 服务端渲染(SSR)近两年炒得很火热,相信各位同学对这个名词多少有所耳闻。本节我们将围绕“是什么”(服务端渲染的运行机制)、“为什么”(服务端渲染解决了什么性能问题 )、“怎么做”(服务端渲染的应用实例与使用场景)这三个点,对服务端渲染进行探索。 服务端渲染是一个相对的概念,它的对立面是“客户端渲染 阅读全文
posted @ 2022-10-11 09:48 自在一方 阅读(70) 评论(0) 推荐(0) 编辑
摘要: CDN (Content Delivery Network,即内容分发网络)指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本,因此服务器可以根据哪 些服务器与用户距离最近,来满足数据的请求。 CDN 提供快速服务,较少受高流量影响。 为什么要用 CDN 浏览器存储的相关知识此刻离我们还不 阅读全文
posted @ 2022-09-30 10:30 自在一方 阅读(535) 评论(0) 推荐(0) 编辑
摘要: 随着移动网络的发展与演化,我们手机上现在除了有原生 App,还能跑“WebApp”——它即开即用,用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。 我认为,WebApp 就是我们前端性能优化的产物,是我们前端工程师对体验不懈追求的结果,是 Web 网页在性能上向 N 阅读全文
posted @ 2022-09-14 13:42 自在一方 阅读(70) 评论(0) 推荐(0) 编辑
摘要: 缓存可以减少网络 IO 消耗,提高访问速度。浏览器缓存是一种操作简单、效果显著的前端性能优化手段。对于这个操作的必要性,Chrome 官方给出的解释似乎更有说服力一些: 很多时候,大家倾向于将浏览器缓存简单地理解为“HTTP 缓存”。但事实上,浏览器缓存机制有四个方面,它们按照获取资源时请求的优先级 阅读全文
posted @ 2022-09-07 15:11 自在一方 阅读(378) 评论(0) 推荐(0) 编辑
摘要: 图片优化——质量与性能的博弈 就图片这块来说,与其说我们是在做“优化”,不如说我们是在做“权衡”。因为我们要做的事情,就是去压缩图片的体积(或者一开始就选取体积较小的图片格式)。但这个优化操作,是以牺牲一部分成像质量为代价的。因此我们的主要任务,是尽可能地去寻求一个质量与性能之间的平衡点。 不同业务 阅读全文
posted @ 2022-08-29 11:57 自在一方 阅读(130) 评论(0) 推荐(0) 编辑
摘要: 前面课程绘制了一个立方体效果,下面通过three.js的球体构造函数SphereGeometry()在三维场景中添加一个球几何体 ###SphereGeometry构造函数 SphereGeometry(radius, widthSegments, heightSegments) 第一个参数radi 阅读全文
posted @ 2022-07-27 17:00 自在一方 阅读(97) 评论(0) 推荐(0) 编辑
摘要: 数据渲染技术对比 选择什么作为承载我们可视化结果的容器,同时选择什么样的绘制技术来渲染这些数据。往往面对不同的可视化需求,不同量级的数据,我们需要选择不同的渲染技术,渲染技术的选择和学习也是其中一个难点。毫无疑问,作为前端这个领域,承载我们可视化的结果容器就是现代浏览器。在现代浏览器中可以完成可视化 阅读全文
posted @ 2022-07-08 17:01 自在一方 阅读(330) 评论(0) 推荐(0) 编辑
摘要: 坐标系转换 这里需要注意的 Canvas2D 和SVG的坐标系和我们课本里介绍的坐标系有点不同:它的原点是在左上角,x 轴是从左到右的,y 轴是从上到下的,大家可以参考下面的这张图。 canvas2D坐标系转换 下面再介绍一下 Canvas2D 坐标变换能力,我们可以对其进行平移、缩放和旋转等坐标系 阅读全文
posted @ 2022-06-10 15:39 自在一方 阅读(184) 评论(0) 推荐(0) 编辑
摘要: 鼠标操作三维场景 借助three.js众多控件之一OrbitControls.js,可以在下载的three.js-master文件中找到(three.js-master\examples\js\controls)。 然后和引入three.js文件一样在html文件中引入控件OrbitControls 阅读全文
posted @ 2022-05-19 17:24 自在一方 阅读(76) 评论(0) 推荐(0) 编辑