full-stack-in-7-days/frontend-intro/

[giscus[bot]]

full-stack-in-7-days/frontend-intro/

挑战自己，用一周的时间走通整套全栈开发的流程

https://candinya.github.io/full-stack-in-7-days/frontend-intro/

[ghost]

嫌day3太长的完全可以跳过day3，直接看下面的两篇：

《使用 HTML、CSS 和 Javascript 构建简单的网站》 https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=OSS-MVP-5003485

《Web 入门教程》 https://developer.mozilla.org/zh-CN/docs/learn

[ghost]

压缩资源
为了提升可维护性，我们通常会在编写三大件的时候使用较为统一的格式，包括缩进、换行、含有实际语义的变量名和一些注释等等。但对于浏览器渲染来说，这些给人看的东西没有价值，甚至会因为文件加载体积的增加造成不必要的性能浪费。所以有一种解决思路，就是在发布的时候去掉这些不影响实际渲染效果的内容。

这段话是什么意思呢？这里的资源是指 xxxx.js 文件。压缩资源的意思是减少 xxxx.js 文件的大小。未经压缩的 xxxx.js 文件可能有 1000Kb 那么大。你要打开网页，浏览器得要把整个 xxxx.js 完全地下载回来，要下载完才给打开。如果网速很慢下载速度只有100Kb/s，那你打开一个网页要花10秒钟那么久。假如 xxxx.js 文件压缩后大小变成 100Kb ，那你的浏览器只会卡住一秒种，一秒后就顺利显示出整个网页。

什么是渲染呢？渲染=画图。

长的回答：请看 https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work

以下是节选

1.解析
一旦浏览器收到第一个数据分块，它就可以开始解析收到的信息。“解析”是浏览器将通过网络接收的数据转换为 DOM 和 CSSOM 的步骤，通过渲染器在屏幕上将它们绘制成页面。

2.渲染
渲染步骤包括样式、布局、绘制，在某些情况下还包括合成。在解析步骤中创建的 CSSOM 树和 DOM 树组合成一个渲染树，然后用于计算每个可见元素的布局，然后将其绘制到屏幕上。在某些情况下，可以将内容提升到它们自己的层并进行合成，通过在 GPU 而不是 CPU 上绘制屏幕的一部分来提高性能，从而释放主线程。

3.绘制
关键渲染路径中的最后一步是将各个节点绘制到屏幕上，其中第一次的绘制被称为首次有意义的绘制。在绘制或光栅化阶段，浏览器将在布局阶段计算的每个盒子转换为屏幕上的实际像素。绘制涉及将元素的每个可见部分绘制到屏幕上，包括文本、颜色、边框、阴影以及按钮和图像等替换元素。浏览器需要以超快的速度执行这个过程。

4.合成
当文档的各个部分以不同的层绘制，相互重叠时，必须进行合成，以确保它们以正确的顺序绘制到屏幕上，并正确显示内容。

[ghost]

加快图片的加载速度以提升终端用户的浏览体验。

“终端用户”的终端是什么意思？台式电脑的用户、手机的用户、平板电脑的用户、笔记本电脑的用户、智能设备的用户……他们加起来统称为”终端用户”。不是在说terminal，不是在说shell，不是在说命令行，不是在说黑色的框框。