WebP 简介： WebP 是由 Google 开发的一种现代图像格式，旨在提供更小的文件大小和更高的图像质量。它采用了有损和无损压缩技术，同时支持透明度和动画。与传统的 JPEG 和 PNG 格式相比，WebP 具有更好的压缩性能，可以在保持图像质量的前提下显著减小文件大小。
今天我们将研究一下能显著提升页面性能的方法 —— 资源提示与指令。你也许听说过 preload，prefetch 和 preconnect，可是我们想研究的更深一点，搞清他们之间的区别并且充分的利用它们。它们带来的好处包括允许前端开发人员来优化资源的加载，减少往返路径并且在浏览页面时可以更快的加载到资源。
jpeg优势： 非常通用，JPEG在色调及颜色平滑变化的相片或是写实绘画（painting）上可以达到它最佳的效果。 jpeg劣势： 它并不适合于线条绘图（drawing）和其他文字或图示（iconic）的图形,因为它的压缩方法用在这些图形的型态上,会得到不适当的结果；
到目前为止，AVIF显示出了很大的潜力。由AV1编解码器开发的Alliance for Open Media的创始成员Netflix开发的测试框架显示，与JPEG或WebP相比，AVIF的文件大小显著减小。Cloudinary和Chrome编解码器团队的其他研究也对其进行了积极的评估，与当前的编码标准相比更加优秀。
我们知道，在前端界有一个共识：速度就是生命，带宽就是金钱。怎样将页面加载速度有效提升是无数前端工程师无时不刻在思考的课题，目前的网络环境中，除了视频，图片仍旧是占用流量较大的一部分，对于app端尤其如此，因此，如何在保证图片视觉不失真的前提下缩小图片体积，对于节省带宽和电池电量都十分重要，因此Google在十年前提出了一种新的图片压缩格式 ：WebP，给图片的优化提供了新的方向。
WebP Server这是一个基于 Golang 的服务器，允许您动态提供 WebP 图像，在不改变图片URL路径的情况下，自动将JPEG、PNG、BMP、GIF等图像转换为WebP格式，从而减小图片体积，降低流量消耗和提高加载速度。
2015 年，Google推出了[2]Brotli[3]，这是一种全新的开源无损数据格式，并被现在所有现代浏览器支持[4]。实际上，Brotli 似乎比 Gzip 和 Deflate更有效[5]得多[6]。取决于您的设置，压缩可能会（非常）缓慢，但是这样慢的压缩速度最终也会带来较高的压缩率。不管怎样，它都能快速解压缩。这篇文章可以估算站点使用 Brotli 压缩可以节省的大小[7]。
即 Google I/O 2023 之后，又迎来了 Apple 举办的当世最令人瞩目的另一大科技大会：WDC2023。这两场大会无疑都会为大家带来近一年内最热门最前沿的技术，而作为 Web 开发者我们也应该紧跟时代的潮流，及时了解技术的进步，从这些大会上我们也能学习到很多有用的内容。
[TOC] 0x00 快速入门 WebP 介绍 什么是 WebP? WebP是由Google推出的一种全新图片文件格式，也是Telegram Stickers 主力使用的文件格式，可为 Web 上的图
作者：LeanCloud 原作：[Mahdhi Rezvi] ，翻译自 New Frontend （缩进段落为译者附注） 来源：SegmentFault 社区
你知道是什么是WebP吗？ 它是Google出品的新图像格式，这是一个Web开发者需要扩充的新知。成都办公室之前来了一个UI开发人员，面试的时候，用自己开发JavaScript体感游戏震惊了大家。 他叫陈嘉，请看他为大家带来的关于WebP的介绍。 WEBP是什么呢？ WEBP 是google推出的意图改变web图片JPG、PNG、GIF三分天下局势的一种图片格式。它不仅支持无损或有损压缩、alpha通道，还支持动画演示。在同画质的情况下，webp格式图片占用体积相较于jpg图片大约减少40%，相较于无损p
网上可以找到前端开发社区贡献的大量工具，这篇文章列出了我最喜欢的一些工具，这些工具给我的工作带来了许多便利。
一般的论坛站点中都会存储大量的图片，图片文件的格式需要根据浏览器的类型来进行适配，返回浏览器可兼容的图片格式，同时最大程度上压缩图片的大小，来节省流量。例如：
移动端网页的加载速度对用户体验极为重要，是影响页面转化率的关键因素，H5 活动页往往使用大量的图片素材来丰富活动效果，素材加载的快慢会对用户感知造成重要的影响。
图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话，图片大小有时高达几十兆。
图片资源，在我们的业务中可谓是占据了非常大头的一环，尤其是其对带宽的消耗是十分巨大的。
自从2010年Ethan Marcotte开始讨论响应式网页设计，开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题 ，因为我们对同一个网站在众多设备宽度下，使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像？你愿意在你的手机上加载一个巨大的（虽然更漂亮的）图像？这个问题令人左右为难。 一群来自响应式问题社区组(RICG)的聪明家伙致力于解决这个难题，他们使picture元素和srcset、sizes属性纳入HTML 5.1规范草案 。因为我们无法预测用户在何地以及如何访问我
自从2010年Ethan Marcotte开始讨论响应式网页设计，开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题 ，因为我们对同一个网站在众多设备宽度下，使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像？你愿意在你的手机上加载一个巨大的（虽然更漂亮的）图像？这个问题令人左右为难。
随着web的发展，网站资源的流量也变得越来越大。据统计，60% 的网站流量均来自网站图片，可见对图片合理优化可以大幅影响网站流量，减小带宽消耗和服务器压力。
本文阿宝哥会为小伙伴们隆重介绍用于图片处理的十个 “小帮手”，他们各个身怀绝技，拥有模糊、压缩、裁剪、旋转、合成、比对等技能。相信认识他们之后，你将能够轻松应对大多数的图片处理场景。
Jquery Lazyload是一款网页图片延迟加载JS插件，本文介绍该JS的使用方法。
优化网站的性能需要花费大量的时间，并且如果要根据自己的需求进行优化则花费的时间可能更多。
《前端技术观察》是由字节跳动IES前端团队收集、整理、推荐的业界高品质前端资源合集，主要分为以下几个板块： Highlights 优秀的工具、库 好的教程、深度解读已有技术的文章 业界最新的技术、热点文章 业界对（新）技术的深度地、优秀地实践 Tutorial Tools And Codes 《前端技术观察》的目的是让大家： 更及时的了解到业界最新的技术 受益于高质量的教程、文章 了解业界更优秀的代码、工具 更多地、氛围更浓厚地讨论、研究、落地技术 highlights 75行代码告诉你WebGL的本质（英
2）客户端通过OpenUrl调起Safari，再二次跳转到data url 技术实现方案是首先通过调起Safari，然后跳到一个Data URI Scheme形式下的HTML页面，而添加到主屏幕的也是这个Data URI Scheme形式下的HTML页面。 OpenUrl调起Safari的实现为： [[UIApplicationsharedApplication] openURL:[NSURL URLWithString:@"http:www.xxx.com"]]; 通过该方法即可调起Safari，让Safari访问附带的URL链接，在该功能实现中，URL链接指向一个Data URI Scheme形式下的HTML页面。如下图所示：
图片瀑布流是我们手Q个性化业务最主要的表现形式，很多页面的图片资源都十分庞大。虽然之前已经做了一些优化，将除首屏模块外的所有图片进行懒加载，但是页面所需加载的资源仍然不小。
用户为何会觉得页面卡？ ： 1. 等待时间长（性能） 项目本身包/第三方脚本比较大。 JavaScript 执行阻塞页面加载。 图片体积大且多。 特别是对于首屏耗时中的白屏时间，用户等待的时间就越长，用户感知到页面的速度就越慢。麻省理工学院的 Richard Larson 在讲话中指出，“人类将被动等待高估了 36%”（https://mazey.cn/t/em）。这意味着用户感觉到的等待时间比开发工具记录的长得多。 2. 看起来卡（体验） 页面结构不断调整，不连贯。抖动的页面往往让用户感觉很卡。 首先
英文 | https://niemvuilaptrinh.medium.com/14-libraries-create-360-degree-views-for-website-c4c177ef7d1b
作者：Marc 译者：前端小智 来源：dev 本人已经过原作者制授权翻译。 在这篇文章中，主要介绍10种快速提高网站性能的方法，你只需5分钟内就可以将它应用到你的网站上，废话不多说，让我们进入正题吧
https://blog.cloudflare.com/better-http-2-prioritization-for-a-faster-web/
这是「进击的Coder」的第 635 篇技术分享 作者：崔庆才 我们肯定经常跟图片打交道吧，不管是写文章、传图片还是网站开发，我们或多或少都要插图，但有时候图片体积比较大的时候就会带来加载速度慢的一些问题，那么这时候你可能会有这么一个需求： “有没有什么办法在保证图片清晰度的时候把图片的体积压缩到最小？ ” 大家通常会用什么办法呢？ 我的话其实用的比较多的办法就是使用 PS，然后另存为 Web 所用格式，但用到这个功能我还得额外装个 PS，感觉比较麻烦。 所以，今天给大家推荐一个非常好用的图片压缩网站，可以
动图 说到动图，首先我们想到的 GIF 格式，GIF 在网络上流行已久，各种动态表情包都是 GIF 图做的。 但是 GIF 的缺点也很明显，透明背景的 GIF 无法做到像素的绝对平滑过度，于是乎我们可以看到带透明的 GIF 图周围杂边非常明显，如下： image.png 通常解决这种问题是在外面加上一圈白色的描边，这样在白色背景下可以掩盖杂边问题，但是在深色背景下依然无解： image.png APNG 完美的解决了这个问题。 APNG APNG 全称是 Animated Portable Netw
但是，webp图片需要使用Chrome才能查看，如果没有安装第三方软件，那么保存下来的webp图片在mac上是不能查看的，如下图所示。
上一篇文章我们使用 Scrapy + Selenium 爬取了某个电影网站即将上映的影片
原文链接：https://medium.com/better-programming/6-must-use-tools-for-front-end-development-643f50c9161
优化您在网站上提供的用户体验对于任何在线业务的成功都至关重要。谷歌确实使用不同的用户体验相关指标来为 SEO 对网页进行排名，并继续提供多种工具来衡量和提高网络性能。
好长时间没有关注WebP的支持性了，乍一看欸好像连QQ浏览器都能完美支持WebP了。很早之前就有关注WebP-Server这一过渡工具，恰好最近糖哥送了博主一台腾讯云无忧轻量，在国内的轻量上部署一番，感受一下WebP带来的提升。
页面加载 首先，浏览器发起直接对目标html的请求，然后分析其中用到的资源并下载，浏览器有自己的规则来判断什么样的资源可以被并行下载，什么样的不可以，浏览器对加载顺序有着特殊的喜好： JS的出现会延迟后续CSS的下载，因为JS会改变页面元素，浏览器会延迟整个页面的渲染直到JS被下载解释并执行，所以必须让CSS的链接在JS前面以达到尽可能的并行。 与浏览器支持的并发连接数有关 在HTTP 1.1协议中要求浏览器访问同一host的连接数不得大于2，但事实上当前绝大多数浏览器都违背了这一要求，具体参见：并发连
最近，我们将 Universe.com 主页的性能提升了十倍以上。在本文中，我们将解析实现这一重大改进的具体技术手段。
总结一下，对于色彩与图像内容比较丰富，变化比较多端的，适合使用jpg，例如大型背景、头像、人物照片等。对于颜色单一，有大色块的图像，例如图标等，适合用png，压缩效率高，并且有透明。小动画可以使用gif，便不适合使用复杂的视频。
在web开发当中我们经常需要进行需要在线浏览PDf内容，在线嵌入动态pdf，传统的解决方法安装客户端PDF阅读器，如果是在谷歌是可以在线浏览的，因为他自身就带了一些插件，以前遇到这样的问题往往是费时又费力，很不好解决，
秋招 H5 移动端（面向微信）设计师出的落地页的动画层数有30层左右，在通过 bodymovin 导入前端页面中后再加载好素材之后仍有5秒左右黑屏渲染动画 目前前端渲染有以下方案
图片通常是移动端应用流量耗费最多的部分，并且占据着重要的视觉空间。以大家最常用的即时通讯IM应用为例，应用中存在大量的图片数据往来（比如图片消息、用户相册、用户头像等等）。合理的图片格式选用和优化不仅能减小图片传递过程中的数据量、提升视觉效果，还能显著降低服务端的带宽、计算资源等基础设施成本，一举多得。
马上到了金三银四的时间，很多公司开启了今年第一轮招聘的热潮，虽说今年是互联网的寒冬，但是只要对技术始终抱有热情以及有过硬的实力，即使是寒冬也不会阻挠你前进的步伐。在面试的时候，往往在二面，三面的时面试官会结合你的简历问一些关于你简历上项目的问题，而以下这个问题在很多时候都会被问到
[本文由@IT·平头哥联盟-首席填坑官∙苏南 分享] 引言 大家好，这里是@IT·平头哥联盟，我是首席填坑官——苏南(South·Su)，今天是国庆节的第二天，这个假期没有外出(不要问我为什么，自己脑补～😭)，前些天分享了一篇前端面试汇总的文章，有些同学在群里问了其中的一些细节，其中大家最关心的性能优化这块，今天整理了公司项目中的一些认为不错的点，跟大家一起分享，如有理解错误，请纠正。 优化概括 1、首先最基本的，CSS样式表放在页面头部Head内且link链式引入，javascript放在底部body结束
特别是对于首屏资源加载中的白屏时间，用户等待的时间就越长，用户感知到页面的速度就越慢。麻省理工学院的 Richard Larson 在讲话中指出，“人类将被动等待高估了 36%”（https://mazey.cn/t/em）。这意味着用户感觉到的等待时间比开发工具记录的长得多。
漏洞大约是4月份左右交的，目前官方应该也已经修复了，总体下来感觉目前的CNVD已经不是曾经那个CNVD了，总体而言这个CRM没怎么考虑到安全问题，挖到后面漏洞交的已经不太想交了，有兴趣的可以试试挖一下其他的，这里仅给出几个点，注入之类的就暂时先不给了
有用户反映视频feed流的列表中的图片加载慢，需要确认是否是CDN响应慢/图片太大的原因。
领取专属 10元无门槛券
手把手带您无忧上云
