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