移动、前端、小程序、跨端……大前端领域百花争鸣,把握大前端未来的方向,关注科技企业的大前端实践,在这里看到大前端的前沿。

加载中
置顶
程序员
发表了博客
2021/09/24 18:14

从浏览器渲染层面解析css3动效优化原理

## 引言 在h5开发中,我们经常会需要实现一些动效来让页面视觉效果更好,谈及动效便不可避免地会想到动效性能优化这个话题: * 减少页面DOM操作,可以使用CSS实现的动效不多出一行js代码 * 使用绝对定位脱离让DOM脱离文档流,减少页面的重排(relayout) * 使用CSS3 3D属性开启硬件加速 那么,CSS3与动效优化有什么关系呢,本文将从浏览器渲染层面讲述CSS3的动效优化原理 ## 浏览器页面展示过程 首页,我们需要了解一下浏览器的页面... 展开更多

收藏 16
3
置顶
后端工程师
发表了博客
2021/09/12 21:15

高级UI之Canvas深度分析—变换技巧,状态保存

前言 在前面我们把Paint关于UI颜色样式的处理进行了学习, 其实真正高级部分就是三个点,渲染,滤镜,图形组合,而我们图形绘制比较重要的另一个对象Canvas也是需要我们去重点掌握的,那么这次咱们来进行Canvas的深层次的学习,主要了解有两个点 Canvas的变换使用技巧 Canvas的状态,Canvas Layer 1.Canvas基本概念 直面意思是画布,其实是分装的一个工具类(绘制会话,用来和底层沟通最终交给底层绘制),一个Canvas类对象有四大基... 展开更多

收藏 2
0
置顶
发表了博客
2021/09/02 19:48

从lowcode看下一代前端应用框架

导读: 自从angular/react/vue的出现颠覆了前端开发者开发模式以来,虽然新的前端框架依然不断涌现,但是迟迟没有一个新的前端框架进入广大前端开发者的视野。本文会从近两年越来越火的lowcode/微前端出发,探讨在传统前端领域,下一代前端工程/框架的可能方向。 全文3166字,预计阅读时间 6分钟。 01 lowcode lowcode 其实一点也不新,通过 GUI、配置化的方式代替传统的手写代码编程,从sql语句到dreamweaver,基于模型驱动的可... 展开更多

收藏 5
1
置顶
发表了博客
2021/09/03 14:56

Vue系列之常见内存泄漏定位与解决

JavaScript 有完善的内存处理机制,能自动进行垃圾回收,但是假如一个对象一直被引用,他的内存是无法得到释放的。如果项目运行过程中,内存占用越来越高,只增不减,没有峰值,就存在内存泄漏。多页应用我们可以通过页面刷新缓解,但是对于服务端渲染和单页应用则需要重点关注内存泄漏问题。本文主要以Vue单页应用展开,因为在 SPA 的设计中,用户使用它时是不需要刷新浏览器的,所以 JavaScript 应用需要自行清理组件来确保垃... 展开更多

收藏 10
0
置顶
发表了博客
2021/08/27 21:07

ES5的继承和ES6的继承有什么区别?让Babel来告诉你

如果以前问我`ES5`的继承和`ES6`的继承有什么区别,我一定会自信的说没有区别,不过是语法糖而已,充其量也就是写法有区别,但是现在我会假装思考一下,然后说虽然只是语法糖,但也是有点小区别的,那么具体有什么区别呢,不要走开,下文更精彩! 本文会先回顾一下`ES5`的寄生组合式继承的实现,然后再看一下`ES6`的写法,最后根据`Babel`的编译结果来看一下到底有什么区别。 # ES5:寄生组合式继承 `js`有很多种继承方式,比如... 展开更多

收藏 3
0
置顶
发表了博客
2021/08/24 09:56

从lowcode看下一代前端应用框架

**导读**:自从angular/react/vue的出现颠覆了前端开发者开发模式以来,虽然新的前端框架依然不断涌现,但是迟迟没有一个新的前端框架进入广大前端开发者的视野。本文会从近两年越来越火的lowcode/微前端出发,探讨在传统前端领域,下一代前端工程/框架的可能方向。 _全文3166字,预计阅读时间 6分钟。_ **一、lowcode** ============= lowcode 其实一点也不新,通过 GUI、配置化的方式代替传统的手写代码编程,从sql语句到dre... 展开更多

收藏 1
0
置顶
发表了博客
2021/08/20 10:40

深入解析基于 Flutter 的 Web 渲染引擎「北海 Kraken 」技术原理

## 写在前面 大家好,我是[染陌](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:... 展开更多

收藏 4
1
置顶
发表了博客
2021/08/17 14:49

5 分钟搞懂面试官必问 React 题

说说对 React Hooks 的理解?解决了什么问题? 一、是什么 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 至于为什么引入hook,官方给出的动机是解决长时间使用和维护react过程中常遇到的问题,例如: 难以重用和共享组件中的与状态相关的逻辑 逻辑复杂的组件难以开发与维护,当我们的组件需要处理多个互不相关的 local state 时,每个生命周期函数中可能会包含着各种互不... 展开更多

收藏 2
0
置顶
架构师
发表了博客
2021/08/15 14:42

Web框架Gin | Gin 路由

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... 展开更多

收藏 2
0
置顶
发表了博客
2021/08/13 10:48

细说 Vue.js 3.2 关于响应式部分的优化

背景 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 的读效率... 展开更多

收藏 3
3
置顶
发表了博客
2021/08/13 09:53

前端异常监控和容灾

异常就是程序出现了意料之外的情况,影响了程序最终的呈现结果。所以我们开发的时候就非常有必要未雨绸缪,进行异常监控,以应对突如其来的问题 既可以增强用户体验,我们开发者也能远程定位问题,尤其是移动端 尽管对 JS 而言,异常一般只会使当前执行的任务中止,基本不会导致崩溃 可异常监控却是一个完善的前端方案必须具备的 接下来就针对我们前端,需要做的异常一一说明 异常监控 JS 执行异常 使用try-catch的话捕捉不到具... 展开更多

收藏 5
1
置顶
发表了博客
2021/08/12 11:04

@vue/composition-api 解析

前言 组合式 API 是 vue3 提出的一个新的开发方式,而在 vue2 中我们可以使用新的组合式 API 进行组件开发。本篇通过一个例子,来分析这个插件是如何提供功能。 关于该插件的安装、使用,可以直接阅读文档。 安装 我们从最开始安装分析,一探究竟。 vue.use 按照文档所提到的,我们必须通过 Vue.use() 进行安装: // vue.use 安装 import Vue from 'vue' import VueCompositionAPI from '@vue/composition-api' Vue.use(VueC...... 展开更多

收藏 1
0
置顶
个人站长
发表了博客
2021/08/10 21:00

从 async 和 await 函数返回值说原理

昨天在文章《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()...... 展开更多

收藏 5
1
置顶
发表了博客
2021/08/10 05:26

介绍下 BFC 布局规则,除此之外,你还知道哪些 CSS 格式化上下文?

## BFC 布局规则 ### 什么是 BFC 既 Block Formatting Context(块级格式化上下文),是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。 ### BFC 的触发条件 > Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except... 展开更多

收藏 1
1
置顶
发表了博客
2021/07/27 13:50

技术干货 |看我如何来解Web Terminal假性输入框

编者按 写在前面的话 在介绍本篇文章的时候,先说一下本篇文章的一些背景。笔者是基于公司的基础建设哆啦 A 梦(Doraemon) (https://github.com/DTStack/doraemon)一些功能背景写的这篇文章。不了解或者有兴趣的同学可以去袋鼠云 (https://github.com/DTStack) 的 github 下面了解一下百宝箱哆啦 A 梦。 在哆啦 A 梦中可以配置代理,我们在配置中心的配置详情下,可以找到主机对应的 nginx 配置文件或者其他文件,可以在这里对... 展开更多

收藏 2
0
置顶
发表了博客
2021/08/07 15:57

聊聊TypeScript类型声明那些最佳实践

![头图](https://oscimg.oschina.net/oscnet/up-5ffc16506ceddfa0810c8c0777d65a743ff.png) TypeScript 诞生已久,优缺点大家都知晓,它可以说是JavaScript静态类型校验和语法增强的利器,为了更好的代码可读性和可维护性,我们一个个老工程都坦然接受了用TypeScript 重构的命运。然而在改造的过程中,逐步意识到TypeScript这门语言的艺术魅力 人狠话不多,下面我们先来聊一下 TypeScript 类型声明相关的技巧: ## 先了解TypeS... 展开更多

收藏 1
0
置顶
发表了博客
2021/08/09 09:37

深入了解 Commonjs 和 Es Module

一 前言 今天我们来深度分析一下 Commonjs 和 Es Module,希望通过本文的学习,能够让大家彻底明白 Commonjs 和 Es Module 原理,能够一次性搞定面试中遇到的大部分有关 Commonjs 和 Es Module 的问题。 老规矩我们带上疑问开始今天的分析🤔🤔🤔: 1 Commonjs 和 Es Module 有什么区别 ? 2 Commonjs 如何解决的循环引用问题 ? 3 既然有了 exports,为何又出了 module.exports ? 既生瑜,何生亮 ? 4 require 模块查找机... 展开更多

收藏 9
1
置顶
个人站长
发表了博客
2021/08/07 19:21

悟透前端:加深 Javascript 变量函数声明提升理解

Javascript变量函数声明提升(Hoisting)是在 Javascript 中执行上下文工作方式的一种认识(也可以说是一种预编译),从字面意义上看,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,在代码里的位置是不会动的,而是在编译阶段被放入内存中会和代码顺序不一样。变量函数声明提升虽然对于实际编码影响不大,特别是现在ES6的普及,但作为前端算是一个基础知识,必须掌握的,是很多大厂的前端面试必问的知识... 展开更多

收藏 0
0
置顶
个人站长
发表了博客
2021/08/06 22:59

JavaScript代码片段学设计模式

设计模式是任何优秀软件的基础,JavaScript 也不例外,学习设计模式,让你对代码组织多一些思路,通过代码片段来学习编码思路对于开发者来说是比较容易理解的,本文继续通过代码片段简单展示常见的设计模式,但不深入设计模式本身,在此推荐一本书《JavaScript设计模式》,通俗易懂,阅读完之后可以大幅提升编码水平。 构造函数模式 构造函数(Constructor Pattern)作为初始化具有特定属性和方法的对象的函数。构造器模式类似于... 展开更多

收藏 5
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
返回顶部
顶部
返回顶部
顶部