提高网站性能:
减少传输数据【这样会减少站点在设备上加载的时间】
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();
文章评论