面向前端程序员学习的html前端页面优化方法

发布时间:2019-11-21 10:41:50

一、首先,我们来谈谈浏览器的加载过程:

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

获取URL所在网站的IP地址,然后向该地址发送连接服务器的请求;

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

(3)解析HTML文档的目的是知道页面需要什么资源并生成DOM树;生成DOM树并得到相应的需要

在解析html文档时,一旦找到标记,就会根据标记的要求分配和下载指定的资源。生成dom树时,将触发domcontentload事件。

理论上,浏览器并行下载页面所需的资源将带来更好的性能体验!

(4)分析onload事件后,生成dom树,所有页面所需的资源文件均已成功下载执行。

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

二、优化页面速度的必要性:

网页的开放速度对网站的优化具有重要意义。如果一个页面在白屏状态下长时间打开,如果超过5秒,就会生气。

我会直接关闭这个页面;或者页面加载,但是速度慢,页面显示不完整,标签一直在旋转,页面处于非交互状态,这也是一个非常糟糕的体验;

页面的打开速度是否快,可以用两个指标来描述:一个是准备时间,另一个是加载时间,可以通过Chrome控制台看到;

三、分以下几点介绍优化策略:

(1)避免阻塞头部标签js:

所有放在head tag中的js和css都会阻塞渲染;如果这些css和js需要长时间加载,页面将是空白的;

用google的cdn加载jquery文件是不可能的,因此标记一直在旋转,页面没有显示。

有两种解决方案。***种是把脚本放在身体后面,这也是很多网站采用的方法。第二个是将defer或async属性添加到脚本中。一旦脚本被defer或async延迟,脚本将被异步加载,但不会立即执行。它将在readystatechange变为交互式后按顺序执行。