Pixiv - KiraraShss
舍弃pjax
舍弃pjax
本网站采用astro框架搭建，之前为astro2.0，现已迁移到astro3.0。
astro3.0的新特性中有一条为ViewTransitions
ViewTransitions是一组新的平台 API，用于解锁页面之间的本机浏览器过渡效果。从历史上看，这只能在单页应用程序（SPA）中实现，但是Web浏览器和规范作者在过去几年中一直在努力将本机页面过渡引入平台，而Astro 3.0是第一个将它们带入主流的Web框架。
使用ViewTransitions可以
pjax是一种传统的异步无刷新改变页面内容的技术，结合pushState和ajax，不需要重新加载整个页面就能从服务器加载html到当前页面，并且支持浏览器前进/后退
优点
减轻服务器压力
按需请求，只需加载页面的部分内容，而不需要重复加载一些公共的资源文件，大大减轻了服务器带宽占用和性能压力，且pjax请求会携带请求头，服务器可判断pjax请求只返回需要的html文本
优化页面加载体验
常规页面跳转需要重新加载html文件，会有有闪烁白屏的现象，在同一个网站访问时没有连贯性，用户体验不好。使用pjax后，可以只刷新页面的一部分，使页面切换更加流畅，并且可以在切换的时候添加过度动画，提高用户体验。
缺点
不兼容老浏览器
由于pjax采用pushState来改变地址栏url，这是html5中新增的history api，在旧版浏览器中不受支持。不过pjax会在不受支持的时候进行默认的页面跳转
使服务端交互变得复杂
由于pjax请求只需要返回一部分内容，服务端可能需要进行特殊处理
总结： pjax上手简单，学习成本低，在如博客等大部分内容相同的网站上十分使用
缺点
ViewTransitions使用View Transitions api进行过度，浏览器版本要求 chrome/Edge 111
使用
Astro 仅需几行代码就可以支持使用ViewTransition来待见可选择的，每个页面的过渡动画，可以在不刷新浏览器的情况下更新页面内容，并在页面之间提供无缝的动画效果。
astro会自动为不支持的浏览器创造回退。
将ViewTransitions添加到你的主布局中，或者也可以在需要ViewTransitions的页面中单独添加。
浙公网安备33018302001689号---
import {ViewTransitions} from 'astro:transitions'
---
<head>
<ViewTransitions/>
</head>过渡动画指令
astro会自动在新页面和旧页面中找到相应元素并分配一个共享的唯一view-transition-name。
在astro组件中使用transition:*指令来更精确的控制导航期间的页面过度行为
transition:name 覆盖astro默认元素匹配方式，为一堆DOM元素指定过度动画名称
transition:animate 在用新元素替换旧元素时，允许通过指定动画类型来覆盖astro默认动画效果
transition:persist 允许覆盖astro默认行为，在导航到另一个页面时保留组件和html元素的状态
事件
与pjax一样，ViewTransitions也有对应的事件
astro:page-load在页面导航结束后触发，在初始加载和后续前进/后退中都会触发此事件
astro:after-swap新页面替换旧页面后立即触发，用于在新页面加载后恢复状态，不同于astro:page-load，不会在初始加载中触发，只会在后续中触发
需要 "restartOnPushState":false，否则滚动条滚动一次就会因为pushState导致pace-js加载，很烦不是吗。