关注互联网应用及运维技术的个人博客

优化网站性能的简单技巧

提高网站性能:

减少传输数据【这样会减少站点在设备上加载的时间】

1、压缩网站资源【css、JavaScript和HTML】,优化网站图像,压缩服务器文本资源

缩小或者压缩,就是删除文本中的空白和非必要字符串【可读性很差,但是在服务器上就不需要考虑代码的可读性了】

安装文本压缩包:npm install -g minifier html-minify

压缩css:minify -o styles.min.css styles.css

压缩JavaScript,方法一样

在服务器安装compression模块

网站评估工具:
1、Google PageSpeed Insights

2、使用Google Analytics进行批量报告

网页渲染流程:解析HTML创建DOM、解析css创建cssOM、布局元素、绘制页面

1、服务器在下载HTML的时候,浏览器会对HTML进行解析构建成DOM【文档对象模型,也就是HTML文档结构的表示】;

2、DOM构建完成以后,浏览器解析css并创建CSSOM【css对象模型】,表示css规则将应用于文档的方式;

3、DOM和CSSOM组合创建渲染树,渲染树执行元素布局,过程中应用到CSS规则,创建UI;

4、绘制页面,页面的外观将使用css和页面的媒体内容。绘制完成之后,输出转化为像素呈现在屏幕上。

谷歌浏览器调试工具的Performance,不同颜色表示不同的事件:

❏ 加载中(蓝色)—网络相关事件,如HTTP请求。它还包括诸如HTML解析、CSS解析、图像解码等活动。

❏ 执行脚本(黄色)—与JavaScript相关的事件,包括特定于DOM的活动、垃圾收集、特定于网站的JavaScript、其他活动,等等。

❏ 渲染(紫色)—与页面渲染相关的所有事件,包括将CSS应用于网页HTML等活动,以及会导致重新渲染的活动,例如由JavaScript触发的对页面HTML的更改。

❏ 绘制(绿色)—与将布局绘制到屏幕上相关的事件,例如层合成和光栅化。

性能优化的目标就是最小化浏览器加载和页面渲染的时间,这个过程最大的阻碍就是jank【页面交互和动画效果卡顿】

JavaScript断点代码执行时间:time、timeEnd

console.time();

console.timeEnd();

赞(0)
未经允许不得转载:飞天狒狒 » 优化网站性能的简单技巧

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址