从输入URL到页面加载完成的流程

从浏览器输入URL到页面加载完成都发生了什么?这是一个很经典的面试题,可以了解到一个web前端工程师的基本知识掌握情况。作为一个姿势很深的前端,面试时问过很多人,也被很多人问过。现整理一下。

把大象关进冰箱分以下几步:

1、DNS解析(你说什么?听不懂啊,翻译一下!)

2、TCP链接(3次握手确认,安检下吧。)

3、客户端发送HTTP请求(整理篇结构清晰的文章,请求行、请求报头、请求正文)

4、服务端接受请求并返回响应报文(hi,小客,给你的回信,状态码,响应报头、响应报文)

5、浏览器解析、渲染页面(DOM树解析(html)、CSSOM树解析、生成Render渲染树、Layout布局、绘制)

6、结束连接

发现在把大象关进冰箱的第5步的时候,很耗时间啊,优化下,盘它:

1、DOM(html)优化(静态资源使用CDN缓存;减少dom层级,不要嵌套太深;图片压缩、合并。)

2、CSS优化(多提炼公共样式;选择器规范命名;尽量避免行内样式;)

3、JS优化(JS文件放在页面底部加载;合并JS文件减少http请求;延迟加载defer;异步加载async;动态创建script标签加载;)

猜你喜欢

转载自www.cnblogs.com/front-boy/p/12761913.html