「高性能响应式 Web 开发实战」 Part I

其实本来只是为了 responsive 的一些东西看看这本书，不过没想到还挺有意思的，作者留了一些 reference 可以用来做扩展阅读。

源码在：《高性能响应式 Web 开发实战》图书源码 上。

ch1 intro

第一章用的行能参考是别人放在 GitHub 上的文章，不过现在去看已经没有了，这里补一下 Google 最新定的一个标准：

这是 Google Web Vital 的值，目前来说前端性能测试用 Google 的 Web Vital 做标准的还是挺多的(国外项目)，国内项目就不是很清楚了。上面一些缩写分别代表：

• First Contentful Paint (FCP)

  最初内容渲染

• First Input Delay (FID)

  最初输入延迟

• Largest Contentful Paint (LCP)

  最大内容加载

• Cumulative Layout Shift (CLS)

  累计布局偏移

实验性质的目前包括：

• Interaction to Next Paint (INP)

  下次绘制时互动

• Time to First Byte (TTFB)

  第一字节时间

这里是书中列举的扩展阅读：

• Building to Learn

  除了 兴趣是最好的老师 外，也要开发自己用得上的东西

• Responsive Web Design

  这篇文章主要使用了 fluid(即百分比) 加上 media query 的方式实现了响应式，具有一定的参考价值。基于这篇文章的成稿时间——May 25, 2010，本篇主要还是有在依靠 float 进行实现。

  当然，这不是重点，重点是在于使用 media query 进行 responsive design。

  而本文作者认为的重点在于：

  响应式设计应该是一类思考解决问题的方式而不是一成不变的技术集合。过去每当提到响应式技术时第一时间想到的只有流式布局和媒体查询，但就在我键盘上敲出这一段文字的当下，本书涉及的响应式图片技术与性能优化技巧，甚至后端的 RESS 概念，都也都被列入到响应式技术集合中，它们与媒体查询同样重要。但是，我们不能批评说只谈媒体查询和流式布局的人是狭隘的，技术仍然受限于整个时代水平的客观性。或许不久的将来又会有更具有前瞻性的技术让当下我们谈论的退出历史舞台，所以我们始终要以开放的心态和发展的眼光看待响应式。

• A Dao of Web Design

  道德经是真的强啊，这里主要讲的还是一些设计概念以及实现的关系，比较粗略的那种。

  有点惭愧，一个外国人对于道德经的理解可能都比我深刻……

• The Big Web Design Trends for 2015

  这也是这几年的风尚，简约式，其特点为：

  • 大

    页面要大，留白要大，图片要大

    

  • 多媒体体验

    这点现在很多 theme 也在用，比较常见的救赎鼠标移动到页面后，会产生一些特效——蜘蛛网、爱心等。

  • 页面移动时的交互

    这个看苹果的官方网站能够有更确实的体会，进入产品页，页面的交互感都是很强的。

  • 导航栏的交互

    即点击导航栏进入不同的页面时，页面会有一定程度上的互动。

    我觉得这个部分就要看页面设计了，互动比较多的相对而言页面比较简单，并且比较多的是个人页面。如果所有内容一个页面摊不开来，那么互动也无从提及。

  • 扁平化设计

  • 无盒设计

    这也是现在很多 CSS 库走的方向，哪怕是 card，现在的边角都是圆的，不存在很 boxy 的情况。

下面是书中提出会解决的问题：

• 页面应该参照什么参数（屏幕尺寸、分辨率、设备用户代理）进行响应？
• 针对上面的参数应该采用什么样的策略（移动优先、桌面优先、临界点是多少）进行响应？
• 用什么样的技术能够实现响应？对于不支持该技术的浏览器如何处理？
• 为什么同一张图片在不同设备上看到的大小不同？
• 为什么有的图片素材在小屏的高清设备上会模糊？
• 有没有可能为不同的设备提供不同的图片素材？
• 如果上面问题的答案是肯定的话，那么我们用什么参数（屏幕尺寸？分辨率？）区分不同的设备？
• 对于不支持上面问题解决方案的浏览器应该如何处理？

ch2 CSS

本章内容主要讲述 CSS 中像素的问题，这个对于做过一段时间开发的前端来说都是比较常识性的东西了，这里就简单的提一下即可。

虽然手机厂商说自己的显示屏是 1980 的，但是通常情况下设备像素与 CSS 像素是不一样的。如 iPhone13 Pro Max 的数据：

实际上的 viewport size 为 428px x 926px，这也可以从浏览器中 responsive device 中看到：

也就是说，对于大多数手机而言，1080 和 720 看起来会好一些，不过不一定会产生绝对意义上的影响——除非你两台手机放在一起进行对比。没有针对移动端进行优化，那么 PC 的网页打开放到手机上就是等比缩小，这也就是为什么有些页面在手机打开就非常奇怪。

关于 viewport, 目前这个东西抄就行了：<meta name="viewport" content="width=device-width, initial-scale=1.0">，这样就可以使用 media query 对移动端进行优化了。

ch3 & ch4 layout & responsive layout

本章的参考内容有：

• Single page apps in depth

  免费的开源书籍

• Secret Symphony: Intro to Golden Ratio Typography

  行高和字体比例的文，做着同样提供了一个计算器 Golden Ratio Typography (GRT) Calculator 用于计算字体与行高的比例。

其余更多的也就是 hand on experience 了，概念性的不多。写代码我就跳过了，毕竟类似的东西写过很多遍了……

ch5 responsive image

书中提出了几个解决方案：

1. 使用 width 进行调整

   如果图片比较大，获取图片的过程还是会占用很多的带宽

2. img tag 中用 secret

   用法为：<img src="small.jpg" srcset="medium.jpg 600w, large.jpg 800w ">

3. 使用 picture tag

   用法为：

   <picture>
     <source media="(max-width: 640px)" srcset="small.jpg 320w" />
     <source media="(max-width: 960px)" srcset="medium.jpg 640w" />
     <source srcset="large.jpg 1024w" />
   </picture>
   1
   2
   3
   4
   5

4. 简单的图片可以通过 CSS, icon font, SVG 完成

5. 由后端控制应当返回什么图片到前端

   NextJS 应该用的就是这种判断方法