前端每周清单第 34 期:Vue 现状盘点与 3.0 展望,React 代码迁移与优化,图片优化详论...

作者:王下邀月熊 编辑:徐川

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID:frontshow),及时获取前端每周清单。

新闻热点

国内国外,前端最新动态

  • Microsoft 宣发面向 iOS 与 Android 平台的 Microsoft Edge:为了保证 Windows 用户各平台使用体验的一致性,Microsoft 于本周发布了针对于 iOS 与 Android 平台的 Microsoft Edge 浏览器以及针对 Android 平台的 Microsoft Launcher;不过目前各平台上的 Edge 浏览器仍然使用的是操作系统默认的渲染引擎,即 iOS 系统上的 Webkit 引擎与 Android 的 Chrome 引擎,因此开发者们也无需担心需要针对移动版的 Microsoft Edge 进行适配。

  • Firefox 56 正式发布:本周 Firefox 56 版本正式发布,其搭载的新一代 Quantum 引擎带来了大幅度的性能提升、全新的交互界面、升级版本的开发者工具等诸多特性与优化。除此之外,Firefox 56 还提供了便捷的截图功能,允许使用者对于网页截图编辑并且快速保存到云端;同时引入了 <link rel="preload"> 以提供资源预加载功能,并且允许使用者通过 -headless 指令来启动无界面化的浏览器。

  • Mocha 4.0.0 发布:本周 Mocha 4.0.0 版本正式发布,其不再支持 Node.js Pre-v4.0.0 及之前的版本,不再支持 npm v2.15.11 以及之前的版本,并且计划不再支持 Bower;除了版本的兼容性之外,Mocha 不再会强制测试完毕后退出,并且优化了输出显示。

  • iView 2.4 版本发布:iView 是基于 Vue.js 构建的界面组件与插件库,其包含了 TalkingData 开发的一系列面向中间层与后端业务逻辑的解决方案;iView 提供了基础组件、表单组件、视图组件、导航组件、图表与其他多种类型的组件。

开发教程

步步为营,掌握基础技能

  • 8 个关键的 React 技术选型:自 2013 年 React 开源以来,React 技术栈也发生了急剧的变化与更新,现在搜索到的不少文章可能也都过时了;本文则是对于现在进行 React 开发所需要的技术栈进行了盘点。首先是开发环境,create-react-app 以 65% 独占鳌头;在类型系统上,有 42% 的开发者选择了 PropTypes,34% 的开发者选择了 TypeScript。而在状态管理上,48% 的使用 Redux,11% 的使用了 MobX;越来越多的开发者也选择使用 CSS 或 SASS 设置样式,选择用 HoC 或者 Render Props 来复用逻辑。更多 React 相关资料查看这里。

  • Vue.js 2 与 Vue.js 3 中响应式实现的对比:Vue.js 核心团队已经在讨论 Vue.js 3 中核心的响应式实现方式,在保证 API 一致的情况下,其内部实现方式可能会发生变化,本文即是对两种响应式实现方案进行对比。Vue.js 2.0 的响应式主要依赖 Object.defineProperty,其具有较好地浏览器兼容性,但是其无法直接监听数组下标方式变更以及动态添加的属性;而 Vue.js 3 中则计划使用 ES6 Proxy 来实现响应式监听,其能够简化源代码、易于学习,并且还能带来更好地性能表现。更多 Vue.js 相关资料查看这里。

  • HTTPS 工作原理简述:本文是对于 HTTPS 协议原理的简要介绍,随着越来越多的站点全站化 HTTPS,我们也有必要去了解 HTTPS 的相关知识。本文首先概述了 HTTPS 的机制原理,然后介绍了 Diffie-Hellman 算法,接下来介绍了电子证书、Asymmetric Key Encryption、电子签名、证书校验等内容;更多 HTTPS 相关资料查看这里。

  • CSS Grid 中的技巧与绊脚石:CSS Grid 为我们带来了新的布局方式,不过在实际使用的过程中也存在着很多的问题,本文即是对这些技巧与绊脚石进行盘点。本文首先分析了 CSS Grid 相较于 Flexbox 的优势,然后讨论了 CSS Grid 与 Flexbox 各自的适用场景、自适应尺寸的 CSS Grid、如何利用 CSS Grid 实现瀑布流、如何添加背景与边距色、如何进行嵌套布局、如何调试等内容;更多 CSS 相关资料查看这里。

工程实践

立足实践,提示实际水平

  • React, 内联函数与性能:很多关于 React 性能优化的文章都会谈及内联函数,其也是常见的被诟病为拖慢性能表现的元凶之一;不过本文却是打破砂锅问到底,论证了内联函数并不一定就会拖慢性能,过度的性能优化反而会有损于应用性能。作者从自己的实践谈起,首先讨论了内联函数可能拖慢性能的两个原因:内存分配与垃圾回收、shouldComponentUpdate;作者认为使用内联函数反而能够减少组件初始化时的耗时,而 shouldComponentUpdate 或者 PureComponent 也并非所有的情况都能起作用,我们也是应该因时而异。更多 React 相关资料查看这里。
  • Angular 性能优化建议:Oasis Digital 一直在使用 Angular 来构建大型软件项目,而在多年的实践中,特别是在构建性能敏感的应用过程中,工程师们总结了很多的经验教训;本文即是他们分享的三个最为重要的性能优化相关的建议。本文首先讨论了对于运行时性能的定义与指标构成,然后分析了如何提升事件的响应速度、如何最小化变化检测的范围、如何最小化 DOM 操作这三个优化策略。更多 Angular 相关资料查看这里。

  • 响应式图片基础:图片是现代网站的重要组成,其能够增强网页的表现力与感染力;不过用户往往不愿意过久地等待图片加载,因此选择合适的图片尺寸能够大大提升用户体验。作者在本文中阐释了响应式图片的基本概念以及常见的设置响应式图片的方法;本文首先讨论了如何选择合适的方式来设置响应式图片、如何选择合适的分割点、像素与百分比的对比、浏览器中 size 属性的作用、利用 CSS 使得图片更加流畅等待。更多性能优化相关资料参考这里。

深度阅读

深度思考,升华开发智慧

  • Vue.js 现状盘点与未来规划:本文不是一篇教程,而是以时间线叙述的方式来介绍 Vue.js 的创建与发展,Vue.js 技术社区的现状以及未来 3.0 版本的规划。本文首先介绍了 Vue.js 的创建初衷与设计理念,然后介绍了 Vue.js 目前的各种资源:学习资料、周报、论坛、社区等等,还有 Vue.js 相关的 Weex 这样的原生扩展。最后本文还讨论了 2.0 版本中对于测试套件、TypeScript 支持、ESLint 优化等提升,以及 3.0 版本中对核心的响应式机制、对于旧版本浏览器的支持等规划。更多 Vue.js 相关资料查看这里。

  • V8 引擎中针对 ES2015 Proxy 进行的优化:Proxy 是 ES2015 的重要组成部分,其也被逐步地应用到众多的项目或者库中,譬如 jsdom、Comlink RPC 等;近日来 V8 团队也在致力于提升 Proxy 在 V8 中的性能表现,本文主要分享了 V8 中 Proxy 的性能提升范式,也有助于开发者了解 Proxy 的实现原理。本文首先分析了老版本的 Proxy 实现原理与工作机制,然后讨论了优化的解决方案以及现实环境下的性能对比;更多 V8 相关资料查看这里。

  • 图片优化中的必知必会:截止 2017 年,图片仍然是网络带宽最大的占用者,参考 HTTP Archive 的统计数据,所有抓取的网页数据中有超过 60% 的流量是 JPEG、PNG 以及 GIF 等图片资源;Addy Osmani 则在本书中非常详细地阐述了图片压缩中必知必会的知识。本书首先抛出了观点:所有的图片都应该进行合适地压缩,所有的压缩都应当是自动化地进行,接下来本书依次介绍了如何判断图片是否需要压缩、如何选择合适的图片格式、JPEG 的格式介绍与压缩技巧、WebP 介绍与浏览器的支持情况、SVG 压缩技巧、避免重复压缩、雪碧图、缓存、预加载等等内容;更多性能优化相关资料参考这里。

  • 大型代码库迁移到 React 16 过程中学到的知识:在 Facebook 正式发布了 React 16.0 版本之后,新的 Fiber 渲染流带来了更多的性能提升;本文则是来自 Discord 的工程师分享的它们将原有应用升级到 React 16.0 版本的经验。本文首先分析了新版本中带来的譬如 ErrorBoundary 等一系列的特性变化,分享了 Discord 内部关于是否有必要升级的讨论;然后介绍了利用 jscodeshift 来修正 PropTypes、如何安全移除原有内部 API 的使用、如何升级依赖,以及 React Native 中需要进行的升级工作等内容。更多 React 相关资料查看这里。

开源项目

乐于分享,共推前端发展

  • Vuera: Vuera 是同时兼容 React 与 Vue.js 组件的集成框架,它允许开发者在 React 中引入 Vue.js 组件,或者在 Vue.js 中引入 React 组件。Vuera 算是非常不错的实验性尝试,不过其具体的性能表现如何还有待观察。

  • Nest: Nest 是基于 TypeScript 的用于构建高性能、可扩展的 Node.js 应用的框架,其同时整合了面向对象编程 OOP 与函数式编程 FP 以及函数响应式编程 FRP 优秀理念。Nest 提供了类似于 Angular、Express 这样著名框架的接口,内置了 WebSocket、响应式微服务支持、管道等多种功能特性。

  • Sentineljs: SentinelJS 是轻量级的,允许通过 CSS 选择器设置监听目标,并且动态监测新 DOM 节点创建的库;它能够在监控到新的 DOM 节点创建完毕之后自动调用回调函数。SentinelJS 相较于其他解决方案,使用了动态定义的 CSS Animation 规则中的 animationstart 事件来监听某个元素是否存在,能够获得比 Mutation Observer 更好地性能表现。

巅峰人生

  • 欲修炼成架构师,必先……:本文是互联网老兵陈美珍(Frank)分享的其对于架构师的看法与理解,以及成为架构师所需要各方面能力的讨论。作者首先分析了什么是架构师以及架构师在团队中的定位,然后讨论了架构师与传统领域专家的异同,最后分享了其认为架构师应该具备的各项能力,从基础的逻辑、抽象、想象,到空杯、好奇、实践的心态,以及技术架构与组织架构等待。

前端之巅

「前端之巅」是 InfoQ 旗下关注前端技术的垂直社群,加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。投稿请发邮件到 editors@cn.infoq.com,注明“前端之巅投稿”。

前端之巅微信底图-5.jpg

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/454905.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1.three.js世界的4大要素

一、三大组件 在Three.js中&#xff0c;要渲染物体到网页中&#xff0c;我们需要3个组建&#xff1a;场景&#xff08;scene&#xff09;、相机&#xff08;camera&#xff09;和渲染器&#xff08;renderer&#xff09;。有了这三样东西&#xff0c;才能将物体渲染到网页中去。…

架构设计 例子和实践

系统设计说明书(架构、概要、详细)目录结构 虽然这些文档一般来说公司都是有模板的&#xff0c;但我写这些文档以来基本上是每写一次就把目录结构给改一次&#xff0c;应该说这是因为自己对这些文档的理解开始加深&#xff0c;慢慢的越来越明白这些文档的作用和其中需要阐述的东…

activiti 批量 mysql_Activiti6系列(3)- 快速体验

一、部署启动activiti####1、部署&#xff0c;将两个war包拷贝到Tomcat下即可。![](https://img2018.cnblogs.com/blog/1755845/201908/1755845-20190802010532367-2002399291.png)2、启动tomcat&#xff0c;访问http://127.0.0.1:8080/activiti-app默认账号密码&#xff1a;ad…

【启动】Windows上启动图形化软件,报错: 无法启动此程序,因为计算机中丢失api-ms-win-crt-runtime-1-1-0.dll...

今天在安装了jetbrains官网上的ToolBox软件后&#xff0c;没有办法启动起来&#xff0c;报错如下&#xff1a; 无法启动此程序&#xff0c;因为计算机中丢失api-ms-win-crt-runtime-1-1-0.dll 尝试重新安装了并没有什么用&#xff0c;现在来解决方法&#xff1a; 直接找到官方的…

论文: YOLO9000-Better,Faster,Stronger

论文阅读&#xff1a; YOLO9000-Better,Faster,Stronger YOLOv2 是经过改造之后的YOLO Batch Normalization&#xff1a;在所有的conv layer后加了BN之后提高了2% mAP&#xff0c;BN可以帮助regularize模型&#xff0c;这样的话就可以放弃 dropout。 High Resolution Classifi…

怎么ie取消要打开或保存来自_取消认证后,发票抵扣就这么简单!

点击标题下「中财讯集团」可快速关注3月1日起&#xff0c;取消增值税发票认证的纳税人范围扩大至全部一般纳税人。一般纳税人可以自愿使用增值税发票选择确认平台查询、选择用于申报抵扣、出口退税或者代办退税的增值税发票信息。具体如何操作呢&#xff1f;掌握以下步骤&#…

Google发布文档数据库Firestore

Google发布了Cloud Firestore&#xff0c;它是用于移动、网络和服务器应用程序的文档数据库。\\去年我们曾报道过Google Firebase&#xff0c;它是一种用于移动和网络开发的数据库&#xff0c;提供实时的和离线的数据访问&#xff0c;与许多Google服务相集成。他们现在推出了一…

好的软件架构设计

什么是架构 前言&#xff1a;软体设计师中有一些技术水平较高、经验较为丰富的人&#xff0c;他们需要承担软件系统的架构设计&#xff0c;也就是需要设计系统的元件如何划分、元件之间如何发生相互作用&#xff0c;以及系统中逻辑的、物理的、系统的重要决定的作出。在很多公…

HihoCoder 1323 回文字符串

回文字符串 思路 动态规划&#xff1a; 可以有三种修改决策 将开头和结尾字符改成一样在开头加一个和末尾相同的字符在末尾加一个和开头形同的字符代码&#xff1a; #include <stdio.h> #include <iostream> #include <string.h> using namespace std; char …

python线程状态_Python线程

1. 线程基础1.1. 线程状态线程有5种状态&#xff0c;状态转换的过程如下图所示&#xff1a;1.2. 线程同步(锁)多线程的优势在于可以同时运行多个任务(至少感觉起来是这样)。但是当线程需要共享数据时&#xff0c;可能存在数据不同步的问题。考虑这样一种情况&#xff1a;一个列…

JavaScript中错误正确处理方式,你用对了吗?

JavaScript的事件驱动范式增添了丰富的语言&#xff0c;也是让使用JavaScript编程变得更加多样化。如果将浏览器设想为JavaScript的事件驱动工具&#xff0c;那么当错误发生时&#xff0c;某个事件就会被抛出。理论上可以认为这些发生的错误只是JavaScript中的简单事件。 本文将…

文件分割机

文件分割与合并 要求&#xff1a;实现对大文件的分割与合并。 按指定个数切&#xff08;如把一个文件切成10份&#xff09;或按指定大小切&#xff08;如每份最大不超过10M&#xff09;&#xff0c;这两种方式都能够。 程序说明&#xff1a; 文件分割&#xff1a;把一个文件分割…

mysql pow函数怎么用_pow函数怎么用

PHP pow函数表示指数表达式。pow函数怎么用&#xff1f;php pow()函数 语法作用&#xff1a;pow()函数的作用是将一个数进行n次方计算后返回语法&#xff1a;pow(X,Y);参数&#xff1a;X表示要做处理的数字Y表示指定n次方中的n数值说明&#xff1a;返回X的Y次方幂&#xff0c;如…

【IntelliJ IDEA】添加一个新的tomcat,tomcat启动无法访问欢迎页面,空白页,404

第一部分&#xff0c;添加一个tomcat 1.先把Toolbar 和 Tool Buttons显示出来 2.选择Edit Configurations 3.添加一个新的tomcat server进来 解决no artifacts configured问题&#xff0c;就是没有项目加入里面 先添加一个没有的项目 启动之后找不到 页面 第二部分&#xff0c…

回文数-时间变换-判断邮箱

class huiwenshu public class huiwenshu {public static void main(String[] args) {System.out.println("输入...");Scanner in new Scanner(System.in);String number in.next();boolean flag true;for(int i0;i<number.trim().length()/2;i){if(!String.va…

mac eclipse tomcat mysql_mac下使用eclipse+tomcat+mysql开发 j2ee(一)

在这里是使用eclipse&#xff0b;tomcat&#xff0b;mysql的方式。1、软件下载(1) eclipse我使用的是mac&#xff0c;因为本人是苹果客户端开发者&#xff0c;所以目前只有苹果机器了。首先下载eclipse for mac&#xff0c;选择mac 64位&#xff0c;下载eclipse-jee-kepler-SR1…

社交系统ThinkSNS-plus(TS+)V1.0发布!

2019独角兽企业重金招聘Python工程师标准>>> 需要购买源码的同志们&#xff0c;依然随时可以联系我们手机&#xff1a;18108035545&#xff08;同微信&#xff09;&#xff1b;电话&#xff1a;028-82884828 &#xff1b;QQ&#xff1a;3298713109&#xff1b; 从决…

《软件架构设计》一书目录

第一部分 软件架构概念与思想篇 1 第1章 解析软件架构概念 3 1.1 软件架构概念的分类 3 1.1.1 组成派 4 1.1.2 决策派 5 1.2 软件架构概念大观 5 1.2.1 Booch、Rumbaugh和Jacobson的定义 5 1.2.2 Woods的观点 6 1.2.3 Garlan和Shaw的定义 6 1.2.4 Perry和Wolf的定义 …

.net 读取mysql数据库配置文件_.NETCore添加及读取默认配置文件信息

这里的默认配置文件指的是项目中的appsettings.json文件&#xff0c;我们可以把一些配置信息保存在里面&#xff0c;比如数据库连接信息。来吧&#xff0c;看例子&#xff1a;1、先在appsettings.json文件中写入数据库的连接信息&#xff1a;{"Logging": {"LogL…

年龄层统计SQL

-- 处理名单丢失SELECT u.user_id u_userid,o.user_id o_userid,o.* FROMtb_gh_orders o LEFT JOIN tb_gh_user u ON o.user_id u.user_id WHERE o.course_id 128 AND o.order_state 1 ;-- 年龄段统计SELECT T1.*,CONCAT(LEFT (T1.C1 / T2.C2 * 100, 5), %) P FROM(SELECT C…