Angular effects: combine multiple signals update into one effect vs dedicate an effect for reach signal

Question

I would like to use the effect function to update attributes based on signals but I have too many of them.

I know that the effect will be triggered if a signal is changed, but I am wondering if it would be more performant to dedicate an effect for each signal would be more performant.

Can someone elaborate how it works behind the scene?

Example 1: Combine all signals updates into one effect, which means if any signal is updated it will reset all attributes

effect(() => {
  this.nativeElement.setAttribute('verticalUsed', `${ scrollbarService.verticalUsed() }`);
  this.nativeElement.setAttribute('horizontalUsed', `${ scrollbarService.horizontalUsed() }`);
  this.nativeElement.setAttribute('isVerticallyScrollable', `${ scrollbarService.isVerticallyScrollable() }`);
  this.nativeElement.setAttribute('isHorizontallyScrollable', `${ scrollbarService.isHorizontallyScrollable() }`);
});

Example 2: Dedicate an effect for each signal update

effect(() => {
  this.nativeElement.setAttribute('verticalUsed', `${ scrollbarService.verticalUsed() }`);
});
    
effect(() => {
  this.nativeElement.setAttribute('horizontalUsed', `${ scrollbarService.horizontalUsed() }`);
});
    
effect(() => {
  this.nativeElement.setAttribute('isVerticallyScrollable', `${ scrollbarService.isVerticallyScrollable() }`);
});
    
effect(() => {
  this.nativeElement.setAttribute('isHorizontallyScrollable', `${ scrollbarService.isHorizontallyScrollable() }`);
});

Assuming I have more than those 4 signals, which one of the examples is more performant and efficient?