项目背景： 实现一款图像编辑器，功能包括裁剪、亮度调整、马赛克、扎点、方向选择（由于这部分和业务强相关不做介绍）、撤销重做、图片保存。

好友之间聊天，支持问题、图片、表情、音视频通话以及白板（适用WebRTC实现）。 对好友支持备注、分组功能，分组可以添加、修改、删除。 好友之间的消息支持已读状态提醒，可以即时的知道对方是否已读消息。 在线好友统计，在每个分组中可以查看当前在线好友的数量，并对在线好友的头像做高…

通过以上四节我们基本完成了前端页面渲染PDF的基本功能，但是我们要做的不仅仅只有这些，我们实现的只是单页面视图。用户体验不是很好，我们要实现多页面试图，用户滚动查看，但是用户滚动查看就会遇到性能问题，因为每一页都要渲染成一个 canvas 标签，如果PDF有几千页，就要几千个d…

有了以上的分析，我们就知道改如何优化PDF渲染，我们假设页面上面有一个列表，列表里面每一个元素都保存着pdf页面信息和文本信息，那么我们的优化就从 pdf 大文件优化转化成了前端页面长列表优化。 如果是优化长列表，我们能列举出好多优化方案：懒加载，虚拟滚动。我们这节就用虚拟滚动…

如果你看过前几篇文章，就会知道我们之前的渲染方式是通过创建一个承载pdf的canvas标签通过pdf.render()的方式渲染到创建的canvas，如果需要渲染pdf的文字需要创建一个与canvas样式一样的div承载文字信息，就可以实现pdf里面文字的右键复制功能。

1. Getting Started

推荐阅读1、前端页面如何优雅的显示PDF：原理说明2、前端页面如何优雅的显示PDF（上）：渲染页面使用依赖包text_layer_builder.jstext_layer_builder.css引入文