本专区由 大前端 团队提供资讯和技术支持,欢迎社区成员申请加入管理小组。
移动、前端、小程序、跨端……大前端领域百花争鸣,把握大前端未来的方向,关注科技企业的大前端实践,在这里看到大前端的前沿。
01 背景介绍 在智能手机市场上,高端机型经常备受瞩目,但低端机型亦占据了不可忽视的份额。众多厂商为满足低端市场的需求,不断推出低配系列手机。另外过去几年的中高端机型,随着系统硬件的快速迭代,现已经被归类为低端机型。爱奇艺APP拥有庞大的用户基群,其中低端机型用户也占据了相当一部分。低端机优化能给这部分用户带来稳定、流畅、高效的使用体验。下面将从冷启动、流畅性、加载速度三个维度介绍爱奇艺APP对低端机的优... 展开更多
## 引言 在h5开发中,我们经常会需要实现一些动效来让页面视觉效果更好,谈及动效便不可避免地会想到动效性能优化这个话题: * 减少页面DOM操作,可以使用CSS实现的动效不多出一行js代码 * 使用绝对定位脱离让DOM脱离文档流,减少页面的重排(relayout) * 使用CSS3 3D属性开启硬件加速 那么,CSS3与动效优化有什么关系呢,本文将从浏览器渲染层面讲述CSS3的动效优化原理 ## 浏览器页面展示过程 首页,我们需要了解一下浏览器的页面... 展开更多
前言 在日益复杂和多元的Web业务背景下,前端工程化这个概念经常被提及。“说说你对Web工程化的理解?” 相信很多初学者在面试时会经常遇到,而大多数人脑子会直接浮现出 Webpack,认为工程化就是 Webpack 做的那些事情儿,当然也不能说不对,准确说 Webpack 只是工程化背景下产生的工具。 工程化的目的是高性能、是稳定性、是可用性、是可维护性、是高效协同,只要是以这几个角度为目标所做的操作,都可称为工程化的一部分。工... 展开更多
前言 在前面我们把Paint关于UI颜色样式的处理进行了学习, 其实真正高级部分就是三个点,渲染,滤镜,图形组合,而我们图形绘制比较重要的另一个对象Canvas也是需要我们去重点掌握的,那么这次咱们来进行Canvas的深层次的学习,主要了解有两个点 Canvas的变换使用技巧 Canvas的状态,Canvas Layer 1.Canvas基本概念 直面意思是画布,其实是分装的一个工具类(绘制会话,用来和底层沟通最终交给底层绘制),一个Canvas类对象有四大基... 展开更多
导读: 自从angular/react/vue的出现颠覆了前端开发者开发模式以来,虽然新的前端框架依然不断涌现,但是迟迟没有一个新的前端框架进入广大前端开发者的视野。本文会从近两年越来越火的lowcode/微前端出发,探讨在传统前端领域,下一代前端工程/框架的可能方向。 全文3166字,预计阅读时间 6分钟。 01 lowcode lowcode 其实一点也不新,通过 GUI、配置化的方式代替传统的手写代码编程,从sql语句到dreamweaver,基于模型驱动的可... 展开更多
JavaScript 有完善的内存处理机制,能自动进行垃圾回收,但是假如一个对象一直被引用,他的内存是无法得到释放的。如果项目运行过程中,内存占用越来越高,只增不减,没有峰值,就存在内存泄漏。多页应用我们可以通过页面刷新缓解,但是对于服务端渲染和单页应用则需要重点关注内存泄漏问题。本文主要以Vue单页应用展开,因为在 SPA 的设计中,用户使用它时是不需要刷新浏览器的,所以 JavaScript 应用需要自行清理组件来确保垃... 展开更多
如果以前问我`ES5`的继承和`ES6`的继承有什么区别,我一定会自信的说没有区别,不过是语法糖而已,充其量也就是写法有区别,但是现在我会假装思考一下,然后说虽然只是语法糖,但也是有点小区别的,那么具体有什么区别呢,不要走开,下文更精彩! 本文会先回顾一下`ES5`的寄生组合式继承的实现,然后再看一下`ES6`的写法,最后根据`Babel`的编译结果来看一下到底有什么区别。 # ES5:寄生组合式继承 `js`有很多种继承方式,比如... 展开更多
**导读**:自从angular/react/vue的出现颠覆了前端开发者开发模式以来,虽然新的前端框架依然不断涌现,但是迟迟没有一个新的前端框架进入广大前端开发者的视野。本文会从近两年越来越火的lowcode/微前端出发,探讨在传统前端领域,下一代前端工程/框架的可能方向。 _全文3166字,预计阅读时间 6分钟。_ **一、lowcode** ============= lowcode 其实一点也不新,通过 GUI、配置化的方式代替传统的手写代码编程,从sql语句到dre... 展开更多
## 写在前面 大家好,我是[染陌](https://github.com/answershuto),这是我在 [全球开源技术峰会 GOTC](https://gotc.oschina.net/) 上的一个 topic ——《基于 Flutter 的 Web 渲染引擎「北海 Kraken」》。我主要从技术角度来分享 Kraken 的一些实现原理以及关键的技术特性,现在整理成文字版分享给大家。 Kraken Github:[https://github.com/openkraken/kraken](https://github.com/openkraken/kraken) Kraken 官网:[https:... 展开更多
说说对 React Hooks 的理解?解决了什么问题? 一、是什么 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 至于为什么引入hook,官方给出的动机是解决长时间使用和维护react过程中常遇到的问题,例如: 难以重用和共享组件中的与状态相关的逻辑 逻辑复杂的组件难以开发与维护,当我们的组件需要处理多个互不相关的 local state 时,每个生命周期函数中可能会包含着各种互不... 展开更多
Gin 是一个标准的 Web 服务框架,遵循 Restful API 接口规范,其路由库是基于 httproute 实现的。 本节将从 Gin 路由开始,详细讲述各种路由场景下,如何通过 Gin 来实现。 ## 基本路由 Gin 支持 GET、POST、PUT、PATCH、DELETE、OPTIONS 等请求类型。 [示例](https://github.com/xcbeyond/golangLearning/tree/main/framework/gin-demo/route/basic/basic-route.go): ```go package main import ( "net/http" "github.com/gin... 展开更多
背景 Vue 3 正式发布距今已经快一年了,相信很多小伙伴已经在生产环境用上了 Vue 3 了。如今,Vue.js 3.2 已经正式发布,而这次 minor 版本的升级主要体现在源码层级的优化,对于用户的使用层面来说其实变化并不大。其中一个吸引我的点是提升了响应式的性能: More efficient ref implementation (~260% faster read / ~50% faster write) ~40% faster dependency tracking ~17% less memory usage 翻译过来就是 ref API 的读效率... 展开更多
异常就是程序出现了意料之外的情况,影响了程序最终的呈现结果。所以我们开发的时候就非常有必要未雨绸缪,进行异常监控,以应对突如其来的问题 既可以增强用户体验,我们开发者也能远程定位问题,尤其是移动端 尽管对 JS 而言,异常一般只会使当前执行的任务中止,基本不会导致崩溃 可异常监控却是一个完善的前端方案必须具备的 接下来就针对我们前端,需要做的异常一一说明 异常监控 JS 执行异常 使用try-catch的话捕捉不到具... 展开更多
前言 组合式 API 是 vue3 提出的一个新的开发方式,而在 vue2 中我们可以使用新的组合式 API 进行组件开发。本篇通过一个例子,来分析这个插件是如何提供功能。 关于该插件的安装、使用,可以直接阅读文档。 安装 我们从最开始安装分析,一探究竟。 vue.use 按照文档所提到的,我们必须通过 Vue.use() 进行安装: // vue.use 安装 import Vue from 'vue' import VueCompositionAPI from '@vue/composition-api' Vue.use(VueC...... 展开更多
昨天在文章《JavaScript中的 async 和 await》中简单的介绍了其使用方法。那么 async 和 await 如何工作,如何正确的使用 async 和 await 。 什么是 async 和 await ? 简单来说,它们是 promise 嵌套的语法糖,来看一个实例: async function helloAsync() { const result = await new Promise((resolve) => setTimeout(() => resolve("Hello")) ); console.log(result); // Hello } helloAsync()...... 展开更多
编者按 写在前面的话 在介绍本篇文章的时候,先说一下本篇文章的一些背景。笔者是基于公司的基础建设哆啦 A 梦(Doraemon) (https://github.com/DTStack/doraemon)一些功能背景写的这篇文章。不了解或者有兴趣的同学可以去袋鼠云 (https://github.com/DTStack) 的 github 下面了解一下百宝箱哆啦 A 梦。 在哆啦 A 梦中可以配置代理,我们在配置中心的配置详情下,可以找到主机对应的 nginx 配置文件或者其他文件,可以在这里对... 展开更多
一 前言 今天我们来深度分析一下 Commonjs 和 Es Module,希望通过本文的学习,能够让大家彻底明白 Commonjs 和 Es Module 原理,能够一次性搞定面试中遇到的大部分有关 Commonjs 和 Es Module 的问题。 老规矩我们带上疑问开始今天的分析🤔🤔🤔: 1 Commonjs 和 Es Module 有什么区别 ? 2 Commonjs 如何解决的循环引用问题 ? 3 既然有了 exports,为何又出了 module.exports ? 既生瑜,何生亮 ? 4 require 模块查找机... 展开更多
Javascript变量函数声明提升(Hoisting)是在 Javascript 中执行上下文工作方式的一种认识(也可以说是一种预编译),从字面意义上看,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,在代码里的位置是不会动的,而是在编译阶段被放入内存中会和代码顺序不一样。变量函数声明提升虽然对于实际编码影响不大,特别是现在ES6的普及,但作为前端算是一个基础知识,必须掌握的,是很多大厂的前端面试必问的知识... 展开更多