【学习打卡】第十一天 前端工程师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分钟，今天又有点懒惰了，明天加油，希望学习效率能再提高点，早点结束，早点找工作