2024年Web前端最全解密腾讯前端技术体系(1),一起看看这些大厂面试真题查漏补缺吧

css

1,盒模型
2,如何实现一个最大的正方形
3,一行水平居中,多行居左
4,水平垂直居中
5,两栏布局,左边固定,右边自适应,左右不重叠
6,如何实现左右等高布局
7,画三角形
8,link @import导入css
9,BFC理解

js

1,判断 js 类型的方式
2,ES5 和 ES6 分别几种方式声明变量
3,闭包的概念?优缺点?
4,浅拷贝和深拷贝
5,数组去重的方法
6,DOM 事件有哪些阶段?谈谈对事件代理的理解
7,js 执行机制、事件循环
8,介绍下 promise.all
9,async 和 await,
10,ES6 的 class 和构造函数的区别
11,transform、translate、transition 分别是什么属性?CSS 中常用的实现动画方式,
12,介绍一下rAF(requestAnimationFrame)
13,javascript 的垃圾回收机制讲一下,
14,对前端性能优化有什么了解?一般都通过那几个方面去优化的?

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

腾讯云还提供了关于视频直播、短视频、网络安全、大数据可视化平台、小程序云开发解决方案、测试服务、监控服务等等能力、极光推送等等能力。

其中,HTTPDns解析服务提供了稳定中立的第三方DNS解析服务,有效的解决了DNS劫持、DNS解析速度等问题,可以有效提升用户体验。

极光推送更是作为国内移动APP推送的主要解决方案,集成了iOS、Android的推送能力,解决了国内Android机型分散,缺乏统一的推送能力的问题,具备了每日数亿信息量的处理能力和极高的到达率。

4 小程序

=========

微信小程序

微信小程序在2017年推出,是一种不用下载就能使用的应用,已经构造了新的小程序开发环境和开发者生态。现在已经有超过150万的开发者加入到了小程序的开发,小程序应用数量超过了一百万,覆盖200多个细分的行业,日活用户达到两个亿。

微信小程序是一个真正现象级的平台型产品,改变了许多人使用App的方式。而且随着微信小程序的成功,各大互联网厂商都开始开发各自平台的小程序,同时手机厂商也联合起来开发快应用平台。

小程序的渲染层和逻辑层分别由 2 个线程管理:渲染层的界面使用了 WebView 进行渲染,逻辑层采用 JsCore 线程运行 JS 脚本。

为什么要这么设计呢?前面提到的管控和安全,为了解决这些问题,我们需要阻止开发者使用一些浏览器提供的,诸如跳转页面、操作 DOM、动态执行脚本的开放性接口。

  • 逻辑层:创建一个单独的线程去执行 JavaScript,在这个环境下执行的都是有关小程序业务逻辑的代码

  • 渲染层:界面渲染相关的任务全都在 WebView 线程里执行,通过逻辑层代码去控制渲染哪些界面。一个小程序存在多个界面,所以渲染层存在多个 WebView 线程

同时,小程序的资源文件是下载到本地缓存进行加载、渲染、运行,类似于原生App中Hybrid离线包的方式,能够提供了非常好的性能体验。

wepy - 小程序组件化开发框架

原生小程序开发方式相对比较封闭,无法利用前端开发的完整体系生态,于是wepy就希望通过组件化、现代前端式的开发方式引入到小程序开发中。

WePY (发音: /'wepi/) 项目启动于 2017 年 11 月份, 是小程序最早的框架之一,是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions的引入都是为了能让开发小程序项目变得更加简单,高效。

特性:

  • 使用 Vue Observer 实现数据绑定

  • 支持 Vue watch/computed/mixin 等特性

  • 基于原生组件实现组件化开发

  • 支持 TypeScript

小程序开发框架目前在业界已经百花齐放,上图就是一个对比,可以看到对于小程序多端开发的诉求是非常高的,wepy对于小程序类型支持略显不足,同时也没有移动端容器支持的能力,但其在流行程度和组件丰富度上还是占据优势。

westore - 微信小程序解决方案

https://github.com/Tencent/westore

受 Omi 框架 的启发,且专门为小程序开发的 JSON Diff 库,所以有了 westore 全局状态管理和跨页通讯框架让一切尽在掌握中,且受高性能 JSON Diff 库的利好,长列表滚动加载显示变得轻松可驾驭。总结下来有如下特性和优势:

  • 和 Omi 同样简洁的 Store API

  • 超小的代码尺寸(包括 json diff 共100多行)

  • 尊重且顺从小程序的设计(其他转译库相当于反其道行)

  • 增强 data 数据绑定,函数属性可直接绑定到 WXML

  • this.update 和 setData 语法类似,但返回一个Promise

  • this.update 比原生 setData 的性能更优,更加智能

  • Westore 专为小程序插件开发定制了模板

  • Westore 集成了腾讯云开发

解决了小程序的痛点:

  • 使用 this.data 可以获取内部数据和属性值,但不要直接修改它们,应使用 setData 修改

  • setData 编程体验不好,很多场景直接赋值更加直观方便

  • setData 卡卡卡慢慢慢,JsCore 和 Webview 数据对象来回传浪费计算资源和内存资源

  • 组件间通讯或跨页通讯会把程序搞得乱七八糟,变得极难维护和扩展

5 UI组件库

===========

WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

WeUI提供了表单、基础组件、操作反馈、导航相关、搜索相关、层级规范等方面的组件库,下图就是部分表单、列表、选择器的组件示例。通过这套UI组件库,可以在微信Web生态中打造出和微信原生体验一致的界面风格,可以保证用户的体验。

腾讯云图

腾讯云图(Tencent Cloud Visualization,TCV) 是一站式数据可视化展示平台,旨在帮助用户快速通过可视化图表展示海量数据,10 分钟零门槛打造出专业大屏数据展示。精心预设多种行业模板,极致展示数据魅力。采用拖拽式自由布局,无需编码,全图形化编辑,快速可视化制作。腾讯云图支持多种数据来源配置,支持数据实时同步更新,同时腾讯云图基于 WEB 页面渲染,可灵活投屏多种屏幕终端。

6 跨平台

=========

Hippy - 多端一体化方案

Hippy 作为前终端的一体化方案,其拥抱W3C标准,通过自绘和源生混合绘图组件复用以追求极致性能,并不断接入实现更多优质组件。其已经在浏览器上应用了数十个内外部业务,承载了数十亿计的用户访问量,拿下了公司内部2018年年度代码文化奖。

对于多端一体化的研发方式,业界一直在探索,例如React Native、Weex实现了通过JS编写、Native渲染很好的平衡了研发效率和渲染效率,但是依旧无法直接实现Web/Native的多端一体化,因此依旧需要寻找一个框架可以在多端实现跨平台、高性能、动态化发布的开发解决方案。

项⽬目架构 Hippy SDK 采⽤用三层设计,其中:

  • JavaScript 层:提供业务代码运⾏行行时的前端上下⽂文环境;目前支持前端主流框架,例如React、Vue

  • C++ 层:JavaScript运行时接口的封装;任务调度器包含延迟任务、优先级管理、事件循环等等;提供基础 UI 组件与布局计算框架,并负责渲染⾄至⽬目标平台;

  • Native Framework 层:负责前终端通讯与 JavaScript VM,并提供 Native 相关模块;

从Hippy-React架构中可以看到其如何支持三端:

  • Web端:依赖Hippy-React-Web将Hippy React代码转换成React-Dom,然后再渲染到Web浏览器

  • Android/iOS:通过运行时的C++布局引擎对Hippy React代码进行解析得到类似React Element对象,里面会含有组件对象的基本属性(name/props/events等),再通过React-Reconciler进行转换成对应的FiberNode,然后再通过Native Renderer渲染出原生组件。

Hippy目前来看拥有以下特点:

  • 拥抱社区:即将开源,同时会紧跟W3C标准,将来开源后可能会有更多的社区去丰富其组件

  • 追求性能:采用Binding模式的前终端通讯方式,提升Web和Native之间的通信性能,同时基于C++的接口封装、任务调度、UI/布局计算框架等等,都达到了高性能渲染能力

  • 更多组件:支持Canvas、Lottie/PAG动画、腾讯地图

  • 设计适用:设计稿直出代码

omi - 前端跨端平台

Omi (读音 /ˈomɪ/,类似于 欧米) 是跨框架框架,基于 Web Components 设计,也可以使用相同语法的 omio 兼容 IE8+。支持 PC Web、移动 H5 和小程序开发(One framework, Mobile & desktop & mini program)。

相对于React或者Vue现在主流的前端框架而言,Omi有以下特点:

  • 4KB 的代码尺寸,比小更小

  • 顺势而为,顺从浏览器的发展和 API 设计,Webcomponents + JSX 相互融合为一个框架 Omi,Webcomponents 也可以数据驱动视图, UI = fn(data)

  • Shadow DOM 与 Virtual DOM 融合,Omi 既使用了虚拟 DOM,也是使用真实 Shadow DOM,让视图更新更准确更迅速

  • 类似 WeStore 体系,99.9% 的项目不需要什么时间旅行,也不仅仅 redux 能时间旅行,请不要上来就 redux,Omi store 体系可以满足所有项目

基于omi,现在已经有了一整套完整的生态支持:

  • omip:小程序和H5跨端开发

  • omix:小程序开发框架

最后

四轮技术面+一轮hr面结束,学习到了不少,面试也是一个学习检测自己的过程,面试前大概复习了 一周的时间,把以前的代码看了一下,字节跳动比较注重算法,面试前刷了下leetcode和剑指offer, 也刷了些在牛客网上的面经。大概就说这些了,写代码去了~

祝大家都能收获大厂offer~

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限,仅展示部分内容

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限,仅展示部分内容

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值