随笔分类 - html/css
摘要：一、浏览器渲染 开篇，我们还是不厌其烦的回顾一下浏览器的渲染过程，先上图： 正如上图所展示的，我们浏览器渲染过程分为了两条主线： 其一，html Parser 生成的 DOM 树；其二，css Parser 生成的 Style Rules ； 在这之后，DOM 树与 Style Rules 会生成一
阅读全文
posted @ 2021-06-25 20:01
笑人
摘要：1. 背景 在一些项目中，有时候会出现不同模块重复请求大量相同api接口的情况，特别是在一些功能相似的后台管理页面中。以下面这几个页面为例，每次进入页面都需要请求等大量重复的下拉框数据，下拉框数据短时间内改动不大，但也不能在前端使用静态数据，所以可以考虑在前端进行数据缓存，避免重复请求api。 2.
阅读全文
posted @ 2021-06-25 20:00
笑人
摘要：有人认为css很难学习，没有什么逻辑可言，而且还坑很多，可能是大家对css还不是很了解，因为我提出了五个我不喜欢的开发者习惯，并向大家展示如何避免它们。 1. 设置边距或填充，然后将其重置 我经常看到有人为所有元素设置边距或填充，然后又将第一个或最后一个元素的值重置。 .item { margin-
阅读全文
posted @ 2021-06-25 19:58
笑人
摘要：contain 属性 这个 contain 属性的主要目的是隔离指定内容的样式、布局和渲染。开发人员可以使用这个 contain 属性来限制指定的DOM元素和它的子元素同页面上其它内容的联系；我们可以把它看做一个iframe。跟iframe很相似，它能建立起一个边界，产生一个新的根布局；保证了它和它
阅读全文
posted @ 2021-06-25 19:57
笑人
摘要：在浏览器里进行用户追踪会引发关于隐私和数据保护一次又一次的讨论。类似 Google 分析之类的工具几乎可以抓到所有需要的内容，包括来源，语言，设备，停留时间等等。 但是，想获取一些感兴趣的信息，你可能不需要任何外部追踪器，甚至不需要 JavaScript。本文将向你展示，即便用户禁用了 JavaSc
阅读全文
posted @ 2021-06-25 19:56
笑人
摘要：本文主要介绍一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。我们知道，当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，下面要讲的布局就是解决如何使元素粘住浏览器底部。 方法一：全局增加一个负值下边距等于底部高
阅读全文
posted @ 2021-06-25 19:54
笑人
摘要：异常捕获是改善软件质量的跟踪手段之一，常见的方式是记录日志，从日志分析异常问题进而跟进。对于前端项目来说，异常可能是后端接口数据导致，可能是前端本身业务逻辑问题导致，不管是什么导致的异常，只要能够精准的捕获到就能够分析出问题所在。可能有小伙说有测试阶段，全面的测试机制的确能够降低异常的出现，但是测试
阅读全文
posted @ 2021-06-25 19:52
笑人
摘要：熟悉 Linux 系统的同学都知道，它高效主要体现在命令行。 通过命令行，可以将很多简单的命令，通过自由的组合，得到非常强大的功能。 命令行也就意味着可以自动化，自动化会使你的工作更高效，释放很多手工操作，让你有更多的时间去做更有意义的事情。 这篇文章，会分享一些非常实用小技巧，希望能够帮助你提高工
阅读全文
posted @ 2021-06-24 18:32
笑人
摘要：顶部菜单栏中放置搜索框是一个常见的场景，但如果搜索功能使用的不那么频繁，同时菜单栏中内容本来就比较拥挤，再放一个完整的搜索框在那就显得不那么美观。因此也有一个挺常见的做法是，只放一个搜索图标，需要时再显示整个搜索框，如下图所示： 实现思路 起始状态时搜索框没有显示，鼠标移入后从右侧滑入，因此不能使用
阅读全文
posted @ 2021-06-24 18:30
笑人
摘要：网站如何检测到是否开启开发者工具?这里不是指监听键盘事件F12之类的方法，而是通过浏览器右侧点击打开开发者工具。 现在介绍2个方法，非常管用，可以检测到你是否开启了控制台程序，可以算是JavaScript的一些奇淫巧技，将如下这段代码加入你的网站即可。 方法一： 打开控制台弹窗debug调试： se
阅读全文
posted @ 2021-06-24 18:27
笑人
摘要：需求说明： 多个view或图片横排显示，可以左右滑动，当滑动到最右侧时实现回弹效果（这里使用匀速动画）。滑动到最右侧显示“查看更多”，达到一定位置显示改完“释放查看”，如果用户释放了则进行相应操作。 如图所示： 代码实现： view： <view @touchmove="move" @touchen
阅读全文
posted @ 2021-06-24 18:26
笑人
摘要：现在，在使用 <ul> 或 <ol> 时自定义数字或项目符号的颜色，大小或类型很简单。利用css的:marker伪元素，我们可以很轻易的更改内容以及项目符号和数字的某些样式。::marker伪元素它作用在任何设置了display:list-item的元素或伪元素上。 ::marker是什么？ css
阅读全文
posted @ 2021-06-24 18:11
笑人
摘要：什么是埋点 还不了解的同学可以阅读以下文章： 前端-埋点-理念-通识-浅谈 大数据时代数据的重要性不言而喻，而其中最重要的就是用户信息的采集。埋点，无论是项目后期的复盘，还是明确业务价值，还是产品价值的挖掘，都具备很重要的意义。 前端异常捕获 在ES3之前js代码执行的过程中，一旦出现错误，整个js
阅读全文
posted @ 2021-06-23 18:43
笑人
摘要：1. 网站架构的伸缩性设计 1.1. 不同功能进行物理分离实现伸缩 纵向分离（分层后分离）：将业务处理流程上的不同部分分离部署，实现系统伸缩性。 横向分离（业务分割后分离）：将不同的业务模块分离部署，实现系统伸缩性。 1.2. 单一功能通过集群规模实现伸缩 将不同功能分离部署可以实现一定程度的伸缩性
阅读全文
posted @ 2020-12-09 22:48
笑人
摘要：目前前端三杰 Angular、react、vue 都推介单页面应用 SPA 开发模式，在路由切换时替换 DOM Tree 中最小修改的部分 DOM，来减少原先因为多页应用的页面跳转带来的巨量性能损耗。它们都有自己的典型路由解决方案，@angular/router、react-router、vue-r
阅读全文
posted @ 2020-12-09 22:47
笑人
摘要：下雪效果只是一类效果的名称，可以是红包雨等一些自由落体的运动效果，本文就是用纯css模拟下雪的效果，更多效果大家可以自行发挥。 1.前言 由于公司产品的活动，需要模拟类似下雪的效果。浏览器实现动画无非css3和canvas（还有gif），对比下css3和canvas的优缺点： 动画自由度：canva
阅读全文
posted @ 2020-12-09 22:46
笑人
摘要：package.json 在 Node.js 中，模块是一个库或框架，也是一个 Node.js 项目。Node.js 项目遵循模块化的架构，当我们创建了一个 Node.js 项目，意味着创建了一个模块，这个模块的描述文件，被称为 package.json。 package.json 属性说明： na
阅读全文
posted @ 2020-12-09 22:43
笑人
摘要：我酷爱模块化设计。长期以来我都热衷于将网站分离成组件，而不是页面，并且动态地将那些组件合并到界面上。这种做法灵活，高效并且易维护。 但是我不想我的设计看上去是由一些不相关的东西组成的。我是在创造一个界面，而不是一张超现实主义的照片。 很幸运的是，已经有一项叫做 css 的技术，就是特意设计用来解决这
阅读全文
posted @ 2020-12-09 22:41
笑人
摘要：一. js动画和css动画区别。 css实现动画：animation transition transform js实现动画：setInterval setTimeout requestAnimationFrame JS动画： 优点： 1. 过程控制，可以在动画播放过程中对动画进行控制：开始、暂停、
阅读全文
posted @ 2020-12-09 22:38
笑人
摘要：首先简单说下思路：本地git仓库与远程仓库关联（github、码云等平台），然后pm2按照指定配置登录服务器，拉取远程仓库的代码更新，再执行一些指定的命令（如打包等）。 创建本地项目并关联到远程仓库 本地新建名为web的项目，进入项目并创建一个简单的Nodejs文件app.js， mkdir web
阅读全文
posted @ 2020-12-09 22:36
笑人
浙公网安备 33010602011771号