wordpress自适应建站,天津网站建设方案优化,开发高端网站建设,html最简单的代码仓库地址#xff1a;bj-front: 前端性能与工程化 - Gitee.com
图像通常是网站负载的最大组成部分。互联网中的图像除了提供视觉体验#xff0c;还需提供设备需要的合适的图像#xff0c;选择合适的图像的格式#xff0c;并针对图片做适当的优化#xff0c;有利于提升页面…仓库地址bj-front: 前端性能与工程化 - Gitee.com
图像通常是网站负载的最大组成部分。互联网中的图像除了提供视觉体验还需提供设备需要的合适的图像选择合适的图像的格式并针对图片做适当的优化有利于提升页面的性能。 创建文件夹four该章节实验放置到four中
1在four中创建文件夹changeimg在该文件夹中初始化项目将提供的图片素材复制到该文件夹下安装npm i -g cwebp-cli然后在当前目录下执行cwebp命令观察执行后当前目录文件格式变化。并新建一个网页页面中插入图片使用Lighthouse检验页面中使用jpeg图片与webp图片时优化建议的变化。
2在four中创建文件夹changesize在该文件夹中初始化项目将提供的图片素材复制到该文件夹下安装 ImageMagic 工具sudo yum install -y ImageMagick 调整图片 flower_logo.png 的尺寸convert flower_logo.png -resize 50x50 flower_logo_50x50.png将页面中图片替换为生成的图片使用Lighthouse检验优化建议的变化。
3在four中创建文件夹setresponsive在页面结构中使用媒体查询以及img srcset来实现响应式图片用 Lighthouse 对网站 wd07 做桌面性能评测查看优化前后优化建议的变化。
4使用提供素材页面layload.html页面体验懒加载过程给除了首屏以外的图片添加loadinglazy在页面下拉过程中观察页面请求变化过程。
5现有给定文件素材将img/icon-images的图标图片生成为sprite图需要安装模块svg-sprite然后执行对应指令svg-sprite --css --css-render-css --css-example --destout2 img/icon-images/*.svg观察生成的文件目录并正确使用。
6阅读懒加载案例代码搞清楚懒加载的实现机制与实现过程。
