daily-plan
daily-plan copied to clipboard
sl1673495
2020-04-12日计划：面试题、css、算法
复习一下box-sizing https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing
浏览器标准模型和怪异模型
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Quirks_Mode_and_Standards_Mode#What_are_the_differences_between_the_modes.3F
如何开启
头部添加 <!DOCTYPE html> 即可启用标准模型
怪异模型的原因是
当 W3C 创立网络标准后，为了不破坏当时既有的网站，浏览器不能直接弃用这些标准。因此，浏览器采用了两种模式，用以把能符合新规范的网站和老旧网站区分开。
怪异模式的区别
盒模型采用怪异盒模型，也就是 box-sizing: border-box，这种盒模型下宽高是由
content + padding + border 共同计算出来的。
data-set 的好处
HTML5是具有扩展性的设计，它初衷是数据应与特定的元素相关联，但不需要任何定义。data-* 属性允许我们在标准内于HTML元素中存储额外的信息
对于一个HTML标签：
<div data-id="5"></div>
js中访问
可以通过两种方式来获取 data-id 的值：
// 可以简单的通过 dataset 属性来获取
div.dataset.columns // 5
// 也可以通过传统的 getAttribute 方法，传入完整的属性名获取
div.getAttribute('data-id')
css中访问
article::before {
content: attr(data-parent);
}
article[data-columns='3'] {
width: 400px;
}
<script>、<script async> 和 <script defer> 的区别
defer
- 立刻下载，但是延迟执行。在
DOMContentLoaded事件之前执行 - 多个 defer 的执行时机不保证顺序。
async
- 异步下载，但是下载成功后就立刻执行。
- 由于是异步，所以不能保证顺序，两个 async 脚本直接不要有依赖性。
什么是渐进式渲染
https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
- 图像懒加载
- 利用js、css等方式让首屏以外的内容延迟加载
CSR 和 SSR 的区别
参考 progressive-rendering-the-key-to-faster-web
CSR
- 浏览器请求服务端的 HTML
- 服务端返回 HTML，包括 script 标签和空的 body 内容
- 浏览器解析 HTML， 并且发送请求获取 script 内容
- 获取到 script 内容后，浏览器解析执行，异步获取网页内容。
优点
- 加载初始JavaScript后，即可异步加载内容。 我们可以先加载关键内容，然后再加载非关键内容。
- 初始加载JavaScript捆绑包可以缓存在浏览器中，这可能会使经常使用的用户受益。
缺点
- 初始加载JavaScript阻止内容加载。 捆绑包的尺寸越大，在页面上显示内容所需的时间就越长。
- 用户端（浏览器）距离服务器的物理距离可能较远，在网速慢的情况下请求 API 的速度可能会很慢。
- SEO 不友好，因为搜索引擎没有执行JavaScript，只有空白页面被编入索引。
SSR
- 浏览器向服务器请求HTML。
- 服务器发出API请求（通常位于同一位置）并在服务器中呈现内容。
- 页面准备就绪后，服务器会将其发送到浏览器。
- 浏览器将加载并解析HTML，并直接在屏幕上绘制内容，不用再异步下载 script，请求内容了。
- 一旦加载了JavaScript捆绑包，浏览器就会将其与 DOM 元素结合，一般会包含
注水的过程。
优点
- 由于API通常与服务器位于同一位置，因此将以超快的速度（比CSR更快）加载内容，并将HTML发送到浏览器。 初始JavaScript加载不会阻止内容加载，因为服务器发送的HTML已包含内容。
- 页面会先展示内容，然后再进行
注水过程。 - 由于页面展示不依赖 script 标签，所以对 SEO 更加友好。
缺点
- 在将整个HTML发送给客户端之前，必须在服务器上呈现整个HTML。 这意味着，即使非关键内容也必须在将响应HTML发送到客户端之前在服务器上呈现。
- 增加服务器压力，很多原本在客户端做的事情现在需要在服务端完成。
- 增加代码编写难度，所以出现了
next、nuxt等同构框架。
服务端渐进式渲染（PSSR）
- 浏览器向服务器请求HTML。
- 服务器发出API请求（通常位于同一位置），然后首先在服务器中呈现关键内容并将其流式传输到浏览器。
- 浏览器接收HTML块并将其呈现（绘制）在屏幕上。
- 服务器在呈现关键内容后呈现非关键内容，并将其流式传输到客户端。
- 浏览器稍后接收并渲染（绘制）非关键内容。
- 一旦加载了整个页面，浏览器就会将交互性添加到DOM元素中，而DOM元素通常会附加事件处理程序和其他交互行为。
优点
- 渐进式渲染桥接了CSR和SSR的优势。 由于API共同位于服务器中，因此可以快速呈现内容，同时，可以快速呈现关键内容，而不必等待非关键内容。
缺点
-
仅在加载整个页面后，浏览器才会合并DOM并附加事件侦听器。 即使内容显示很快，但只有在加载非关键内容之后才能启用交互性。 （但是更快地显示内容仍然是一个胜利）。
-
没有用于渐进式渲染的既定框架，并且高度依赖于Web应用程序及其局限性。
CSS 如何扩大点击区域
利用 border 也可以，但是背景图片要用 background-clip: padding-box 来防止蔓延至边框的边缘。而且后续真正需要 border 的时候也很麻烦。
相对来说用伪元素最好。
