页面呈现过程

可爱多甜

已于 2023-07-04 11:45:00 修改

阅读量230

点赞数

文章标签：网络服务器运维

于 2023-07-04 11:31:23 首次发布

本文链接：https://blog.csdn.net/weixin_48123820/article/details/131531434

版权

输入url，解析url信息—>判断强缓存还是协商缓存—>dns域名解析—>TCP三次握手建立连接—>客户端发送http请求，如果是https则涉及加解密流程—>服务器处理请求并返回http资源—>TCP四次握手断开连接—>浏览器拿到资源之后渲染页面，涉及回流和重绘，同时加载js的时候涉及js执行机制

可爱多甜

博客等级

码龄5年

86
原创

23
点赞

107
收藏

6
粉丝

关注

私信

最新评论

前端打包部署
可爱多甜: 1、初始化vue项目 2、服务器安装Ngnix 3、启动Ngnix 4、修改Ngnix配置，注意端口和root字段 5、新建网站文件夹📁 6、打包部署vue项目（ a、打包网站npm run build，生成dist文件夹； b、用命令上传至服务器 scp -r dist/ root@139.9.219.136:/home/www；详情看知乎；。 c、无需重启ngnix，直接刷新页面） 7、解决刷新路由404问题 a、我们vue项目采用了history的路由方式，至于原因主要是vue是单页面应用 b、解决问题的办法：（1）将路由模式改为hash （2）修改nginx配置： c、重启ngnix
npm ERR! Refusing to install package with name “webpack“ under a package
CSDN-Ada助手: 恭喜您又写了一篇博客！对于您遇到的问题，我深感抱歉。或许您可以考虑探索一下其他的打包工具，比如Parcel或者Rollup，同时也可以深入学习npm的使用方法，以便更好地解决类似的问题。期待您的下一篇博客，加油！ CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3，我们会奖励持续创作和学习的博主，请看：https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply3
npm ERR! Refusing to install package with name “webpack“ under a package
CSDN-Ada助手: 恭喜您写了第三篇博客！阅读您的文章后，我了解到您遇到了一个常见的问题。在下一篇博客中，您可以分享如何解决这个问题，并深入探讨npm包管理器的使用技巧。期待您的下一篇文章！ CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3，我们会奖励持续创作和学习的博主，请看：https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply3
笔记｜快捷键
CSDN-Ada助手: 非常感谢您的博客分享！快捷键的使用确实可以提高工作效率，希望您能继续分享更多的实用技巧。除了HTML骨架生成的快捷键外，也可以学习其他的编辑器快捷键，比如代码折叠、搜索替换等。此外，了解一些常用的代码编辑器插件也可以提高工作效率，比如Emmet插件可以快速生成HTML和CSS代码。期待您的下一篇博客！如何写出更高质量的博客，请看该博主的分享：https://blog.csdn.net/lmy_520/article/details/128686434?utm_source=csdn_ai_ada_blog_reply2
package.json的scripts节点下的脚本可以用npm run执行
CSDN-Ada助手: 恭喜用户写出了这篇关于package.json的scripts节点的博客，这篇文章很详细地介绍了如何使用npm run执行脚本，对于初学者来说非常有用。希望用户能够继续保持创作的热情，写出更多高质量的技术文章。下一步的创作建议可以从实际项目出发，结合个人经验，分享一些实用的技巧和心得，让读者在实际项目中受益。 CSDN 会根据你创作的前四篇博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply4 看奖励名单。