بازده فشرده سازی سوپرشارژ با دیکشنری های مشترک

Jeremy Wagner

فشرده سازی داده ها یک تکنیک بهینه سازی عملکرد آزمایش شده با زمان است که اندازه منابع صفحه واجد شرایط را کاهش می دهد. برای مدتی، استفاده از gzip در سرورهای وب برای فشرده‌سازی منابع رایج صفحه مبتنی بر متن مانند فایل‌های HTML، CSS و جاوا اسکریپت، و ارسال آن‌ها به مشتری در جایی که می‌توان آن‌ها را از حالت فشرده خارج کرد، معمول بود. نتیجه زمان بارگذاری سریع‌تر منابع بدون تأثیر بر رفتار مورد نظر یک صفحه است.

اگرچه gzip به خودی خود بسیار مؤثر است، در سال‌های اخیر پیشرفت‌های بیشتری در فشرده‌سازی در وب صورت گرفته است. در سال 2016، الگوریتم Brotli در کروم عرضه شد و به طور کلی نسبت فشرده سازی بهتری را برای منابع واجد شرایط ارائه کرد. در پایان سال 2017، همه مرورگرهای مدرن از Brotli پشتیبانی می کردند و پشتیبانی سرور از آن شروع به گسترش بیشتر کرد. اخیراً، Chrome فشرده سازی ZStandard را ارسال کرده است .

هر چند کار به همین جا ختم نمی شود! تیم Chrome روی ایجاد فرهنگ لغت‌های مشترک قابل استفاده در وب کار می‌کند، که اکنون به صورت آزمایشی اصلی برای Brotli و ZStandard در دسترس هستند. دیکشنری های مشترک می توانند فشرده سازی Brotli و ZStandard را تکمیل کنند تا نسبت فشرده سازی بسیار بالاتری را برای وب سایت هایی که اغلب کدهای به روز شده ارسال می کنند، ارائه دهند و در برخی موارد می توانند نسبت فشرده سازی 90٪ یا بهتر را ارائه دهند. این پست به جزئیات بیشتر در مورد نحوه کار لغت نامه های مشترک می پردازد و چگونه می توانید برای آزمایش های اصلی ثبت نام کنید تا از آنها برای Brotli و ZStandard در وب سایت خود استفاده کنید.

فرهنگ لغت مشترک توضیح داده شده است

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

با این حال، دیکشنری های سفارشی سفارشی شده توسط کاربر را می توان با Brotli و ZStandard که حاوی الگوهای خاص برای منابع خاص هستند، استفاده کرد. در عمل، دیکشنری سفارشی یک فایل خارجی است که می تواند برای هر ورودی اعمال شود. دیکشنری ها می توانند بسیار مختص به کد تولید یک برنامه کاربردی یا در واقع هر محتوایی باشند. میزان کاربرد یک فرهنگ لغت در ورودی آن می تواند تأثیر زیادی بر بازده فشرده سازی کلی داشته باشد. دیکشنری هایی که بسیار شبیه محتویات یک ورودی هستند، خروجی هایی با نسبت فشرده سازی بالاتر نسبت به فرهنگ لغت هایی با محتوای عمومی یا غیر مشابه دارند.

در اینجا یک مثال از اینکه یک فرهنگ لغت فشرده سازی سفارشی می تواند موثر باشد آورده شده است: فرض کنید وب سایت شما از چارچوب Angular استفاده می کند و نسخه فعلی که استفاده می کنید نسخه 1.7.9 است. این نسخه از فریم ورک Angular حدود 172 کیلوبایت فشرده نشده است. هنگامی که با تنظیمات پیش فرض Brotli فشرده می شود، اندازه آن حدود 53 کیلو بایت می شود. این نسبت تراکم نزدیک به 70 درصد را به همراه دارد. با این حال، فرض کنید تصمیم دارید بعداً به Angular 1.8.3 ارتقا دهید. با توجه به اینکه این نسخه از Angular تقریباً به اندازه نسخه 1.7.9 است، می توانید نسبت فشرده سازی تقریباً مشابه نسخه قبلی را انتظار داشته باشید.

اینجاست که یک فرهنگ لغت سفارشی می‌تواند با استفاده از فرآیندی به نام فشرده‌سازی دلتا مفید باشد، یعنی زمانی که می‌توان از فرهنگ لغت نسخه قبلی یک منبع برای فشرده‌سازی نسخه بعدی استفاده کرد. با استفاده از مثال قبلی، اگر نسخه 1.8.3 Angular را با استفاده از نسخه 1.7.9 به عنوان دیکشنری فشرده کنید، خروجی کمی بیش از 4 کیلوبایت خواهد بود. این نشان دهنده نسبت فشرده سازی نزدیک به 98٪ است. واضح است که دیکشنری‌های فشرده‌سازی می‌توانند تأثیر زیادی بر عملکرد بارگذاری داشته باشند، و اثربخشی آنها قبلاً در برنامه‌های کاربردی دنیای واقعی مشخص شده است!

با این حال، یک چالش در ایجاد این جریان در وب وجود دارد. نکته مهم این است که، اگر از دیکشنری برای فشرده سازی یک منبع استفاده می کنید، به همان دیکشنری نیاز دارید تا آن را از حالت فشرده خارج کنید . این جریان قبلاً در وب انجام شده است - یعنی SDCH - اما اجرای ایمن آن چالش برانگیز بود. این جدیدترین پیشنهاد برای فشرده‌سازی فرهنگ لغت مشترک به این نگرانی‌ها می‌پردازد و در عین حال مزایای قابل‌توجهی برای منابع استاتیک و پویا ارائه می‌دهد.

چگونه Chrome پشتیبانی از فرهنگ لغت‌های مشترک را تبلیغ می‌کند

همه مرورگرها الگوریتم‌های فشرده‌سازی مورد پشتیبانی خود را از طریق هدر درخواست Accept-Encoding تبلیغ می‌کنند. محتوای هدر لیستی از رمزگذاری های پشتیبانی شده جدا شده با کاما است:

Accept-Encoding: gzip, br, zstd

این هدر خاص Accept-Encoding بیان می کند که مرورگر درخواست کننده منبع از الگوریتم های فشرده سازی gzip، Brotli و ZStandard پشتیبانی می کند. سپس یک وب سرور که به درخواست پاسخ می دهد می تواند تصمیم بگیرد که از کدام الگوریتم هنگام پاسخ به درخواست استفاده کند.

هنگامی که پشتیبانی از فرهنگ لغت مشترک فعال است و فرهنگ لغت مربوطه برای یک منبع در دسترس است، نشانه های اضافی به سربرگ Accept-Encoding اضافه می شود. این توکن ها br-d برای Brotli و zstd-d برای Zstandard هستند. کروم همچنین شامل هش یک فرهنگ لغت موجود است که در ادامه به آن پرداخته می شود.

Accept-Encoding: gzip, br, zstd, br-d, zstd-d
Available-Dictionary: :pZGm1Av0IEBKARczz7exkNYsZb8LzaMrV7J32a2fFG4=:

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

فشرده سازی فرهنگ لغت مشترک برای منابع استاتیک

منبع صفحه ایستا منبعی است که همیشه پاسخ یکسانی را برای URL درخواستی ایجاد می کند. نمونه های رایج منابع صفحه ایستا قابل فشرده سازی جاوا اسکریپت و فایل های CSS هستند. این منابع معمولاً به نوعی برای اهداف ذخیره‌سازی نسخه‌سازی می‌شوند—گاهی اوقات با هش کردن محتوای فایل در نام فایل (به عنوان مثال styles.abcd1234.css )، یا روش دیگری برای انگشت نگاری منبع. این نوع منابع کاندیدای عالی برای فشرده‌سازی دلتا هستند که دیکشنری‌های مشترک ارائه می‌کنند، زیرا منابع استاتیک اغلب برای مدت زمان طولانی در حافظه پنهان ذخیره می‌شوند و تمایل دارند با فرکانس‌هایی به روز شوند.

یک فرهنگ لغت را می توان برای یک منبع ثابت با تنظیم سرصفحه پاسخ Use-As-Dictionary برای آن مشخص کرد. هدر یکی از چند جفت کلید/مقدار را می گیرد، اما تنها مورد مورد نیاز match است، که دستور URLPattern را می پذیرد که مسیر منبعی را که فرهنگ لغت باید در آن استفاده شود را مشخص می کند:

Use-As-Dictionary: match="/dist/styles.*.css"

توجه: جفت‌های کلید/مقدار اختیاری دیگری وجود دارد که می‌توانید با سربرگ Use-As-Dictionary برای سفارشی کردن بیشتر نحوه استفاده از فرهنگ لغت استفاده کنید.

هدر Use-As-Dictionary را به عنوان مکانیزمی در نظر بگیرید که برای نسخه های بعدی یک منبع که با الگوی مشخص شده در آن مطابقت دارد، اعمال می شود. بنابراین، بگوییم که وب سایت شما تمام سبک های خود را در یک فایل CSS ارسال می کند. برای سادگی، فرض کنید که اولین نسخه از آن منبع در /dist/styles.v1.css قرار دارد و با یک سرصفحه پاسخ Use-As-Dictionary حاوی مقدار match /dist/styles.*.css ارسال می شود.

پس از گذشت مدتی، CSS وب سایت خود را به روز می کنید و نسخه جدیدی از آن را در /dist/styles.v2.css ارسال می کنید. از آنجایی که مقدار match استفاده شده در سرصفحه پاسخ Use-As-Dictionary از نسخه قبلی در مورد این درخواست اعمال می شود، مرورگر یک سرصفحه Available-Dictionary حاوی یک هش از فرهنگ لغت که به عنوان یک دنباله بایت فیلد ساختاریافته کدگذاری شده است، ارسال می کند:

Accept-Encoding: gzip, br, zstd, br-d, zstd-d
Available-Dictionary: :pZGm1Av0IEBKARczz7exkNYsZb8LzaMrV7J32a2fFG4=:

مهم: مرورگر تنها زمانی سرصفحه درخواست Available-Dictionary را تنظیم می کند که نسخه قبلی منبعی که می تواند به عنوان فرهنگ لغت استفاده شود در حافظه پنهان آن موجود باشد. این بدان معناست که در مثال قبلی برای CSS یک وب‌سایت، اگر کاربر در هنگام استقرار نسخه اول هرگز از سایت بازدید نکرده باشد، نسخه دوم با فرهنگ لغت فشرده نمی‌شود.

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

اگر کدهای جدید را اغلب برای وب سایت خود ارسال می کنید، فشرده سازی دلتا می تواند راه زیادی را برای شما انجام دهد. با این حال، روند انعطاف پذیر است. اگر مرورگر تشخیص ندهد که یک فرهنگ لغت در حافظه پنهان مرورگر کاربر موجود است، نشانه‌های اضافی br-d یا zstd-d را در هدر Accept-Encoding مشخص نمی‌کند . در آن صورت، جریان فشرده سازی استاندارد اعمال می شود.

مهم: از آنجایی که فشرده‌سازی مبتنی بر فرهنگ لغت مشترک نگرانی‌های امنیتی و حریم خصوصی را در اولویت قرار می‌دهد، این جریان فرض می‌کند که برای منابع یکسان اعمال خواهد شد. اگر می‌خواهید از آن برای منابع متقاطع استفاده کنید، قوانین CORS اعمال می‌شوند و آنها باید یک سرصفحه Access-Control-Allow-Origin را مشخص کنند تا لغتنامه‌ها در چنین سناریوهایی قابل استفاده باشند.

فشرده سازی فرهنگ لغت مشترک برای منابع پویا

منابع پویا همچنین می توانند از فشرده سازی فرهنگ لغت مشترک بهره مند شوند. منابع پویا منابعی هستند که بر اساس یک زمینه تغییر می کنند - برای مثال، یک وب سایت خبری که در آن صفحه اصلی به طور مکرر به عنوان اخبار به روز می شود. اسناد HTML اغلب منابع پویا هستند. در چنین مواردی، فرهنگ لغت می‌تواند شامل بیشتر ساختار HTML رایج سایت و کد الگو باشد که منجر به صفحات فشرده‌شده می‌شود که تنها بخش‌های منحصربه‌فرد هر صفحه ارسال می‌شوند.

با توجه به ماهیت منابع تولید شده به صورت پویا، یک فرهنگ لغت باید برای استفاده بعدی در مشتری بارگذاری شود. بارگذاری یک فرهنگ لغت زودتر از موعد به این معنی است که استفاده از فشرده سازی فرهنگ لغت مشترک در منابع پویا حدس و گمان است. امید در چنین مواردی این است که وب سایت شما به اندازه کافی ترافیک دریافت کند که هزینه فرهنگ لغت بتواند با تعداد زیادی پیمایش مستهلک شود. اگر تصمیم دارید آن را امتحان کنید، اولین قدم این است که مکان فرهنگ لغت را از طریق عنصر <link> در HTML صفحه خود مشخص کنید:

<link rel="dictionary" href="/dictionary.dat">

وقتی Chrome با این عنصر <link> مواجه می‌شود، ممکن است زمانی که صفحه بی‌حرکت است، فرهنگ لغت را واکشی کند، و در تلاش برای جلوگیری از کشمکش پهنای باند، در اولویت پایین قرار دارد. پاسخ برای خود فرهنگ لغت باید یک عنوان Use-As-Dictionary مشخص کند و مشخص کند که در کدام مسیر منبع پویا اعمال می شود:

Use-As-Dictionary: match="/product/*"

از اینجا، جریان تا حد زیادی مانند منابع استاتیک است. مرورگر می بیند که خود فرهنگ لغت برای منابع منطبق اعمال می شود، و مرورگر یک سرصفحه Available-Dictionary را با هش از محتوای فرهنگ لغت به درخواست ضمیمه می کند، دوباره مشابه جریان منابع ایستا که قبلا توضیح داده شد.

مهم: همانطور که در مورد جریان منابع ایستا وجود دارد، قوانین CORS یک بار دیگر اعمال می شود، اما با یک هشدار مهم: فرهنگ لغتی که تصمیم به استفاده از آن دارید بر روی یک منبع پویا اعمال می شود که ممکن است حاوی اطلاعات شخصی قابل شناسایی باشد. بسیار مهم است که هر فرهنگ لغت واجد شرایط خود حاوی چنین اطلاعاتی نباشد .

فشرده سازی منابع استاتیک در زمان ساخت

اگر با باندلرها آشنایی دارید، ممکن است با پلاگین های مختلفی برای آن ها آشنا باشید که می توانند منابع را در زمان ساخت فشرده کنند و متعاقباً آن منابع فشرده را ارائه دهند. به عنوان مثال، آپاچی به شما امکان می دهد از دستورالعمل ها برای ارائه منابع از پیش فشرده در زمان درخواست استفاده کنید .

اکثر باندلرهای مبتنی بر Node.js که از فشرده سازی پشتیبانی می کنند از کتابخانه داخلی Zlib Node استفاده می کنند. Zlib از Brotli پشتیبانی می‌کند و باندلرهایی که از آن استفاده می‌کنند معمولاً یک رابط برای انتقال مستقیم گزینه‌ها به Zlib ارائه می‌دهند که از فشرده‌سازی به کمک فرهنگ لغت پشتیبانی می‌کند . در اینجا چند باندلر وجود دارد که از دیکشنری ها پشتیبانی می کنند:

• Webpack's CompressionWebpackPlugin ، از طریق رابط compressionOptions آن .
• rollup-plugin-brotli پیکربندی options را ارائه می‌کند که مستقیماً به Zlib در Node.js منتقل می‌شود، جایی که می‌توان دیکشنری‌ها را مشخص کرد.
• افزونه شخص ثالث esbuild-plugin-compress برای esbuild همچنین دسترسی به گزینه های Zlib در Node.js را ارائه می دهد.

توجه: از آنجایی که پشتیبانی Zstandard در کروم در زمان نگارش این مقاله یک توسعه بسیار جدید است، بسته‌کننده‌ها در حال حاضر از آن پشتیبانی نمی‌کنند—اما این موضوع در آینده تغییر خواهد کرد!

توجه داشته باشید که فرهنگ لغت های موجود برای هر نسخه معینی از یک منبع ممکن است از یکی از نسخه های قبلی یک منبع استفاده کنند. این بدان معنی است که شما باید ترافیک کاربران را تجزیه و تحلیل کنید و بر اساس آن برنامه ریزی کنید. تعادل را هدف قرار دهید و منابعی را تولید کنید که به بهترین وجه ممکن از حداکثر تعداد کاربران بازگشتی بهره مند شوند. ارائه دهندگان CDN در حال حاضر در حال آزمایش فشرده سازی فرهنگ لغت مشترک هستند. هنوز هیچ پیاده سازی برای استفاده عمومی در دسترس نیست، اما ما انتظار داریم که تغییر کند!

آن را امتحان کنید!

ادغام فشرده‌سازی فرهنگ لغت مشترک با قابلیت‌های فشرده‌سازی موجود مرورگر، این پتانسیل را دارد که عملکرد بارگیری را برای وب‌سایت‌هایی که اغلب کد تولید به‌روز شده ارسال می‌کنند و ترافیک قابل‌توجهی را از بازدیدکنندگان بازگشتی دریافت می‌کنند، بهبود بخشد. اگر علاقه مند به فشرده سازی دیکشنری مشترک هستید، دو گزینه دارید:

1. اگر فقط به دنبال این هستید که فشرده سازی دیکشنری اشتراکی را به تنهایی انجام دهید تا احساسی نسبت به نحوه عملکرد آن داشته باشید، می توانید ویژگی آزمایشی انتقال فرهنگ لغت فشرده را در صفحه chrome://flags فعال کنید.
2. اگر می‌خواهید این را در وب‌سایت تولیدی خود امتحان کنید و ببینید فشرده‌سازی فرهنگ لغت مشترک چگونه می‌تواند برای کاربران واقعی مفید باشد، برای دریافت توکن در نسخه آزمایشی اصلی ثبت‌نام کنید و درباره نحوه کارآزمایی‌های مبدا مطالعه کنید.

نتیجه

ما در مورد این پیشرفت بزرگ در فناوری فشرده سازی در وب بسیار هیجان زده هستیم، و اینکه چقدر سریعتر می تواند برنامه های موجود را که مردم هر روز استفاده می کنند، بسازد. ما شما را تشویق می کنیم که آن را امتحان کنید، و مهمتر از همه، ما می خواهیم نظرات شما را در صورت انجام آن بشنویم ! اگر اشکالی پیدا کردید، آن را در crbug.com ثبت کنید . برای منابع و ابزارهای بیشتر، use-as-dictionary.com را بررسی کنید. در نهایت، اگر شما علاقه مند به بررسی عمیق تر در مورد نحوه کارکرد آن هستید، توضیح دهنده گام بعدی خوبی است!