页面优化技巧,让你的信息轻松上“热搜”

1、首先说说浏览器的加载流程:

(1) 用户在地址栏中打开一个URL,浏览器首先会寻找该URL所在服务器,通过DNS服务器查询浏览器会获

得该URL所在网站的IP地址,然后向该地址发起请求,连接到服务器;

(2) 建立连接后,向服务器发送http请求,请求对应的HTML文档;

(3) 解析HTML文档,目的是知道该页面需要哪些资源以及生成DOM树;生成DOM树和获取到相应需要的资源文件同时进行;解析HTML文档时,一旦发现一个标签,就会根据标签的要求分配对指定的资源进行下载,当DOM树生成后,DOMContentLoaded事件被触发;理论上浏览器并行下载页面所需要的资源会带来更好的性能体验!

(4) Onload事件,当解析完成后,生成了DOM树,所有页面需要的资源文件都已经成功下载和执行后,

浏览器会发出Onload事件并回调HTML文档中的onload函数。

2、对于优化页面速度的必要性:

页面的打开速度对于网站的优化有极大的意义,如果打开一个页面长时间处于白屏状态,如果超过5s,暴脾气的我是会直接关闭这个网页;或者是页面加载出来了,但是比较慢,页面显示不完整,标签一直在转圈,页面处于不可交互状态,这也是一种很不好的体验;一个页面的打开速度快不快,可以用两个指标来描述,一个是ready时间,一个是load时间,chrome控制台可以看到;

  一共是加载了19.2KB,ready时间是133ms,load时间是147ms;

       3、分点介绍优化策略:

      (1) 避免head标签js堵塞:所有放在head标签里面的js和css都会堵塞渲染;如果这些css和js需要加载很久的话,那么页面就空白了;

皮蛋哥是一个优秀的站长,精品资源尽在皮蛋哥!
皮蛋哥 » 页面优化技巧,让你的信息轻松上“热搜”

发表评论

提供最优质的资源集合

立即查看 了解详情