您现在的位置:主页 > 视频空间 >
 
 

Mediumcom的前端技术基于什么有怎样的特点

时间:2020-05-17 14:17:36

Medium用了三个和知乎同样在使用的Closure相关工具,不得不说在Google之外很少见:ClosureLibrary:提供定义和引用模块的方式,以及一些UI组件(比如编辑器,Medium在此之上做成了无形的,真是引人注目)。ClosureCompiler:前端代码进行优化压缩的工具。Plovr:ClosureLibrary专用的模块分组打包工具。顾鹏说的渲染方式有点不对,pjax和SPA的技术几乎是对立的。Medium是一个采用了RESTfulAPI的webapp,它没有直接替换HTML,而是用JSON+模板来生成HTML。我认为Medium在服务器端和客户端共用了模板,因此它能进行一致的渲染。当首屏加载时使用服务器端渲染,之后的浏览使用客户端渲染。这样做的优点是对SEO友好,加载速度更快——首屏内容里面有个embedded字段,包含了文章的JSON表示,这节省了一个HTTP请求。文章对象里面有个有趣的地方是,HTML的结构化内容全部用被JavaScript化了——精确到任何块级或内联元素——这样每个段落都可以由用户添加注释。Medium还有一篇文章分享了许多技术细节:Justawebpage?纠正,感谢顾鹏提供的文章链接,观察了一些请求之后,发现Medium在文章页面点击左侧菜单中的Home链接时,使用了pjax加载首页的文章列表:RequestURL:https://medium.com/?format=fragmentRequestMethod:GETX-Response-Type:html-body补充文章加载过程:#加载主资源,文章内容:RequestURL:https://medium.com/p/:postidRequestMethod:GETAccept:application/json#加载次级资源,此时文章内容已经提前显示,没有side-loading:GEThttps://medium.com/p/:postid/follow-upsGEThttps://medium.com/p/:postid/upvotesGEThttps://medium.com/p/:postid/notes#中途滚动,记录当前正在阅读的章节:PUThttps://medium.com/p/:postid/state/locationRequestPayload:{paragraphName:"f169",sectionName:"0c50"}#滚动到页面底端,标记为已读:PUThttps://medium.com/p/:postid/state/read#鼠标经过(不需要点击)在底端的导航推荐文章链接之上时,预载其内容,并渲染成DOM:GEThttps://medium.com/:collection/:postidAccept:application/json最后一步预载内容就是出现多个surfacediv的原因,Medium做的优化,以方便快速地切换页面。附上DOM断点截图(含post对象和模板):
共有评论 11相关评论
发表我的评论
  • 大名:
  • 内容: