Chrome 66'daki yenilikler

Pete LePage

Üstelik çok daha fazlası da var!

Ben Pete LePage. Şimdi Chrome 66'daki geliştiricilere yönelik yenilikleri görelim!

Değişikliklerin tam listesini görmek ister misiniz? Chromium kaynak deposu değişiklik listesine göz atın.

CSS Türünde Nesne Modeli

Daha önce bir CSS özelliğini JavaScript aracılığıyla güncellediyseniz CSS nesne modelini kullanmışsınızdır. Ancak her şeyi bir dize olarak döndürür.

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

opacity özelliğini canlandırmak için dizeyi bir sayıya dönüştürmem, ardından değeri artırıp değişikliklerimi uygulamam gerekir. İdeal değildir.

function step(timestamp) {
  const currentOpacity = parseFloat(el.style.opacity);
  const newOpacity = currentOpacity + 0.01;
  element.style.opacity = newOpacity;
  if (newOpacity <= 1) {
    window.requestAnimationFrame(step);
  }
}

Yeni CSS Türü Nesne Modeli sayesinde CSS değerleri, yazılan JavaScript nesneleri olarak gösterilir. Böylece, tür manipülasyonunun büyük bir kısmı ortadan kalkar ve CSS ile daha mantıklı bir şekilde çalışılması sağlanır.

element.style kullanmak yerine stillere .attributeStyleMap özelliği veya .styleMap üzerinden erişirsiniz. Bunlar, okunmasını veya güncellenmesini kolaylaştıran harita benzeri bir nesne döndürür.

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!

Eski CSS Nesne Modeli ile karşılaştırıldığında, ilk karşılaştırmalar saniye başına işlem sayısında yaklaşık %30'luk bir artış olduğunu gösteriyor. Bu durum, özellikle JavaScript animasyonları için büyük önem taşıyor.

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

Ayrıca, bir dizedeki değeri sayıya dönüştürmeyi unutmanın neden olduğu hataların ortadan kaldırılmasına yardımcı olur ve değerlerin yuvarlanması ve sınırlanması otomatik olarak halledilir. Ayrıca, birim dönüştürme, aritmetik ve eşitlik ile başa çıkmak için oldukça yeni ve kullanışlı yöntemler var.

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

Eric'in açıklayıcı bölümünde birkaç demo ve örnek içeren harika bir gönderi var.

Async Clipboard API

const successful = document.execCommand('copy');

document.execCommand kullanarak eşzamanlı kopyalama ve yapıştırma işlemleri, küçük metin parçaları için uygun olabilir ancak başka her şeyde eşzamanlı yapısının sayfayı engelleyerek kullanıcı için kötü bir deneyime neden olma ihtimali yüksektir. Ayrıca, tarayıcılar arasındaki izin modeli tutarsızdır.

Yeni Async Clipboard API, eşzamansız olarak çalışan ve kullanıcılara daha iyi bir deneyim sunmak için izin API'siyle entegre olan bir alternatiftir.

writeText() araması yapılarak metin panoya kopyalanabilir.

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

Bu API eşzamansız olduğundan writeText() işlevi, ilettiğimiz metnin başarıyla kopyalanıp kopyalanmadığına bağlı olarak çözümlenecek veya reddedilecek bir Promise döndürür.

Benzer şekilde, getText() çağrısı yapılıp döndürülen Promise'in metinle çözümlenmesi beklenerek panodan okunabilir.

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

Jason'ın gönderisine ve açıklamadaki demolara göz atın. Ayrıca async işlevlerinin kullanıldığı örnekleriniz var.

Yeni Tuval Bağlamı BitmapRenderer

canvas öğesi, grafikleri piksel düzeyinde değiştirmenize, grafikler çizmenize, fotoğrafları değiştirmenize ve hatta gerçek zamanlı video işleme yapmanıza olanak tanır. Ancak boş bir canvas ile başlamadığınız sürece canvas üzerinde bir resim oluşturmak için bir yönteme ihtiyacınız vardır.

Geçmişte bu, bir image etiketi oluşturup ardından içeriğini canvas'da oluşturmak anlamına geliyordu. Maalesef bu, tarayıcının resmin birden fazla kopyasını bellekte depolaması gerektiği anlamına gelir.

const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
}
img.src = 'llama.png';

Chrome 66'dan itibaren, ImageBitmap nesnelerinin görüntülenmesini kolaylaştıran yeni bir eşzamansız oluşturma bağlamı eklendi. Artık eşzamansız olarak çalışıp bellek yinelemesini önleyerek daha verimli bir şekilde ve daha az olumsuzlukla oluşturulurlar.

Bunu kullanmak için:

  1. Resmi oluşturmak için createImageBitmap numaralı telefonu arayın ve ona bir resim blob'u verin.
  2. canvas öğesinden bitmaprenderer bağlamını alın.
  3. Ardından resmi içe aktarın.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Bitti, resmi oluşturdum!

AudioWorklet

İş akışları kullanıma sunuldu! PaintWorklet, Chrome 65'te kullanıma sunulmuştur. Chrome 66'da varsayılan olarak AudioWorklet'i etkinleştiriyoruz. Bu yeni İş Akışı türü, ana iş parçacığında çalıştırılan eski ScriptProcessorNode'un yerine özel ses iş parçacığında sesi işlemek için kullanılabilir. Her AudioWorklet kendi küresel kapsamında çalışır. Böylece gecikmeyi azaltır ve işleme hızı kararlılığını artırır.

Google Chrome Labs'de bazı ilginç AudioWorklet örnekleri bulunmaktadır.

Diğer ölçütler

Bunlar, geliştiriciler için Chrome 66'da yapılan değişikliklerden sadece birkaçı, tabii ki çok daha fazlası var.

  • TextArea ve Select artık autocomplete özelliğini destekliyor.
  • Bir form öğesinde autocapitalize ayarlama, tüm alt form alanlarına uygulanır ve Safari'nin autocapitalize uygulamasıyla uyumluluğu iyileştirir.
  • Dizelerdeki boşlukları kaldırmanın standartlara dayalı bir yolu olarak artık trimStart() ve trimEnd() kullanılabilir.

Chrome 66'da Geliştirici Araçları'ndaki yenilikleri öğrenmek için Chrome Geliştirici Araçları'ndaki yenilikler sayfasına göz atmayı unutmayın. Progresif Web Uygulamaları ile ilgileniyorsanız yeni PWA Roadshow video serisine göz atın. Ardından YouTube kanalımızdaki abone ol düğmesini tıklayın. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.

Ben Pete LePage. Chrome 67 yayınlanır yayınlanmaz, size Chrome'daki yenilikleri anlatacağım.