Web开发

0

如何让10万条数据的小程序列表如丝般顺滑微信小程序

马师傅发表了文章 • 951 次浏览 • 2021-06-02 19:46 • 来自相关话题

某天闲着无聊想练一下手速，去上拉一个小程序项目中一个有1万多条商品数据的列表。在数据加载到1000多条后，是列表居然出现了白屏。看了一下控制台：‘Dom limit exceeded’，dom数超出了限制，不知道微信是出于什么考虑，要限制页面的dom数量。一... ...查看全部

0

css 加载阻塞问题，无废话性能优化 CSS3

马师傅发表了文章 • 769 次浏览 • 2021-05-31 14:35 • 来自相关话题

一、问题 & 结论1. css 加载会阻塞 DOM 树的解析渲染吗？css 并不会阻塞 dom 树的解析css 会阻塞 dom 树的渲染2. css 加载会阻塞 js 运行吗？css 加载会阻塞后面 js 语句的执行二、造成的结果以及优化方案1. ... ...查看全部

0

深入理解CSS中的z-index CSS3

马师傅发表了文章 • 855 次浏览 • 2021-05-31 10:41 • 来自相关话题

深入理解z-index在MDN上的定义是z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。但是这个说明太含糊了,当遇到z-ind... ...查看全部

1

分享一个我遇到的集成websdk中踩的一个坑环信_WebIM

贡献

五彩斑斓的黑回复了问题 • 2 人关注 • 962 次浏览 • 2021-05-27 20:21 • 来自相关话题

0

我愿赌上一包辣条，这些定位相关你不知道 CSS3

马师傅发表了文章 • 1021 次浏览 • 2021-05-27 17:37 • 来自相关话题

写码写累了不如来看看这些奇奇怪怪的css，腰不酸腿不疼，一阵轻松加愉快（还能偷我表情包）子元素的绝对定位原点在哪？用了那么久的定位，有注意过子元素的绝对定位原点，是在盒子模型的哪一处，在 padding、border 还是 content？实践出真知。既然不确... ...查看全部

0

做了这个活动，感觉自己成了垂直排版css大师（文字竖排） CSS3

马师傅发表了文章 • 1275 次浏览 • 2021-05-27 16:15 • 来自相关话题

前段时间协助完成作家的盘点活动，设计大大给的视觉稿如下图。最初拿到稿子时，以为是一个简单的常规活动，实际在完成这个活动的过程中有一点点小波折，自己也在这个过程中学习到了关于垂直排版的知识点，下面来跟大家描述做这个活动的心路历程，一起探索垂直排版的奥秘~文字竖排... ...查看全部

2

6分钟实现CSS炫光倒影按钮 CSS3

马师傅发表了文章 • 1073 次浏览 • 2021-05-27 15:58 • 来自相关话题

话不多，先看效果：回归老本行，继续分享简单有趣的CSS创意特效，放松放松心情~实现过程（完整源码在最后）：1 老样子，定义基本样式：*{ margin: 0; padding: 0; box... ...查看全部

0

因为这几个 TypeScript 代码的坏习惯，同事被罚了 500 块 typescript

马师傅发表了文章 • 848 次浏览 • 2021-05-27 12:33 • 来自相关话题

近几年 TypeScript 和 JavaScript 一直在稳步发展。我们在过去写代码时养成了一些习惯，而有些习惯却没有什么意义。以下是我们都应该改正的 10 个坏习惯。1.不使用 strict 模式这种习惯看起来是什么样的没有用严格模式编写 tsconfi... ...查看全部

0

TypeScript进阶, 如何避免 any typescript

马师傅发表了文章 • 1194 次浏览 • 2021-05-27 12:00 • 来自相关话题

为什么会出现 any不知道如何准确的定义出类型，TS 报错了，用 any 能解决，便用 any 了觉得定义类型浪费时间，项目经理催的紧，工期紧张，any 更方便频繁使用 any&n... ...查看全部

1

用ts类型系统实现斐波那契数列 typescript

马师傅发表了文章 • 1116 次浏览 • 2021-05-26 12:37 • 来自相关话题

一、我们要做什么我们的目的是想要通过TypeScript的类型声明式语法，编程实现一个斐波那契数列算法。换句话说，类似于用现有的机器码到指令集、二进制到十进制、汇编语言到高级编程语言的过程，让类型定义语法也可以实现编程。最终我们要实现的斐波那契数列代码是这样的... ...查看全部

0

2021不得不学的Typescript typescript

马师傅发表了文章 • 948 次浏览 • 2021-05-26 11:53 • 来自相关话题

ts作为一门新技术，这两年是越来越火，经过了一段时间的学习和理解之后，写了这篇文章，通过记录ts的核心知识点来带大家轻松掌握typescript，希望能够打动屏幕面前的你。Typescript基础语法TypeScript支持与JavaScript几乎相同的数据... ...查看全部

0

【性能优化】关键性能指标及测量标准性能优化

马师傅发表了文章 • 1330 次浏览 • 2021-05-25 18:19 • 来自相关话题

前言随着时代的发展，业内曾经提出过很多性能优化相关的标准和规范，从最初2007年雅虎提出34条军规，到2020年google开始推广Web Vitals，优化技术已经有将近20多年的发展历史，如下图所示：发展过程中产生了许多的性能指标、测量工具、优化手段等等，... ...查看全部

0

前端的你还不会优化你的图片资源？来看这一篇就够了！性能优化

马师傅发表了文章 • 1283 次浏览 • 2021-05-25 17:38 • 来自相关话题

优质的图片可以有效吸引用户，给用户良好的体验，所以随着互联网的发展，越来越多的产品开始使用图片来提升产品体验。相较于页面其他元素，图片的体积不容忽视。下图是截止 2019 年 6 月 HTTP Archive[1] 上统计的网站上各类资源加... ...查看全部

0

仅使用CSS就可以提高页面渲染速度的4个技巧 CSS3 性能优化

马师傅发表了文章 • 821 次浏览 • 2021-05-25 16:22 • 来自相关话题

用户喜欢快速的网络应用，他们希望页面加载速度快，功能流畅。如果在滚动时有破损的动画或滞后，用户很有可能会离开你的网站。作为一名开发者，你可以做很多事情来改善用户体验。本文将重点介绍4个可以用来提高页面渲染速度的CSS技巧。1. Content-visibili... ...查看全部

0

一种简单实用的 JS 动态加载方案性能优化

马师傅发表了文章 • 949 次浏览 • 2021-05-25 15:53 • 来自相关话题

背景在做 Web 应用的时候，你或许遇到过这样的场景：为了实现一个使用率很低的功能，却引入了超大的第三方库，导致项目打包后的 JS bundle 体积急剧膨胀。我们有一些具体的案例，例如：产品要求在项目中增加一个导出数据为 Excel 文件的功能，这个功... ...查看全部

0

当后端一次性丢给你10万条数据, 作为前端工程师的你,要怎么处理? 性能优化

马师傅发表了文章 • 1055 次浏览 • 2021-05-25 12:51 • 来自相关话题

前段时间有朋友问我一个他们公司遇到的问题, 说是后端由于某种原因没有实现分页功能, 所以一次性返回了2万条数据,让前端用select组件展示到用户界面里. 我听完之后立马明白了他的困惑, 如果通过硬编码的方式去直接渲染这两万条数据到select中,肯定会卡死.... ...查看全部

0

一行可以让项目启动快70%以上的代码性能优化

马师傅发表了文章 • 1342 次浏览 • 2021-05-25 11:46 • 来自相关话题

前言这两天闲来无事，想优化优化项目的启动时间，用了一个下午吧，将项目启动时间从48秒优化到14秒，大约70左右，效果还是有的，而且仅仅用了一行代码。 👇会讲一下找到这行代码的过程，如果没有耐心可以直接跳转到文章底部，直接看结论即可。项目背景项目就是简单的... ...查看全部

0

哇擦！他居然把 React 组件渲染到了命令行终端窗口里面 react

马师傅发表了文章 • 845 次浏览 • 2021-05-24 18:35 • 来自相关话题

也许你之前听说过前端组件代码可以运行在浏览器，运行在移动端 App 里面，甚至可以直接在各种设备当中，但你有没有见过: 前端组件直接跑在命令行窗口里面，让前端代码构建出终端窗口的 GUI 界面和交互逻辑？今天，给大家分享一个非常有意思的开源项目: ink。... ...查看全部

0

如何应用 SOLID 原则整理 React 代码之单一原则 SEO优化 react

马师傅发表了文章 • 914 次浏览 • 2021-05-24 18:24 • 来自相关话题

SOLID 原则的主要是作为关心自己工作的软件专业人员的指导方针，另外还为那些以经得起时间考验的设计精美的代码库为荣的人。今天，我们将从一个糟糕的代码示例开始，应用 SOLID 的第一个原则，看看它如何帮助我们编写小巧、漂亮、干净的并明确责任的 React ... ...查看全部

0

React的性能优化(useMemo和useCallback)的使用 react

马师傅发表了文章 • 1276 次浏览 • 2021-05-24 12:57 • 来自相关话题

一、业务场景 React是一个用于构建用户界面的javascript的库，主要负责将数据转换为视图，保证数据和视图的统一，react在每次数据更新的时候都会重新render来保证数据和视图的统一，但是当父组件内部数据的变化，在父组件下挂载的所有子组件也会重新... ...查看全部

0

React22-diff算法 react

马师傅发表了文章 • 777 次浏览 • 2021-05-24 11:56 • 来自相关话题

1.时间复杂度最好的算法都是o(n3) n为元素个数如果每个元素都去diff的话复杂度很高所以react做出啦三个限制 1.只对同级元素进行diff，不用对另一个树的所有元素进行diff 2.tag不同的两个元素会产生不同的树，div变为p，react会销... ...查看全部

0

使用react的7个避坑案例 react

马师傅发表了文章 • 853 次浏览 • 2021-05-21 18:09 • 来自相关话题

React是个很受欢迎的前端框架。今天我们探索下React开发者应该注意的七个点。 1. 组件臃肿 React开发者没有创建必要的足够多的组件化，其实这个问题不局限于React开发者，很多Vue开发者也是。当然，我们现在讨论的是React 在React中... ...查看全部

0

90 行代码的webpack，你确定不学吗？ webpack

马师傅发表了文章 • 909 次浏览 • 2021-05-21 14:14 • 来自相关话题

在前端社区里，webpack 可以说是一个经久不衰的话题。其强大、灵活的功能曾极大地促进了前端工程化进程的发展，伴随了无数前端项目的起与落。其纷繁复杂的配置也曾让无数前端人望而却步，笑称需要一个新工种"webpack 配置工程师"。作为一个历史悠久，最常见、最... ...查看全部

0

使用vue+element开发一个谷歌插件 jQuery插件 vue

马师傅发表了文章 • 1004 次浏览 • 2021-05-21 11:49 • 来自相关话题

简单功能：点击浏览器右上角插件icon弹出小弹窗，点击设置弹出设置页，并替换背景颜色。开始1.本地创建文件夹testPlugin并新建manifest.json文件{ "name": "testPlugin", "description": "这是... ...查看全部

0

手把手教你利用js给图片打马赛克 canvas

马师傅发表了文章 • 945 次浏览 • 2021-05-21 11:24 • 来自相关话题

效果演示Canvas简介这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。HTML5 标签用于绘制图像（通过脚本，通常是 JavaScri... ...查看全部

0

微信H5网页跳转小程序，这一篇就够了！页面跳转 小程序 vue

马师傅发表了文章 • 2047 次浏览 • 2021-05-20 15:54 • 来自相关话题

鉴于微信开放标签说明文档写的不是很清楚，大多数开发者看了以后表示：我从哪里来？要到哪里去？所以鄙人记录下这篇文章，以便帮助到一些人。静态网页跳转小程序废话不多说，上才艺！<html><head> <meta charse... ...查看全部

1

是选择WEBIM ？还是小程序SDK？ uniapp

贡献

五彩斑斓的黑回复了问题 • 2 人关注 • 1053 次浏览 • 2021-05-20 15:29 • 来自相关话题

0

在vue项目中使用骨架屏 vue

马师傅发表了文章 • 921 次浏览 • 2021-05-20 12:24 • 来自相关话题

现在的应用开发，基本上都是前后端分离的，前端主流框架有SPA、MPA等，那么解决页面渲染、白屏时间成为首要关注的点webpack可以按需加载，减小首屏需要加载代码的体积；使用CDN技术、静态代码等缓存技术，可以减小加载渲染的时长问题：但是首页依然存在加载、渲染... ...查看全部

0

520和女朋友搞点不一样的礼物， html+css+js做一个网页版坦克大战游戏 CSS3 Javascript

马师傅发表了文章 • 1015 次浏览 • 2021-05-19 18:18 • 来自相关话题

坦克游戏玩法及介绍我们先来看一下首页。打开这个首页很简单，基本是上面这个样子，然后选择两个人回车就可以进行玩耍了，这个游戏需要两个人一起操作，玩家1（我）：使用WASD四个键进行上左下右方向的控制，通过space键进行设计射击。玩家2（女朋友）：通过方向键上... ...查看全部

0

vue 事件总线EventBus的概念、使用以及注意点 vuejs vue

马师傅发表了文章 • 897 次浏览 • 2021-05-19 12:01 • 来自相关话题

前言vue组件中的数据传递最最常见的就是父子组件之间的传递。父传子通过props向下传递数据给子组件；子传父通过$emit发送事件，并携带数据给父组件。而有时两个组件之间毫无关系，或者他们之间的结构复杂，如何传递数据呢？这时就要用到 vue 中的事件总线 Ev... ...查看全部

2

无废话快速上手React路由路由 react

马师傅发表了文章 • 944 次浏览 • 2021-05-19 11:22 • 来自相关话题

本文以简洁为目标，帮助快速上手react-router-dom默认你接触过路由相关的开发安装输入以下命令进行安装：// npmnpm install react-router-dom// yarnyarn add react-router-domreact-r... ...查看全部

2

vue数据可视化界面，智慧图表。Echarts，以及git vue 前端面试 Git

马师傅发表了文章 • 1233 次浏览 • 2021-05-18 18:26 • 来自相关话题

一、数据图表一张图表胜过千万句话1.1HighChart概念兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库下载一、通过CDNhttps://code.highcharts.com.cn/index.html二、通过NPM下载... ...查看全部

0

JavaScript解密之旅-----数组的遍历方法总结前端面试 数组

马师傅发表了文章 • 872 次浏览 • 2021-05-18 18:14 • 来自相关话题

数组的循环一、forEach（）二、map（）三、filter（）四... ...查看全部

1

使用自己的appkey可以注册用户，也可以登录实现即时通信，但是后台显示注册用户是0 后台数据出错

贡献

luzhu 回复了问题 • 1 人关注 • 815 次浏览 • 2021-05-17 17:38 • 来自相关话题

0

7种经常使用的Vue.js模式？你居然还不知道！！前端面试 vue

马师傅发表了文章 • 975 次浏览 • 2021-05-17 15:00 • 来自相关话题

说实话，阅读文档并不是我们大多数人喜欢的事情，但当使用像Vue这样不断发展的现代前端框架时，很多东西会随着每一个新版本的发布而改变，你可能会错过一些后来推出的新的闪亮功能。让我们看一下那些有趣但不那么流行的功能和优化的写法。请记住，所有这些都是Vue文档的一部... ...查看全部

0

vue传值方式总结（十二种方法）前端面试 vue

马师傅发表了文章 • 931 次浏览 • 2021-05-17 14:24 • 来自相关话题

一.父传子传递（1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量（2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props: [“属性名”] props:{属性名:数据类型}代码示例：//父组件&l... ...查看全部

0

前端必须要了解的一些知识 (十一) 前端面试

马师傅发表了文章 • 868 次浏览 • 2021-05-17 11:02 • 来自相关话题

六种基本数据类型undefinednullstringbooleannumbersymbol(ES6)一种引用类型Objectstringlength属性prototype 添加的方法或属性在所有的实例上共享charAt(index) 返回值 cha... ...查看全部

0

前端必须要了解的一些知识 (十) 前端面试

马师傅发表了文章 • 844 次浏览 • 2021-05-17 10:47 • 来自相关话题

任务队列同步任务异步任务console.log(1)setTimeout(){console.log(2)}console.log(3)1，3，22，3，5，4，1console.log(A)while(true){}console.log(B)//只输出A ... ...查看全部

0

前端必须要了解的一些知识 (九) 前端面试

马师傅发表了文章 • 945 次浏览 • 2021-05-17 10:43 • 来自相关话题

CSRF跨站请求伪造攻击原理网站B引诱用户点击A防御措施token验证refere验证来源验证隐藏令牌XSS跨域脚本攻击原理：提交区注入脚本让js不能执行doctype的作用DTD 定义html文档类型。浏览器根据这个去解析声明文档类型4.0版本... ...查看全部

0

前端必须要了解的一些知识 (八) 前端面试

马师傅发表了文章 • 864 次浏览 • 2021-05-17 10:38 • 来自相关话题

什么是同源策略限制协议域名端口不是一个源的文档不能操作另一个源的文档限制如下：cookie localStrorage indexDB 无法获取DOM无法获得Ajax请求不能发送前后端如何通信Ajax//同源下的通讯websocket//不限制同源c... ...查看全部

0

前端必须要了解的一些知识 (七) 前端面试

马师傅发表了文章 • 825 次浏览 • 2021-05-14 18:36 • 来自相关话题

创建对象又几种方法//第一种：字面量 var o1 = {name: 'o1'}; var o2 = new Object({name: 'o2'});//第二种通过构造函数 var M = function (name) { this.name = na... ...查看全部

0

前端必须要了解的一些知识 (六) 前端面试

马师傅发表了文章 • 1006 次浏览 • 2021-05-14 18:32 • 来自相关话题

DOM事件的级别DOM0element.onclick=function(){}DOM1未制定事件相关的标准DOM2element.add('click',fn,false)/ie . atenchDOM3el.add('keyup',fn,false)增加了... ...查看全部

0

前端必须要了解的一些知识 (五) 前端面试

马师傅发表了文章 • 1006 次浏览 • 2021-05-14 18:29 • 来自相关话题

盒模型标准模型和IE模型标准模型和IE模型的区别1计算宽度和高度的不同ie中content的宽度包括padding和border这两个属性css是如何设置这两种模型的border-box 是·ie默认 content-boxjs如何获取盒模型的宽和高四种方法1... ...查看全部

0

前端必须要了解的一些知识 (四) 前端面试

马师傅发表了文章 • 740 次浏览 • 2021-05-14 18:27 • 来自相关话题

基础方法1:浮动（延伸BFC）清除浮动后浮动元素周边的元素处理的好的话。兼容性比较好2:绝对定位配合js的话快捷缺点：脱离文档流3:flex比较完美的方案。解决以上的缺点4:表格布局兼容性特别好 ie缺点：。。5:网格布局 gride新的标准代码最... ...查看全部

0

前端必须要了解的一些知识 (三) 前端面试

马师傅发表了文章 • 941 次浏览 • 2021-05-14 18:21 • 来自相关话题

你在下单时，要给后台发请求，后台通过拿到的参数请求微信后台去生成订单并同时返给你一个路径mweb_url，这个路径就是用来调起微信应用发起支付操作的。（这里要说明的就是由于h5支付不能主动回调，所以需要个主动查询的操作，这时会需要你又一个确认界面来进行主动查询... ...查看全部

0

前端必须要了解的一些知识 (二) 前端面试

马师傅发表了文章 • 878 次浏览 • 2021-05-14 18:15 • 来自相关话题

获取字符串长度 str.length分割字符串 str.split()拼接字符串 str1+str2 或 str1.concat(str2)替换字符串 str.replace(“玩游戏”,”好好学习”)提取子字符串 str.slice(start, end)或... ...查看全部

0

前端必须要了解的一些知识 (一) 前端面试

马师傅发表了文章 • 911 次浏览 • 2021-05-14 18:12 • 来自相关话题

常用apimoveTo(x0,y0)：把当前画笔（ictx）移动到（x0,y0）这个位置。lineTo(x1,y1):从当前位置(x0,y0)处到（x1，y1）画一条直线。beginPath()：开启一条路径或者重置当前路径。closePath():从当前点回... ...查看全部

0

前端面试常问的基础（七）前端面试

马师傅发表了文章 • 829 次浏览 • 2021-05-12 00:59 • 来自相关话题

1.IE6或更低版本最多20个cookie2.IE7和之后的版本最后可以有50个cookie。3.Firefox最多50个cookie4.chrome和Safari没有做硬性限制IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理coo... ...查看全部

0

前端面试常问的基础（六）前端面试

马师傅发表了文章 • 910 次浏览 • 2021-05-12 00:53 • 来自相关话题

一、HTML5 CSS3CSS3有哪些新特性？1. CSS3实现圆角（border-radius），阴影（box-shadow），2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）3.transform:r... ...查看全部

0

前端面试常问的基础（五）前端面试

马师傅发表了文章 • 812 次浏览 • 2021-05-12 00:52 • 来自相关话题

如何理解CSS的盒子模型？每个HTML元素都是长方形盒子。（1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading。（2）标准W3C盒模型包含：内容(content)、填充(padding)、边界(m... ...查看全部

通知设置 新通知

热门话题

通知设置新通知