جدید در کروم 66

پیت لی پیج

و خیلی چیزهای دیگر وجود دارد!

من پیت لی پیج هستم. بیایید وارد آن شویم و ببینیم چه چیز جدیدی برای توسعه دهندگان در Chrome 66 وجود دارد!

لیست کامل تغییرات را می خواهید؟ فهرست تغییرات مخزن منبع Chromium را بررسی کنید.

مدل شی تایپ شده CSS

اگر تا به حال یک ویژگی CSS را از طریق جاوا اسکریپت به روز کرده اید، از مدل شی CSS استفاده کرده اید. اما همه چیز را به عنوان یک رشته برمی گرداند.

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

برای متحرک سازی خاصیت opacity ، باید رشته را به یک عدد بفرستم، سپس مقدار را افزایش داده و تغییرات خود را اعمال کنم. دقیقا ایده آل نیست

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

با مدل جدید شیء تایپ شده CSS، مقادیر CSS به عنوان اشیاء جاوا اسکریپت تایپ شده در معرض دید قرار می گیرند، بسیاری از دستکاری های نوع را حذف می کنند، و روش معقول تری برای کار با CSS ارائه می دهند.

به جای استفاده از element.style ، از طریق ویژگی .attributeStyleMap یا .styleMap به استایل ها دسترسی دارید. آنها یک شی شبیه به نقشه را برمی گردانند که خواندن یا به روز رسانی آن را آسان می کند.

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

در مقایسه با مدل قدیمی شیء CSS، بنچمارک های اولیه حدود 30 درصد بهبود در عملیات در ثانیه را نشان می دهند - چیزی که به ویژه برای انیمیشن های جاوا اسکریپت مهم است.

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

همچنین به حذف اشکالات ناشی از فراموشی ارسال مقدار از رشته به عدد کمک می کند و به طور خودکار گرد کردن و بستن مقادیر را کنترل می کند. به‌علاوه، روش‌های کاملاً تازه‌ای برای مقابله با تبدیل واحد، حساب و برابری وجود دارد.

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

اریک یک پست عالی با چندین دمو و مثال در توضیح دهنده خود دارد.

Async Clipboard API

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

کپی و جای‌گذاری همزمان با استفاده از document.execCommand می‌تواند برای تکه‌های کوچک متن خوب باشد، اما برای هر چیز دیگری، احتمال زیادی وجود دارد که طبیعت همزمان آن صفحه را مسدود کند و تجربه‌ای ضعیف برای کاربر ایجاد کند. و مدل مجوز بین مرورگرها ناسازگار است.

API جدید Async Clipboard جایگزینی است که به صورت ناهمزمان کار می کند و با مجوز API یکپارچه می شود تا تجربه بهتری را برای کاربران فراهم کند.

با فراخوانی writeText() می توان متن را در کلیپ بورد کپی کرد.

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

از آنجایی که این API ناهمزمان است، تابع writeText() یک Promise برمی‌گرداند که بسته به اینکه متنی که ارسال کردیم با موفقیت کپی شده باشد، حل می‌شود یا رد می‌شود.

به طور مشابه، متن را می توان با فراخوانی getText() از کلیپ بورد خواند و منتظر ماند تا Promise برگشتی با متن حل شود.

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

پست و دموهای جیسون را در توضیح دهنده بررسی کنید. او همچنین نمونه هایی دارد که از توابع async استفاده می کنند.

Canvas Context BitmapRenderer جدید

عنصر canvas به شما امکان می دهد گرافیک ها را در سطح پیکسل دستکاری کنید، می توانید نمودارها را بکشید، عکس ها را دستکاری کنید یا حتی پردازش ویدیو را در زمان واقعی انجام دهید. اما، مگر اینکه با یک canvas خالی شروع کنید، به راهی برای ارائه یک تصویر روی canvas نیاز دارید.

از لحاظ تاریخی، این به معنای ایجاد یک تگ image ، سپس رندر کردن محتوای آن بر روی canvas است. متأسفانه این بدان معناست که مرورگر باید چندین نسخه از تصویر را در حافظه ذخیره کند.

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

با شروع در Chrome 66، یک زمینه رندر ناهمزمان جدید وجود دارد که نمایش اشیاء ImageBitmap را ساده می کند. آنها اکنون با کار ناهمزمان و اجتناب از تکرار حافظه، کارآمدتر و با جک کمتری رندر می شوند.

برای استفاده از آن:

  1. برای ایجاد تصویر، createImageBitmap فراخوانی کنید و یک حباب تصویر به آن بدهید.
  2. متن bitmaprenderer را از canvas بگیرید.
  3. سپس تصویر را به داخل منتقل کنید.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

تمام شد، من تصویر را رندر کردم!

AudioWorklet

ورکلت ها وارد شده اند! PaintWorklet در Chrome 65 ارسال شد، و اکنون AudioWorklet را به طور پیش‌فرض در Chrome 66 فعال می‌کنیم. این نوع جدید Worklet را می‌توان برای پردازش صدا در رشته صوتی اختصاصی، جایگزین ScriptProcessorNode قدیمی که در رشته اصلی اجرا می‌شد، استفاده کرد. هر AudioWorklet در محدوده جهانی خود اجرا می شود و تاخیر را کاهش می دهد و ثبات توان عملیاتی را افزایش می دهد.

چند نمونه جالب از AudioWorklet در آزمایشگاه‌های Google Chrome وجود دارد.

و بیشتر!

اینها تنها تعدادی از تغییرات کروم 66 برای توسعه دهندگان است، البته موارد بسیار بیشتری نیز وجود دارد.

  • TextArea و Select اکنون از ویژگی autocomplete پشتیبانی می کنند.
  • تنظیم autocapitalize روی یک عنصر form برای هر فیلد فرم فرزند اعمال می شود و سازگاری با پیاده سازی autocapitalize در Safari را بهبود می بخشد.
  • trimStart() و trimEnd() اکنون به عنوان روشی مبتنی بر استاندارد برای برش فضای سفید از رشته ها در دسترس هستند.

حتماً New in Chrome DevTools را بررسی کنید تا بدانید چه چیزهای جدیدی در DevTools در Chrome 66 وجود دارد. و اگر به برنامه‌های وب پیشرفته علاقه دارید، سری ویدیوهای جدید PWA Roadshow را بررسی کنید. سپس، روی دکمه اشتراک در کانال YouTube ما کلیک کنید، و هر زمان که یک ویدیوی جدید را راه اندازی کنیم، یک اعلان ایمیل دریافت خواهید کرد.

من Pete LePage هستم، و به محض اینکه Chrome 67 منتشر شد، اینجا خواهم بود تا به شما بگویم -- چه چیزهای جدیدی در Chrome وجود دارد!