前端出发能走多远——写在前面

2022 年 11 月 15 日,虽然在意料之中,但是靴子终于落地了:我们被裁了。互联网的寒冬肆意呼啸,冰冻了一批又一批人,大环境下能苟活已经很不错了。没有冰冻到你时,你觉得自己是寒冬的旁观者,寒冬降临到你头上时,你才感受到切肤之痛,这就是我当时真实的感受。当然,造成的影响就是北漂生活就此结束,我换了一个城市工作和生活。

如今,2023 年 11 月,一年时间很快过去,我的工作生活相对稳定了。虽然当前的工作与技术相关,但是深度和广度要求不高,担心多年的技术底子最终无用武之地,也担心知识随着时间的推移终究淡忘。于是,我下定决心,要把技术记录下来。

既然已经决定记录,问题便接踵而至:以什么形式的去记录?围绕什么主题展开?既然自我标榜是一名“前端”开发者,那我就从前端入手,同时,我又觉得如果仅仅是前端知识终究圈定了范围,属实是画地为牢了,那么一定要涉及一些前端之外的东西。于是,我定了一个专题前端出发能走多远:从前端开始,不忘记自己是一个前端开发者,它奠定了我的技术低调,“远”体现了两层含义:一是我的技术能挖掘多深,二是我的视界有多大,在深挖的过程中,我能否 360° 全面旋转。我觉得这个工作就好比挖土,挖得多深是离地深度,挖得得宽是土方体积,前者决定层次,后者决定质量。

希望这是一个很好的专题。这是在为自己打气,也在为我自己定目标。

言及至此,我有必要介绍一下我自己和我的前端之路。12 年毕业之后,开启“北漂”之路,从java web开始,2 年时间入了 web 之门,同时也埋下了全栈的执念(那时候也确实没有全栈的说法)。之后加入一家做搜索引擎的公司,参与搜索前端,这是我的技术的快速成长期,我确实体会到技术的乐趣,我能每天汲取新的知识,上午学习,下午处理工作,甚至有时连中午吃饭都是耽误的。之后,加入了一个视频网站,时间不长,却花了比较多的在构建工具的建设。再之后又回到之前的搜索引擎的公司,参与搜索结果的落地页建设,我开始思考如何从 0 到 1 去构建工程,更多的参与一些前端工程化的工作。疫情之后,我来了北漂之行的最后一家公司——所谓的某厂,在这里我可以以更大更广的视角去审视前端页面和前端工程,将前后端彻底打通,微前端低代码前后端同构云原生大数据等概念和实践轮番登场,确实让我看到了大厂的深厚底蕴。

很幸运,我赶上了互联网浪潮的涨潮。从 jQuery 一统天下到 React、Vue、Angular 三分帝国,而今后起之秀 Svelte、Solid 的加入,外部环境不管如何,前端的技术迭代周期已经打开,而且战况预发激烈。分析上述各框架的内在,jQuery 的直接操作 DOM 变得越来越不被接受,通过数据驱动才是取胜之道,但是虚拟 DOM 存在性能损失,让后来者 Svelet 和 Solid 之流又不得不考虑重新回归到直接操作 DOM,所幸历史只是轮回并没有开倒车,开发者依然只需关注数据流动(变化)。

由此看来,前端技术本质上是依托基本技术原理的上下波动,在激进和保守之间徘徊。比如当年前后端分离如火如荼,边界划分如边境的争夺——寸土必争,前端工程师好不容易逃脱 JSP、ASP、PHP 等动态语言的掌控。然而多年以后,前后端同构仿佛又让一切回到原点,所幸的是这次的主角是 Node.js——使用 javascript 作为编程语言。所以依然是前后端的分、前后端的合,究其原因可能也仅仅是四个字——降本增效。

在很多人来看来,前端就是一个画页面做交互的。我不能说这个说法错误,只能说这个说法只看到了冰山之一角。前端后端之区分本质上是一个边界的划分,前端更加专注于快速的页面呈现和极致的交互体验。这里面我提到了两个关键字:快速极致,简单来说如何把页面效果快速的呈现给用户,这个用户对于产品的第一印象,之后如何保证丝滑的体验。这是用户所能体验和感受到的,但其内部确实有很多的技术细节,简单列举一下:

  • 页面资源如何加载?资源又如何组织?如何生成?
  • 如何快速加载资源?如何快速实现首屏渲染以减少白屏时间?
  • 如何设计页面主题风格,按钮风格?如何设计动画效果?
  • 如何持续优化用户体验?如何确保不同展现终端的一致体验?
  • 数据怎么流动?页面行为如何组织?
  • 如何确保网站的稳定性?如何保证部署的稳定性?

看似一个个简单的页面,背后有这复杂的体系支撑。前端不仅仅是页面的实现,还包括围绕页面的周边技术,从一个页面出发,所能扩展的全部边界。

此刻,我想着我的专题前端出发能走多远,希望对那些入了坑和还未入坑的人有所帮助,我们共同走得更远!

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

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

相关文章

教室管理系统的开发与实现(Java+MySQL)

引言 教室管理系统是学校和培训机构日常运营中不可或缺的工具。本文将介绍如何使用Java、Swing GUI、MySQL和JDBC开发一个简单而有效的教室管理系统,并涵盖系统的登录认证、教室管理、查询、启用、暂停和排课管理功能。 技术栈介绍 Java:作为主要编程…

实战项目:仿muduo库实现并发服务器

目录 项目初始与项目演示HTTP服务器基础认识Reactor模式基础认识单Reactor单线程模式认识单Reactor多线程模式认识多Reactor多线程模式认识 目标定位总体大模块划分server模块的管理思想Buffer子模块Socket子模块Channel子模块Connection子模块Acceptor子模块TimerQueue子模块P…

FinClip 率先入驻 AWS Marketplace,加速全球市场布局

近日,凡泰极客旗下的小程序数字管理平台 FinClip 已成功上线亚马逊云科技(AWS)Marketplace。未来,FinClip 将主要服务于海外市场的开放银行、超级钱包、财富管理、社交电商、智慧城市解决方案等领域。 在全球市场的多样性需求推动…

Spring Boot应用的配置文件(application.properties或application.yml)指定应用连接MySQL数据库

<!-- MyBatisMysql 5添加依赖--><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>1.1.1</version></dependency><dependency><groupId…

免费视频批量横转竖

简介 视频处理器 v1.3 是一款由是貔貅呀开发的视频编辑和处理工具&#xff0c;提供高效便捷的视频批量横转竖&#xff0c;主要功能&#xff1a; 导入与删除文件&#xff1a;轻松导入多个视频文件&#xff0c;删除不必要的文件。暂停与继续处理&#xff1a;随时暂停和继续处理。…

快速了解死锁及如何解决死锁问题

目录 什么是死锁&#xff1f; 死锁代码示例 产生死锁的条件&#xff1a; 死锁的危害&#xff1a; 如何解决死锁问题&#xff1f; 1、预防死锁&#xff08;破坏上述4个产生死锁的条件&#xff09;&#xff1a; 2、银行家算法 3、死锁的检测、解除 4、采用超时机制 什么…

JMeter介绍、安装配置以及快速入门

文章目录 1. JMeter简介2. JMeter安装配置3. JMeter快速入门 1. JMeter简介 Apache JMeter是一款开源的压力测试工具&#xff0c;主要用于测试静态和动态资源&#xff08;如静态文件、服务器、数据库、FTP服务器等&#xff09;的性能。它最初是为测试Web应用而设计的&#xff…

[C++]优先级队列

1 .了解优先级队列 优先级队列是一种容器适配器&#xff0c;根据一些严格的弱排序标准&#xff0c;专门设计使其第一个元素始终是它所包含的元素中最大的元素。 此上下文类似于堆&#xff0c;其中可以随时插入元素&#xff0c;并且只能检索最大堆元素&#xff08;优先级队列中顶…

基于ffmepg的视频剪辑

1.ffmpeg命令实现视频剪辑 FFmpeg是一个非常强大的视频处理工具&#xff0c;可以用来剪辑视频。以下是一个基本的FFmpeg命令行示例&#xff0c;用于剪辑视频&#xff1a; $ ffmpeg -i ./最后一滴水.mp4 -ss 0:0:20 -t 50 -c copy output.mp4-i ./最后一滴水.mp4 输入文件  …

小试牛刀-区块链WalletConnect协议数据解密

目录 1.编写目的 2.工作原理 3.分析过程 3.1 websokcet连接 3.2 连接后的消息 3.3 获取sym_key 3.4 解密数据 Welcome to Code Blocks blog 本篇文章主要介绍了 [WalletConnect协议数据解密] ❤博主广交技术好友&#xff0c;喜欢文章的可以关注一下❤ 1.编写目的 最近在…

matlab y = 1/√x图像和y = 1/x图像

matlab y 1/√x图像和y 1/x图像 y 1/√x与y 1/x绘制结果y√x y 1/√x与y 1/x clc, clear, close all; length 3; axis_len 5;% Create a range of x values x linspace(0.01, length^2, 1000); % Avoid x 0 for 1/√x% Compute the corresponding y values y1 1 .…

链路聚合概述

目录 技术背景&#xff1a; 基本概念&#xff1a; 链路聚合的工作模式&#xff1a; 简介&#xff1a; 1&#xff09;Manual Load-balance&#xff08;手动负载分担&#xff09; 简介&#xff1a; 配置实施&#xff1a; 2&#xff09;LACP&#xff08;链路聚合控制协议&#xff…

银行业务知识全篇(财务知识、金融业务知识)

第一部分 零售业务 1.1 储蓄业务 4 1.1.1 普通活期储蓄(本外币) 4 1.1.2 定期储蓄(本外币) 5 1.1.3 活期一本通 9 1.1.4 定期一本通 10 1.1.5 电话银行 11 1.1.6 个人支票 11 1.1.7 通信存款 13 1.1.8 其他业务规…

守护动物乐园:视频AI智能监管方案助力动物园安全与秩序管理

一、背景分析 近日&#xff0c;某大熊猫参观基地通报了4位游客在参观时&#xff0c;向大熊猫室外活动场内吐口水的不文明行为。这几位游客的行为违反了入园参观规定并可能对大熊猫造成严重危害&#xff0c;已经被该熊猫基地终身禁止再次进入参观。而在此前&#xff0c;另一熊猫…

Go: IM系统技术架构梳理 (2)

概述 整个IM系统的一般架构如下 我们这张图展示了整个IM系统的一般架构可见分为四层那最上面这一层是前端&#xff0c;包括哪些东西呢&#xff1f; 它包括两部分&#xff0c;第一部分是跟用户直接交互的比如说各种IOS APP, 各种安卓 APP还有各种 web APP 在浏览器里面打开的以…

python编程技巧——list计算

1. 两个列表间运算 在Python中&#xff0c;如果你有两个同长度的列表&#xff0c;并且你想要对它们进行元素级别的相减&#xff08;即&#xff0c;第一个列表的每个元素减去第二个列表的对应元素&#xff09;&#xff0c;你可以使用列表推导式或者zip函数来实现。 以下是两种…

centos(或openEuler系统)安装clickhouse集群

192.168.9.60、192.168.9.63、192.168.9.64三台centos&#xff08;或openEuler系统&#xff09;安装clickhouse集群&#xff08;数据分散&#xff0c;不是1主2备&#xff09; 一、安装clickhouse集群 以下操作在每台机器上一摸一样的执行&#xff1a; 关闭防火墙&#xff1a…

WebGL-编译报错,如何定位sendfile报错位置

1&#xff09;WebGL-编译报错&#xff0c;如何定位sendfile报错位置 2&#xff09;设置DepthBufferBits和设置DepthStencilFormat的区别 3&#xff09;Unity打包exe后&#xff0c;游戏内拉不起Steam的内购 4&#xff09;使用了Play Asset Delivery提交版本被Google报错 这是第3…

【Qt+opencv】计时函数与图像变换

文章目录 前言计算时间函数图像变换旋转镜像缩放 总结 前言 在图像处理和计算机视觉的应用中&#xff0c;我们经常需要对图像进行各种变换&#xff0c;如旋转、缩放、剪切等。同时&#xff0c;为了评估算法的性能&#xff0c;我们也需要对代码的执行时间进行精确的测量。OpenC…

前端组件化技术实践:Vue自定义顶部导航栏组件的探索

摘要 随着前端技术的飞速发展&#xff0c;组件化开发已成为提高开发效率、降低维护成本的关键手段。本文将以Vue自定义顶部导航栏组件为例&#xff0c;深入探讨前端组件化开发的实践过程、优势以及面临的挑战&#xff0c;旨在为广大前端开发者提供有价值的参考和启示。 一、引…