莱芜论坛都市网,网站seo诊断方案,本地人wordpress怎么同步到服务器,建站网站加盟大家好#xff0c;我是若川#xff0c;今天给大家分享一篇来自阿里妈妈前端快爆的好文。另外#xff0c;偷偷告诉你#xff0c;截止今晚9点 点此抽奖送红包还送3本比红宝书还贵的书可以点击文章末尾阅读原文直达知乎链接#xff0c;以下是正文2020 终究是一个不平凡的一年… 大家好我是若川今天给大家分享一篇来自阿里妈妈前端快爆的好文。另外偷偷告诉你截止今晚9点 点此抽奖送红包还送3本比红宝书还贵的书可以点击文章末尾阅读原文直达知乎链接以下是正文2020 终究是一个不平凡的一年我们经历了太多坎坷与磨炼。甚至受 COVID-19 疫情的影响Chrome 浏览器罕见的断更了Chrome 82 就此缺席。但 Web 生态依旧保持了欣欣向荣的活力一大批新特性持续不断涌现出来。标准与协议ECMAScriptES2020 如期发布此前进入 Stage 4 的提案均被纳入正式规范。import()用于动态加载模块import.meta一个对象用来携带模块相关的元信息export * as newModule from package一种新的聚合导出语法新增可选链运算符?. 能够在属性访问、方法调用前检查其是否存在新增空值合并操作符?? 用来提供默认值说明上下文是 null 或 undefined新增 BigInt 基础数值类型可以表示绝对值大于 2^53-1 的整数而无精度损失新增 Promise.allSettled()返回一个在所有给定的 Promise 已进入 fullfilled 或 rejected 状态的 Promise并带有一个对象数组每个对象表示对应的 Promise 结果新增 String.prototype.matchAll一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。与 RegExp.prototype.exec 的区别在于如果要得到所有匹配项需要正则表达式有 /g 标志且多次调用 .exec() 才会得到所有匹配的结果而 matchAll 只需要调用一次新增 globalThis用来解决浏览器、Node.js 等不同环境下全局对象名称不统一获取全局对象比较麻烦的问题。CSS特性Flexbox 已经全面普及垂直居中不再是前端「打工人」的烦恼丝。双飞翼、圣杯布局等各种 Hack 的手法也终究淹没在历史的长河之中。Flexbox 中也支持了 gap 属性可以非常方便的调节相邻元素的间距主流浏览器均已支持所有主流浏览器都支持了 CSS Grid同时也被更多人熟知和使用Subgrid子网格在 Firefox 71 中正式发布。Float、inline-block 不再成为页面布局首选CSS 布局正在从一维向二维挺进纵横比属性 aspect-ratio 已经在 Chrome 88 中支持通过它可以非常方便的实现元素的等比缩放Firefox 创新性的基于 CSS Grid 实现了瀑布流布局grid-template-rows: masonry并推动其进入规范这将比 JavaScript 方案拥有更好的性能容器查询Container Queries取得了实质性进展Chrome 正在快马加鞭的实现中。有了它响应式组件如虎添翼可以根据容器大小来设置不同的样式Chrome 86 和 Firefox 85 支持了 :focus-visible 伪类可以单独控制键盘的焦点样式请停止使用* { outline: none; }改用 :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: auto; }这样既可以保证鼠标点击时没有焦点框也保留了键盘 Tab 键操作的时候出现焦点框使页面的无障碍性更加友好。技术领域数据来自 The State of CSS 2020处理器三大预处理器Sass、Less、Stylus中Sass 满意度最高其他两者相对较低其中很大一部分人转投了后处理器 PostCSS 的阵营。Sass 社区的 LibSass 宣布已弃用不再支持新的功能的开发LibSass 和 node-sass 将在最大努力的基础上继续无限期维护包括修复主要的错误和安全性问题并保持与最新版本的 Node.js 相兼容CSS 框架层面前有 CSS-in-JS 的持续追击后有以「实用原子类」为代表的 Tailwind CSS 异军突起迫使我们重新思考 CSS 语义化类名的真谛。传统 CSS 框架中用户继续使用 Bootstrap 的意愿明显下降Pure.CSS 欢迎度不减CSS-in-JSCSS Modules 和 Styled Components 继续保持在第一阵营LinterStylelint 依然是 Style Lint 领域的领头羊。Prettier 作为「全能」的格式化工具支持原生 CSS、 SCSS、Less 三种语法是开发者格式化样式的不二之选搭配 Git Hooks 使用妙不可言。端技术WebAPIChrome 87 开始可以在 JavaScript 层面控制摄像头的平移、倾斜和缩放了Web NFC 在 Chrome 81 开始进入初始试用计划Safari 14 已支持 WebP 图片格式至此四大主流浏览器Chrome、Firefox、Edge、Safari已全部支持 WebPSafari 14 已支持 Web 端通过 Web Authentication API 调用 Face ID 和 Touch ID 验证用户优化高 DOM 渲染压力场景的 Display Locking 展现锁定提案再次更新下一代图片格式 AVIFAV1 Image File Format已经来了此格式比 JPEG 小 50% 左右、比 WebP 小 20% 左右相关性能跑分见此目前 Chrome 85、Firefox 77 已支持HTML enterkeyhint 属性已在 Chrome 77、Safari 13.1 得到支持Firefox 支持私有的 mozactionhint 属性该属性可以使移动设备键盘中的 enter 键根据情景展现为不同的文案和样式W3C 沉浸式 Web 工作组发布 WebXR 手势输入模块 Level 1 规范 的首个公开工作草案该模块具有追踪关节手势的功能可用于在 VR 场景中识别手部关节姿势或渲染手势模型。安全隐私保护得到完善2020 年是欧盟通用数据保护协议 GDPR 强制生效的第三年也是熔断 Meltdown 与幽灵 Spectre 漏洞发生的第三年。在 2020 年各大浏览器安全和隐私保护策略得到了很大的进展。下线有安全隐患的支持有安全隐患的支持TLS 1.0 TLS 1.1 已在 Chrome 84、Firefox 74、Safari 13.1 中下线FTP 已在 Safari 14、Chrome 87 中下线将在 Firefox 将来版本中下线Flash 已在 Safari 14 中下线将在 Chrome 88、Firefox 85 中下线跨站隔离优化2018 年初由于 Spectre 漏洞的暴露高精度定时器和 Shared Memory API 被禁用为预防相关漏洞浏览器需要保证不同站点在不同进程相互隔离为了保证跨站进程隔离Cross-Origin-Opener-Policy 和 Cross-Origin-Embedder-Policy 返回头被设计出来。当它们被服务端正确返回时Firefox 79 和 Chrome 88 对 Shared Memory API 的支持将重新打开跨站嗅探预防在 Safari 13.1 中第三方 Cookie 完全被禁用JavaScript 可写的存储最多保留一周在 Safari 14 中跨域资源的 Cookie 完全被禁用除非经由 Storage Access API 显式获取用户的同意第三方 CNAME 的域名 Cookie 最多可设置 7 天有效期在 Firefox 79 中新版智能跨站嗅探预防ETP 2.0上线将每 24 小时清除被判定为跨站嗅探的相关 Cookie 设置缓存粒度优化Chrome 85HTTP 缓存采用更细粒度的键ETLD1Firefox 将在 85 后实现同粒度的缓存键Safari 12.1 实现了顶部 window 域名 URL 的键控制机制新的缓存机制隔离了 iframe 内外的跨域请求能有效规避站点访问嗅探、跨站搜索攻击、跨站访问跟踪等隐私问题其他安全策略Chrome 83 支持了 Trusted Types 以预防基于 DOM 的 XSSChrome 80 全量了 SameSite Cookie 默认值 SameSiteLax此举可以提升站点安全性从源头防御大量的 CSRF 漏洞Firefox 76 中使用 location.href 或 meta http equiv“refresh” 等方法导航到未知协议的操作将被阻止。框架和解决方案框架2020年 React 没有什么全新的概念React Hooks 在社区从广受关注变成了实际落地大家等待已久的 Vue 3.0 正式发布在保留自身特色的同时也从 React 中汲取养分。React 发布了 17 版本号称一个没有新特性的大版本更新提供多版本 React 共存的能力经过持续两年的努力2600 个提交之后Vue 3.0 发布了代号 One Piece 的正式版重新划分了模块可以减少近半运行时大小。拆出的一些独立包也可复用在更多场景AST 转换、自定义渲染器如小程序、响应式系统抽离出来独立使用新的 Composition API在保留原有基于对象的 API 同时提出的新的 API以达到类似 React Hooks 式的逻辑重用 性能提升与 Vue2 相比打包后文件尺寸 (tree-shaking 时减少了 41%)、初始渲染 (快了 55%)、更新 (快了 133%) 和内存使用 (少了 54%) 方面都有显著的性能提升模板编译时优化对性能提升有很大贡献 更好的 TypeScript 集成Vue3 由 TypeScript 写成新的 Composition API 能很好支持 TS 类型推断官方的 VSCode 扩展 Vetur 支持了模板中的类型检查Vue3 更是完整支持了 tsx。Webpack 又有更多对手出于对 Webpack 的爱恨交加大家纷纷用更新颖的想法或更激进的技术造起了全新的开发工具链也促使 Webpack 加快自我迭代的步伐。Webpack 5.0 正式发布这是时隔 2 年半的大版本更新通过持久缓存提高构建性能通过更好的 Tree Shaking 和代码生成来降低打包大小vite 作为 Vue 作者的新项目快速引来关注它基于浏览器原生 ES imports因而有更快的冷启动和热更新整体速度与模块数量无关。没有打包的过程源码直接传输给浏览器使用原生的 script module 语法进行引入开发服务器拦截请求和对需要转换的代码进行转换实现了真正的按需编译。生产环境提供了 vite build 脚本进行打包它基于 rollup 进行打包基于原生 ES Module (ESM) 的现代打包工具 Snowpack 2.0 发布其启动时间不到 50 毫秒可以在大型项目中保持快速运行内置对 TypeScriptJSXCSS Modules 的支持可与 ReactPreactVueSvelte 等前端开发框架结合使用Babel 作者 Sebastian McKenzie 推出了 JavaScript 工具链 Rome包含编译器、代码风格检查、格式化、打包、测试框架等内容亮点在于零第三方依赖并简化 API 配置。致谢今年是前端快爆的第三年还是要感谢四位轮值编辑承虎、一丝、池冰、墨尘以及特邀编辑紫云飞。谢谢各位的一路陪伴字字句句的斟酌才有了这三年的沉淀。当然最需要感谢的还是各位粉丝谢谢你们一直以来的关注与点赞给了我们很大的动力。新的一年里我们将继续秉承原创、求精、求严的精神一起前行勘误尤雨溪Rome 已经跟 Facebook 无关作者 Sebastian McKenzie 之前跳槽去了 Discord现在已经辞职靠捐赠全职开发 Rome。本期编辑壹丝、承虎、池冰、墨尘审阅全体编辑。
