HTML5教程

【学习打卡】第十一天 前端工程师2022版 移动Web开发性能优化

本文主要是介绍【学习打卡】第十一天 前端工程师2022版 移动Web开发性能优化,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

课程名称: 前端工程师2022版

课程章节:移动web开发性能优化

主讲老师:Alex

课程内容:

今天学习的内容包括:


一、移动Web开发性能优化

1、页面的响应速度

1.1、打开页面到实际能够正常使用的时间

①网络请求时间;

②页面加载和渲染的时间。

1.2、与页面进行交互的流畅程度

即JavaScript脚本的执行速度。

需要更快的加载页面首屏内容,其他的可以慢慢加载。

和PC端相比,移动端网络慢、设备性能差,更需要性能优化。


二、网络请求过程中性能优化


2-1 网络请求过程中的优化点

https://img3.sycdn.imooc.com/62f672f00001d92513550724.jpg

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脚本中的优化点

页面加载和渲染过程中的优化点

https://img1.sycdn.imooc.com/62f6734000012ca611210646.jpg

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开发性能优化的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!