页面渲染流程和优化

2019-03-05  本文已影响0人  崽崽不哭

1 用户第一次访问网址,浏览器向服务器发出请求,服务器返回html文件

(DNS解析域名找到真正的ip地址,然后经过三次握手才能和服务器建立联系获取数据)

2 .浏览器开始载入html代码,发现head标签内有一个link标签引用外部css或者js文件。注意这里的icon,地址是一张图片,以及main.json是没有发现在请求列表的,可能之前就有了缓存

3 .浏览器又发出css以及js文件请求,服务器返回这个css,js文件

4 .浏览器继续载入html中body部分的代码,并且css,js文件已经拿到手了,可以开始渲染页面了

5 .浏览器在代码中发现一个img标签引用了一张图片,向服务器发出请求,此时浏览器不会等图片下载完,而是继续渲染后面的代码

6 .服务器返回图片文件,由于图片占用了一定面积,影响了页面布局,因此浏览器需要回过头来重新渲染这部分代码。

7 .浏览器发现了一个包含一行js代码的script标签,赶快执行他。

8 .js脚 影藏掉代码中的某个div,此时浏览器不得不重新渲染这部分代码

9 .直到发现闭合的html标签

读完了改成自己的话,可以漏掉一两天

1 优化    核心思想  减少重绘和重排(回流)   减少http请求

    1 把css放到头部,js放到底部

    2 js标签适当加上async属性、defer

    3 图片尽量使用懒加载或者精灵图

  4 js代码中尽量减少对dom的操作

 5 使用缓存

上一篇下一篇

猜你喜欢

热点阅读