• uViewUI-同时支持APP/H5/小程序的多端UI框架

    知名多端开发框架 uni-app 生态里优秀的UI框架,一次编写,多端发布。 uView UI 是一个用于 uni-app 多端开发的优质 UI 组件库,由第三方爱好者的团队编写。介绍 uView UI 之前,先简单介绍一下 uni-app。uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以...

    前端技术 2020年11月20日 61 0
  • 6张图让你搞懂浏览器渲染网页过程

    我的想法:如果我要构建快速可靠的网站,需要真正了解浏览器渲染网页的每个步骤机制,这样就可以在开发过程中对每个步骤进行优化。这篇文章是我在较高水平上对端到端过程的学习总结。好了,废话不多说,我们开始吧。这个过程可以分为以下几个主要阶段:开始解析HTML获取外部资源解析 CSS 并构建CSSOM执行 JavaScript合并 DOM 和 CSSOM 以构造渲染树计算布局和绘制1.开...

    前端技术 2020年11月16日 57 0
  • 分享10个很实用的CSS的代码片段

    介绍以下是10个来自于网络收集的非常实用且重要的CSS代码片段CSS重置这是CSS浏览器重置的基本和常见的CSS代码段html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, co...

    前端技术 2020年11月15日 40 0
  • 可能是目前最强大的开源在线表格,不信你来看看

    现在在线的办公套件使用频率越来越高,不论是国外的Google 办公套件还是国内的石墨文档,金山文档等,都是很优秀的产品。开源领域里也有不少优秀的在线表格开源项目,那么今天所推荐的 Luckysheet 究竟有什么不同之处呢?那就继续往下看看吧。 项目名称:Luckysheet项目作者:mengshukeji开源许可协议:MIT项目地址:https://gitee.com/men...

    前端技术 2020年10月20日 118 0
  • 前端ES6中Promise的运行原理

    Promise的作用它是异步编程的一种方式,它比传统的异步回调和事件更合理也更优雅!从Promise的使用中能看出什么?首先我们手写一个常见的使用方式//demo1new Promise(function (resolve, reject) { resolve('123')}).then(function (value) { return value;}).then(funct...

    前端技术 2020年10月12日 145 0
  • 学会常见的配色原理,再也不怕后期调色啦

    调色是大家学习摄影后期时的一大难题。其根源并不在于我们不明白各种调色工具的使用,而是大家常常缺乏思路,不知道怎样搭配色彩才舒服、好看。 其实在色彩的搭配上,美术、设计等学科,早已探索出了很多的规律,可以被我们摄影师借鉴学习。 要学习色相的搭配,首先要认识RYB色环(又叫伊顿12色相环),这个色环是以红黄蓝这三种颜色为原色的色环。色环上一共有12种主要颜色。在0度位置是黄色,12...

    前端技术 2020年08月05日 288 0
  • WebSocket心跳检测和重连机制

    1. 心跳重连原由心跳和重连的目的用一句话概括就是客户端和服务端保证彼此还活着,避免丢包发生。websocket连接断开有以下两种情况:前端断开在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时关闭,这时候websocket的连接已经断开,而不同浏览器有不同的机制,触发onclose的时机也不同,并不会理想执行websocket的onclose...

    前端技术 2020年07月29日 689 0
  • 细说websocket快速重连机制

    引言在一个完善的即时通讯应用中,websocket是极其关键的一环,它为web应用的客户端和服务端提供了一种全双工的通信机制,但由于它本身以及其底层依赖的TCP连接的不稳定性,开发者不得不为其设计一套完整的保活、验活、重连方案,才能在实际应用中保证应用的即时性和高可用性。就重连而言,其速度严重影响了上层应用的“即时性”和用户体验,试想打开网络一分钟后,微信还不能收发消息的话,是...

    前端技术 2020年07月28日 345 0
  • 前端flex布局基础学习教程

    FlexiableBox即是弹性盒,用来进行弹性布局,一般跟rem(rem伸缩布局(转))连起来用比较方便,flexbox负责处理页面布局,然后rem处理一些flex顾及不到的地方(rem伸缩布局主要处理尺寸的适配问题),布局还是要传统布局的。flex-插图1布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非...

    前端技术 2020年07月06日 355 0
  • 在bootstrap中col-md-offset-*不起作用

    在bootstrap中,使用col-md-offset-1、col-md-offset-2、col-md-offset-3、col-md-offset-4等来设置偏移量很常见,但最近就遇到一个问题了,在最新版的bootstrap4.5中,这个值不起作用了。

    前端技术 2020年06月28日 583 0
  • Bootstrap3和Bootstrap4有哪些区别

    Bootstrap3和Bootstrap4区别首先引入Bootstrap3和4官网连接; Bootstrap3 VS Bootstrap4.不同点Bootstrap3/Bootstrap4Less/Sass语言编写4种栅格类/5种栅格类使用px为单位/使用rem和em为单位(除部分margin和padding使用px)使用push和pull向左右移动/偏移列通过offset-类...

    前端技术 2020年06月20日 557 0
  • 深入理解浏览器的缓存机制

    一、前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,那么...

    前端技术 2020年06月17日 390 0
  • 你的Input框还有很多有趣的功能等着你去展现

    <input /> 标签是我们日常开发中非常常见的替换元素了,但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性,选择器都没怎么用过,所以就开篇文章来整理一下一些比较有趣或者实用的知识点。本篇文章默认大家已经知道 <input /> 标签的基本用法,不会做过多的基础说明~没想到,这些选择器居然跟 i...

    前端技术 2020年05月02日 445 1
  • 带你看懂 HMR 热更新原理

    现在的我们基本上都是使用 webpack 模式开发,修改了代码之后,页面会直接进行改变,但是很少有人想过,为什么页面不刷新就会直接改变了?初识 HMR 的时候,觉得神奇的同时,脑海中一直有一些疑问:一般来说, webpack 会将不同的模块打包成不同 bundle 或 chunk 文件, 但是在使用 webpack 进行 dev 模式开发的时候,我并没有在我的 dist 目录中...

    前端技术 2020年04月27日 565 0
  • nodejs真的是单线程吗?

    一、多线程与单线程像java、python这个可以具有多线程的语言。多线程同步模式是这样的,将cpu分成几个线程,每个线程同步运行。而node.js采用单线程异步非阻塞模式,也就是说每一个计算独占cpu,遇到I/O请求不阻塞后面的计算,当I/O完成后,以事件的方式通知,继续执行计算2。事件驱动、异步、单线程、非阻塞I/O,这是我们听得最多的关于nodejs的介绍。看到上面的关键...

    前端技术 2020年04月26日 422 0
  • CSS实用技巧第一讲:文字处理

    前言作为程序员的我们,书写代码也需要大量的技巧。一份良好的代码能让人耳目一新,让人容易理解,同时也让自己成就感满满。因此,在这里简单的整理一些CSS开发技巧,希望能让你写出耳目一新、容易理解、舒服自然的代码。CSS实用技巧第一讲:文字处理本小结主要是围绕css对文字处理的技巧,有兴趣的小伙伴可以收藏一下。文本对齐方式CSS最常用的对齐方式,居中对齐、左对齐(默认)、右对齐,而且...

    前端技术 2020年04月26日 317 0
  • web 图像技术:前端引入图片的各种方式及其优缺点

    前端开发人员在构建网站时需要做的一个决定是引入图片的方式。它可以是<img>标签,或者是通过CSS background 属性,还可以使用 SVG<image>。选择正确的方式是很重要的,它对性能和可访问性有很大的影响。在本文中,我们会学习引入图像的各种方式,以及每种方式的优点和缺点,以及何时使用和为什么使用它们。HTML img 元素最简单的情况下,i...

    前端技术 2020年04月23日 394 0
  • 移动端页面开发

    了解移动端页面与PC端页面开发的区别,学习移动端页面的开发流程。移动端与PC端页面布局区别视口视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种情况,移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看,可以用 meta 标签,...

    前端技术 2020年04月20日 391 0
  • ES6的20个问题,你都会吗?

    一、问:ES6是什么,为什么要学习它,不学习ES6会怎么样?答: ES6是新一代的JS语言标准,对分JS语言核心内容做了升级优化,规范了JS使用标准,新增了JS原生方法,使得JS使用更加规范,更加优雅,更适合大型应用的开发。学习ES6是成为专业前端正规军的必经之路。不学习ES6也可以写代码打鬼子,但是最多只能当个游击队长。二、问:ES5、ES6和ES2015有什么区别?答: E...

    前端技术 2020年04月19日 308 0
  • 史上最强大的 CSS 布局方案学习笔记

    网格布局(Grid)是最强大的 CSS 布局方案。它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。上图这样的布局,就是 Grid 布局的拿手好戏。Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目...

    前端技术 2020年04月17日 355 0
  • 复制粘贴,一气呵成的Web前端正则工具函数

    前言以下内容大多来自互联网总结,和一些自定日常收集的正则函数。希望能给各位前端老铁们带来帮助,毕竟工具函数这种东西,就是增加开发效率。独乐乐不如众乐乐~正文验证股票代码(A股)/** * @param { string } value */export const isAShare = value => /^(s[hz]|S[HZ])(000[\d]{3}|002[\d...

    前端技术 2020年04月16日 1067 0
  • 开源的自定义表单设计器基础源码,PC端+移动端

    介绍 自定义表单设计器,这是一个现代化应用中一个加分的模块,目前很多大型的系统都会存在很多表单,针对不同的客户,可能表单都会不一样,而且不够灵活,可能针对不同的场景都得去定制化的开发很多不一样的表单,因此现在很多大型应用程序都提供了自定义表单的功能,今天就为大家介绍一些在github上发现的比较符合需求的基本实现,需要自己配合后台,但是最难的部分,也就是前端设计器的部分基本上...

    前端技术 2020年04月14日 2872 0
  • 作为前端工程师你真的知道 npm install 原理么?

    做前端工程师得你,一定经常会使用到npm install,那你真的了解npm install 执行之后的流程细节么? 嵌套结构 我们都知道,执行 npm install 后,依赖包被安装到了 node_modules ,下面我们来具体了解下,npm 将依赖包安装到 node_modules 的具体机制是什么。 在 npm 的早期版本, npm 处理依赖的方式简单粗暴,以递归的...

    前端技术 2020年04月13日 485 0
  • 详解CSS是如何表示颜色的——RGB原理

    原理用了很长时间的RGB方式来作为CSS中的颜色样式,却不知道它是什么原理,据说这还是一道面试题,这篇文章就用来总结一下它的原理。我们生活中最常见的光就是太阳光,据说在1672年牛顿用三棱镜将太阳光分离成了赤橙黄绿蓝紫青七色光。随着科技的进步,人们发现肉眼细胞对红绿蓝三种颜色较为敏感,而且这三种颜色按照不同比例混合会制造出很多其他的颜色,比如7色光中的其他4种颜色就可以用红绿蓝...

    前端技术 2020年04月11日 1021 0
  • 用StompJS/SpeechSynthesis实现前端消息实时语音播报

    前言前端消息的实时推送我相信很多人不陌生,我们可以想到利用WebSocket,服务端主动向客户端推送数据,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。其优点有很多,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯等等。语音播报则能够在人们视觉没有来的及关注时侯,通过听觉来获取需要信息。这篇文章主要介绍的是基于websocket...

    前端技术 2020年04月11日 1260 0
  • 弹性动效的应用及原理

    弹性是动态设计领域中一种常见的表达方式。不同于影视特效、动画 CG 等设计输出即为最终产物的生产环境,UI 动效始终面临着动效还原带来的种种问题,弹性动效的还原就是其中之一。当设计师完成弹性动效的设计,与工程师进行交接时,双方会发现参数无法对齐 —— 在设计工具中调节效果的参数与在工程开发环境下设定效果的参数无论是名称还是数量都存在差异。基于以上背景,我们通过研究一些常见原型设...

    前端技术 2020年04月08日 661 0
  • 基于 TypeScript + Node.js,微信系开发脚手架——TNWX

    介绍TNWX是笔者在码云上发现的一个微信系列的开发脚手架项目,看了一下不少人的评论就是两个字——专业,下面简单介绍;TNWX:TypeScript + Node.js + WeiXin 微信系开发脚手架,支持微信公众号、微信支付、微信小游戏、微信小程序、企业微信/企业号、企业微信开放平台。最最最重要的是能快速的集成至任何 Node.js 框架(Express、Nest、Egg、...

    前端技术 2020年04月06日 481 0
  • CSS:度量单位(px,em,rem,vw,%等)

    Photo by Charles Deluvio on Unsplash介绍我决定写这个博客的目的是希望探索更多有关使用CSS调整大小的方法。 有这么多种可能性,很容易感到不知所措和困惑。 浏览器当前支持16种度量单位:像素,英寸,皮卡,厘米,毫米,点,百分比,em,rem,视口尺寸(vw,vh),ex,ch,Vmax(最大视口)和vmin (viewportmin)在这16个...

    前端技术 2020年03月31日 1134 0
  • 纯CSS实现“文本溢出截断省略”的几种方法

    在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ,但在实现上却有不同的区分,是单行截断还是多行截断?多行的截断判断是基于行数还是基于高度?这些问题之下,都有哪些实现方案?他们之间的差异性和场景适应性又是如何?一般来说,在做这样文字截断效果时我们更多是希望:兼容性好,对各大主流浏览器有好的支持响应式截断,根据不同宽度做出调整文本超...

    前端技术 2020年03月31日 1047 0
  • 解决跨域的八种方式

    受制于同源策略,一个域去请求另一个域的资源时,就会出现跨域的现象,而在我们开发中,经常需要跨域去请求资源(例如:本地localhost,去请求测试环境的资源),所以我们也就需要一些方法去解决这个跨域的问题复制代码一、使用jsonp 解决跨域缺点:不安全,容易造成xss攻击;只能是GET请求原理:1.<script>标签的src属性不受同源策略的限制2.跨域请求的接口...

    前端技术 2020年03月29日 310 0