常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。 （1）像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS 像素和物理像素：CSS 像素：为 web 开发者提供，在 CSS 使用的一个抽象单位；物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。 （2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。 （3）em 和 rem 相对于 px 更具灵活性，它们都是相对长度单位，它们之间的区别：em 相对于父元素，rem 相对于根元素。em： 文本相对长度单位。相对于当前对象内文本的字体尺寸。如果行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认 16px)。(相对父元素的字体大小倍数)。rem： rem 是 CSS3 新增的一个相对单位，相对于根元素（html 元素）的 font-size 的倍数。作用：利用 rem 可以实现简单的响应式布 ...

保持专一在大的方向上，专注一个领域，才能让自己变得更加优秀。在小的事情上，专注不分神，才能把一件事情做到完美。 只有专注当下、持续深耕，一个人才能有广阔的未来。 坚持读书一个人坚持读书，意味着他还在积极寻求进步，他的思想还在不断成长。 读书的成本很低，收获却很大。一个人、一本书、一盏灯，却可以看到整个世界。 人生起起伏伏，热爱读书的人总能从容面对，因为他们拥有一个丰富美丽的精神家园。 耐心等待任何事情的成功，都不是一蹴而就的，都需要等待。 从种下一粒种子到它开花，需要漫长的等待，需要我们一次次地浇水、施肥、细心看护。如果半途而废，就无法看到花朵绽放。 请相信，人生没有白走的路，每一步都算数。再给梦想一点时间，你的付出终会有所收获。 积累经验人生是一个不断“打怪升级”的过程，不断去做事、不断去实践，才能积累经验，完成人生的进阶。 不要驻足不前，不要站在岸上学习游泳。如果因为担心失败就裹足不前，可能会错过很多好的机会。 大胆迈出第一步吧，随着经验的累积，你将越来越优秀。 学会总结怎么判断一个人的思想是否成熟？看他是否善于总结自己的人生经验。 不要让时间白白从你身边流走，每过 ...

节流与防抖的理解函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求. 函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率. 应用场景1、防抖函数: 按钮提交场景：防⽌多次提交按钮，只执⾏最后提交的⼀次.2、服务端验证场景：表单验证需要服务端配合，只执⾏⼀段连续的输⼊事件的最后⼀次. 实现节流函数和防抖函数 防抖函数的实现 function debounce(fn, wait) { var timer = null; return function () { var context = this, args = [...arguments]; // 如果此时存在定时器的话, 则取消之前的定时器重新计时 if (ti ...

延迟加载就是等页面加载完成之后再加载 JavaScript 文件。js 延迟加载有助于提高页面加载速度。一般有以下几种方式： 1、defer 属性：给 js 脚本添加 defer 属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样. 2、async 属性：给 js 脚本添加 async 属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。动态创建 DOM 方式：动态创建 DOM 标签的方式，可以对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入js 脚本. 3、使用 setTimeout 延迟方法：设置一个定时器来延迟加载 js 脚本文件让 JS 最后加载：将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最后来加载执行 ...

for…of 是 ES6 新增的遍历方式，允许遍历一个含有 iterator 接口的数据结构（数组、对象等）并且返回各项的值，和 ES3 中的 for…in 的区别如下for…of 遍历获取的是对象的值，for…in 获取的是对象的键名； for… in 会遍历对象的整个原型链，性能非常差不推荐使用，而for … of 只遍历当前对象不会遍历原型链；对于数组的遍历，for…in 会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)，for…of只返回数组的下标对应的属性值； 总结：for...in 循环主要是为了遍历对象而生，不适用于遍历数组；for...of 循环可以用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象

以下文章来源于前端之神 ，作者林三心不学挖掘机，喝水不忘挖井人 前端之神https://mp.weixin.qq.com/s/rqoZ5KWqT_1QAx91bJMeIg Vue 的优点？Vue 的缺点？优点： 渐进式 组件化开发 虚拟 dom 响应式数据 单页面路由 数据与视图分开 缺点： 单页面不利于 seo 不兼容 IE 首屏加载时间长 为什么说 Vue 是一个渐进式框架？Vue 的全家桶，你可以选择不用，或者只选几样去用，比如不用 vuex Vue 跟 React 的异同点？相同点： 都是单向数据流 都使用了虚拟 DOM 的技术 都支持 SSR 组件化开发 不同点： 前者 template，后者 JSX 数据改变，前者响应式，后者手动 setState React 单向绑定，Vue 双向绑定 React 状态管理工具 Redux、Mobx，Vue 状态管理工具 Vuex MVVM 是什么？和 MVC 有何区别呢？MVC Model：负责从数据库中取数据 View：负责展示数据 Controller：用户交互的地方，例如点击事件 思想：Controller 将 ...

前言 有些时候，我们会遇到一些小难题，但并不难，因为你只要肯花个时间，肯定是能解决的。你与其花这个时间，为何不快速解决之后，好继续写你的主要逻辑代码呢？ 比如你要判断用户是否是手机端输入邮箱\手机号码... 是否合法，将数字转换成 汉字。。。 “工欲善其事，必先利其器！’’下面列举出了一些 JS 中常用的工具方法，复制粘贴，岂不美滋滋？，有了这些开发工具你就可以高效的处理任务和信息了。 邮箱export const isEmail = s => { return /^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s);}; 手机号码export const isMobile = s => { return /^1[0-9]{10}$/.test(s);}; 电话号码export const isPhone = (s) => { return /^( ...

解释:啥叫懒加载呢？字面意思就是：懒惰加载, 举个栗子： 你去衣物实体店买东西，老板/工作人员肯定是拿出你喜欢的衣物，不可能把整个仓库的衣物都拿出来。 Tip赖加载又称按需加载 常用的场景就是： 很多页面有很多图片，只有你眼睛能看到地方才会加载图片，还没看到的地方，就先不加载，毕竟谁能保证，你肯定会完完整整得把页面的图片全部看一遍呢？你中途如果不看了，岂不是白加载了？ 本文案例也是围绕这个场景实现 优点: 页面加载速度快 减轻服务器压力 节约流量 用户体验好… 接着： 我现在都喜欢用 Jquery，它实在是太方便了。记得第一次学 Javascript 的时候，原生的 Api 实在是有些繁琐，对第一次接触的人来说，实在是太长了，何况咱英语也就小学的水平。 原生的 document.getElementById('k'); Jquery 的 $('#k'); 这区别，所以应该不止我喜欢 jQuery 吧？ 由于 jQuery 实在是太好用了，然后有很多大神，就写了很多插件，在 jQuery 的基础上写了很多的库! 比如这 ...