读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. html/css
  3. 正文

web性能优化笔记

2020年8月31日 209点热度 0人点赞 0条评论

web性能优化笔记插图

提高网站性能:

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

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();

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: CSS
最后更新:2020年9月23日

读心悦

韦永愿的个人博客

打赏 点赞
< 上一篇
下一篇 >

文章评论

您需要 登录 之后才可以评论

读心悦

韦永愿的个人博客

标签聚合
mysql git redux react canvas JavaScript flutter 悦读 vue 闲谈 阅读 Nginx Echarts 随笔 hook node CSS 小程序 taro
分类
  • flutter (11)
  • html/css (23)
  • Javascript (32)
  • Mysql (2)
  • node (2)
  • React (29)
  • vue (1)
  • 小程序 (43)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (12)
最新 热点 随机
最新 热点 随机
JavaScript的深浅拷贝【笔记】 最近的一些心里事儿 JavaScript的Object数据类型转换 JavaScript中 + 隐式类型转换 JavaScript的== 的隐式类型转换 JavaScript数据强制类型转换
微信小程序设置体验版本和线上版本的访问地址JavaScript颜色的工具函数redux简单的笔记JavaScript的数据类型如果有来生JavaScript数据强制类型转换
flutter时间戳转换【源码】 redux简单的笔记 webapp移动端适配配置【rem】 js获取某一天的日期 JavaScript身份证校验源码 ubuntu 服务器命令草稿

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号