search

iblh / hexo-theme-material

Material Design theme for hexo.
https://iblh.github.io/material-demo/
GNU General Public License v3.0
4.03k stars 564 forks source link

增加无刷新跳转页面的特性，提高UX，加快加载速度 #487

Open ElderJames opened 7 years ago

ElderJames commented 7 years ago

I certify that I have first consulted (check all with "x")

我确认我已经查看了 (使用 "x" 选择)

I'm submitting a (check one with "x")

我正在申请 (使用 "x" 选择)

要不要增加无刷新跳转页面的特性？我在MDUI那个主题看到有这个特性的，感觉很不错

cubesky commented 7 years ago

@ElderJames 无刷新跳转需要 PJAX 支持，静态生成器无法配合后端实现这个功能

ElderJames commented 7 years ago

pjax都是应用在前端的，我试了下用在main元素下是可以的，但就是样式会错乱，我觉得应该是文件引入标签的位置问题，可以在这方面重构一下么

cubesky commented 7 years ago

@ElderJames 已记录，我们会在后续研究解决这个问题（如果我有时间的话，下下个大版本可能可以解决）

ElderJames commented 7 years ago

的确需要大范围的页面结构的重构，期待实现！

zthxxx commented 7 years ago

无刷新跳转页面 ? 说的是单页面应用的 hash router 么？

cubesky commented 7 years ago

@zthxxx pjax

WoadZS commented 6 years ago

如果想要单纯增加跳转加载速度，可以试试 InstantClick, 还能引用 jsdeliver 的公共库 https://cdn.jsdelivr.net/npm/instantclick@3.1.0/instantclick.min.js

neoFelhz commented 6 years ago

@WoadZS 我不推荐使用 InstantClick 库。使用 InstantClick 需要把 每一个页面的 JS 事件 都要重新触发一遍，包括但不限于 评论系统、实时渲染的代码高亮、站点访问统计 等，对主题的 侵入性改造 过大，得不偿失。

Material 主题支持强缓存特性，几乎所有的 js css 静态文件均会被存储在 localstorage 当中，使用 localstorage 实现的缓存机制几乎不会导致缓存失效，根本无需担心页面二次加载时的性能问题。 所以，Material 主题使用者的站点内的跳转速度，完全是由于 服务端性能 和 访客的网络环境 导致的 TTFB 过长，和主题本身无关；在这种情况下，哪怕是使用 InstantClick 亦无济于事。

WoadZS commented 6 years ago

@neoFelhz 谢谢neo喵提醒，是我没有考虑 Material 主题的强缓存特性，我会验证一下并移除我自己引入的 InstantClick