web性能优化-代码层面

96 阅读1分钟

来源\参考链接:

(一)函数优化

  • 懒解析vs饥饿解析
  • 利用optimizejs 进行优化

image.png

image.png

(二)对象优化

  • 初始化对象 image.png
  • 实例化后避免添加属性 image.png
  • Array代替array-like对象,V8引擎本身有很多对数组的优化 image.png
  • 避免数组长度越界
  • 避免元素类型的转换 image.png

(三)其他小点的优化

  • 注意作用域
  • 优化for循环
  • 最小语句数
  • 优化dom交互

(四)关于html的优化

  • 减少iframe的使用
  • 去掉空白符、删除注释、删除元素默认属性
    可以配合用webpack插件
  • 避免dom元素的深层嵌套
    dom嵌套越多,性能消耗越大 image.png
  • Css和js尽量外链
    css放头部,js放尾部

(五)关于css对性能的优化

  • 少用层级嵌套的选择器(不过对性能消耗影响不会很大)
  • 降低css对渲染的阻塞
    • 能提前加载,尽量提前加载
    • 用不上的就不写
  • 使用GPU进行完成动画
  • 使用contain属性 image.png

image.png