关于浏览器，我们聊什么？

27 Mar 2022

模型

{BOM}

关于网页开发，主要关注浏览器什么方面的方案？

模型。HTML 标签的运用、事件模型的处理等。
性能。DOM 操作、缓存、样式动画等。
安全。Web 攻击的分类以及防御措施。
兼容。PC & Mobile 平台的样式适配、对客户的适配（国际化、无障碍）。

可以看出，这些要素也是 MVC 框架也关注的。比如 React 的“合成事件”模型、顶层 API 主要关注性能、DOMPurify 安全消毒、浏览器兼容（IE 除外）。

{HTML}

HTML 标签分多少类？你为什么这样分类？

我会分成 5 类。举个例子，我们想要看一集电视剧。网络搜索内容后，我们打开一个网页，它就按照下面的步骤呈现：网页信息、大体结构、多媒体、文本，然后放完了视频，我们发个评论，用到了交互组件。
网页的能力，同时也是它的界限。研发浏览器的公司，会提供什么标签给开发者，取决于使用者（也就是客户）用到了什么能力。打个比方，Kindle 的用户使用它，目的是看书，所以制造商用墨水屏作为部件。假如用户对于用 Kindle 看视频的呼声很高，那市场肯定会出现彩屏的 Kindle。

为什么一些有用的标签如 i、b 之类，在开发中很少使用？

因为不规范不标准，只有部分浏览器支持。一些新标签如 progress，都是用组件库的进度条实现。（有哪些被低估未被广泛使用的有用的 HTML标签？ - 知乎）
封装的 MVC 库有自己特有的标签库，尽管它们的本质是一样的。比如 Taro 用 Text 放置文本，不支持 i 之类的原生标签。

样式

{CSS}

最常写的 CSS 布局，是关于什么的？最浪费时间的又是哪种？

常写和耗时的，都是关于布局的。移动端做适配，要写的可变换好维护，是门技术活。
最应该掌握的是 Flexbox
形状和视觉效果的，蓝湖这类工具都帮我们做了。因为大部分时候它们都是静态的，就算有动效，也是写一次到处共用。

Flexbox 最容易忽略但是又十分有用的是什么属性？

容器：align-content，item：align-self
都是对垂直位置的控制，不必求助浮动和 grid

Flexbox 最常见的布局是什么？其它方案多是应对什么场景？

两种，响应式（重复元素排列），和流式（常见两行/两列布局，一侧固定一侧自动）
浮动方案也能实现 flexbox 的效果，不过更多的属性设置在元素上，而非容器上。所以难以管控，做不到 flexbox 的改变一个属性就改变显示效果的能力
方向难以改变
垂直方向布局难以设置
定位方案能做到堆叠的效果，这是以上两者都无法实现的。
当然，流式的效果还是能做到的（上层 posotion: absolute，下层有 padding）