爬不动的猫的博客

本文详细介绍了浏览器访问网页的全过程：从输入URL开始，依次经历DNS解析、TCP三次握手建立连接、HTTP请求响应、TCP四次挥手断开连接，最后到浏览器渲染页面。其中重点解析了TCP三次握手和四次挥手的细节，以及浏览器渲染时构建DOM树、CSS规则树和Render树的过程。文章还深入分析了回流和重绘机制，并提供了减少回流重绘的优化建议，包括合并CSS修改、避免循环读取DOM属性、使用定位布局等。最后从HTML加载、CSS编写和JS标签使用三个方面给出了网页性能优化的具体方法。

例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie 后就会显得很人性化了，系统能 够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。（key：本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）例如将用户 id 存储于一个 cookie 内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。

React的setState触发状态更新流程：首先将新状态加入更新队列，启动Fiber算法的调和过程异步构建新元素树。通过diff算法对比新旧树差异，为节点打上更新标记。调度器按优先级执行doWork处理更新，最后在commit阶段批量更新DOM。整个过程实现了高效的按需渲染，而非全量重绘。

前端项目的package.json 文件中，devDependencies和dependencies对象都用于指定项目所依赖的软件包，但它们在项目的开发和生产环境中的使用有所不同。

Vite和Webpack是两种主流前端打包工具，主要区别在于：Vite开发环境下采用原生ES模块加载，构建速度更快且配置简单，适合快速开发；Webpack配置复杂但功能全面，生态系统成熟，更适合生产环境的复杂应用打包。Vite目前生态仍在发展，而Webpack拥有丰富的插件支持。项目选择需根据具体需求，Vite侧重开发效率，Webpack强调功能完备性。