调研报告之前端性能优化

标签：无分类：未分类创建时间：2022-09-09 10:21:22 更新时间：2025-01-17 10:39:24

这篇文章其实涉及到的内容很多，比如代码层面，技术层面，可能还有前后端数据传递的问题，我觉得作为一个前端开发着，无论用不用的到，都应该了解这些东西，毕竟更快更高更强，是前端的使命。前端性能优化的角度有很多，比如代码层面，我在开发webgis应用的时候，常听人说起的一起大量矢量数据的渲染方法，都可以作为分类的方向。

参考文章:
1.Cesium | 海量点的加载与性能优化
2.16 毫秒的挑战：图表库渲染优化降采样、减少 Canvas 状态切换、合并、一维数组和 TypedArray、GC 减少、并发、渐进渲染、分片
3.canvas性能优化总结尽可能少调用api、尽量少改变CANVAS状态机、分层canvas、设置不同的渲染帧率、离屏canvas、裁剪、局部重绘、清除画布内容（不建议参考）、避免使用阴影、坐标值尽量使用整数、避免大量计算造成阻塞

javascript性能优化

参考文章:
1.JavaScript性能优化小窍门汇总（含实例） 1.不使用with语句;2.对象属性和数组元素的速度都比变量慢;3.避免全局查找;4.数字转换成字符串;5.通过模板元素clone，替代createElement；6.避免低效率的脚本位置，脚本放到body的底部；7.小心使用闭包；8.在循环时将控制条件和控制变量合并起来；9.使用 XMLHttpRequest(XHR)对象；10.注意NodeList；11.避免与null进行比较；12.尊重对象的所有权；13.循环引用，这个很容易出错；14.通过javascript创建的dom对象，必须append到页面中；15.字符串连接；16.各种类型转换；17.多个类型声明；18.插入迭代器；19.使用直接量；20.避免双重解释；21.缩短否定检测；22.释放javascript对象；

2.canvas性能优化

参考文章:
1.【Canvas】232-Canvas 最佳实践（性能篇）

高德地图海量点加载

参考文章:
1.海量点标记这里使用的是海量标注 LabelMarker 进行图层的标注显示
2.高德地图「海量点标记 + 海量标注」卡顿问题解决方案 1、针对首屏加载速度的优化;2、针对海量标注的分片加载优化;3、针对海量标注图层堆积问题的优化;4、针对屏内标注 DOM 元素过多的优化;5、针对高亮标注数据处理延迟的优化;
3.2018-10-29 解决高德地图海量点卡顿的问题

3.优化方向

这个我在公瑾那里得到了一个图片，我觉得可以作为优化的方向，IO瓶颈、内存瓶颈、CPU瓶颈、业务数据隔离、网络传输瓶颈、渲染瓶颈，这几个方向进行性能的优化考虑方向。

往期推荐

文章目录

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。