【学习打卡】第十一天 前端工程师2022版 移动Web开发性能优化
2022/8/14 4:22:58
本文主要是介绍【学习打卡】第十一天 前端工程师2022版 移动Web开发性能优化,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
课程名称: 前端工程师2022版
课程章节:移动web开发性能优化
主讲老师:Alex
课程内容:
今天学习的内容包括:
一、移动Web开发性能优化
1、页面的响应速度
1.1、打开页面到实际能够正常使用的时间
①网络请求时间;
②页面加载和渲染的时间。
1.2、与页面进行交互的流畅程度
即JavaScript脚本的执行速度。
需要更快的加载页面首屏内容,其他的可以慢慢加载。
和PC端相比,移动端网络慢、设备性能差,更需要性能优化。
二、网络请求过程中性能优化
2-1 网络请求过程中的优化点
2、 将多个资源分布在不同域上,减少请求队列的等待时间
①浏览器为每个域名分配的并发通道有限,大概6个左右
②多个域意味着更多的DNS查询时间,通常把域名拆分到3~5个比较合适
3、通过dns-prefetch减少DNS查询时间
①尝试在请求资源之前解析域名
②仅对跨域域上的DNS查找有效
③已经解析过的域名不要再添加dns-prefetch
4、减少HTTP请求数量
①资源的合并 (合并css、JS文件)合并后资源不能过大;考虑缓存的问题
②内联首屏相关代码首屏css\js代码直接内联方式引入,非link
③使用缓存(浏览器缓存、localStorage等)
5、减少请求资源的大小
①资源的压缩(HTML、CSS的压缩以及JS的压缩和混淆)
②开启Gzip压缩(服务器端)
③减少cookie的体积
2-2页面加载渲染和Javascript脚本中的优化点
页面加载和渲染过程中的优化点
1、css一般在head中引入;js一搬在body末尾引入(因为js一般是功能代码不影响显示,放在head里影响加载速度;js布局代码,可以先加载的,可以放在head里)
2、减少回流/重布局(Reflow/Relayout)与重绘(Repaint)
①元素的尺寸、位置、隐藏等属性改变时,浏览器需要重新计算,就称为回流
②元素的 外观、风格等属性改变时,浏览器只需要重新绘制,就称为重绘
③回流一定会引起重绘,重绘不一定会引起回流
3、DOM操作优化
4、事件优化
5、图片懒加载和预加载
课程收获:
学习了移动web开发的性能优化
今天学习课程共用了2小时20分钟,复习昨天知识点10分钟
今日共计学习2小时40分钟,今天又有点懒惰了,明天加油,希望学习效率能再提高点,早点结束,早点找工作
这篇关于【学习打卡】第十一天 前端工程师2022版 移动Web开发性能优化的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)
- 2024-01-12程序员提效 x10 的必备开源“神器”
- 2024-01-11前端可以监控静态资源的时间吗-icode9专业技术文章分享
- 2024-01-11前端系列:ES6-ES12新语法
- 2024-01-03前端 Git 使用约定