探索从代码到页面的全过程

主要观点总结

本文介绍了网页从开发到发布的整个过程，包括网页入口、开发、部署与发布等方面的内容。

关键观点总结

关键观点1: 网页入口

用户访问任意网站之前，要先在地址栏输入有效地址，浏览器会向服务器发起请求，拿到该地址对应的网页入口文件即HTML文件。浏览器解析HTML代码，识别到其他资源发起更多请求，逐渐构建成用户眼前看到的完整页面。

关键观点2: 开发阶段

现代化网页开发过程包括代码编写、工程能力、模块化等内容。前端三剑客HTML、CSS、JS代码都变得庞大，使用各种UI框架、CSS预处理器等进行组件式开发。利用前端构建工具组织各种类型的文件，提供模块化、自动化、优化、转义等构建能力，进行本地开发与生产打包。

关键观点3: 代码部署

得到网页入口所需所有资源（HTML及相应的CSS、JS、其他静态资源）后，可以通过上传至服务器或CDN，让用户可以访问到页面。其中包括在开发阶段访问网页的方式和通过CI/CD平台自动化发布流程。

关键观点4: 发布对外

对于迭代更新的页面，需要考虑安全发布与用户体验。包括静态资源的缓存优化、迭代更新、动静分离以及非覆盖式发布等问题。静态资源优化包括配置超长缓存过期时间、采用内容摘要或带版本号的文件路径作为缓存更新依据、静态资源CDN部署等。

文章预览

“用户在浏览器地址输入 URL 之后发生了什么？” 这个问题对于我们前端开发者来说简直是典中典了，是前端基础，也是工作面试八股，更是性能优化依据。但本文想分享的重点不是之后发生了什么，而是之前发生了什么，即我们平时码出来的代码经历了哪些步骤处理，成为互联网用户能打开浏览的页面的？我们又是如何合理的更新网页的？ 前一个问题涉及开发与部署，后一个问题涉及发布。下面我将会从网页入口、开发、部署与发布这4方面逐步展开分享。 网页入口 这一章还是简单对用户看到的网页由什么构成，浏览器又做了哪些工作才让这些构成部分呈现在用户面前的网页进行简单介绍。 一个内容丰富、设计美观、交互友好的网页离不开前端三剑客 HTML、CSS、JS 以及图片、字体等资源文件： HTML 决定网页内容，是用户访问任意一个网站的入口 ………………………………