前端技术笔记
十二..
微醺缓行
展开
-
深入理解CSS中的vertical-align属性和基线,行内元素布局
开门见山推荐好文vertical-align属性主要用于改变行内元素的对齐方式,对于行内布局影响很大,如果不了解的话,我们开发调整样式的时候很容易出错。基线要了解vertical-align属性,必须懂得基线,怎么理解基线呢?1、我们写网页是在一个矩形的显示屏上,经常是一行一行来布局,不可避免的是一行中会有多个内容,那么这行内容是如何上下对齐的呢?答案就是默认让他们的基线对齐。2、各种字体、图片、行内html元素等可展示的内容都有各自的基线,要想知道具体内容的基线我们可以找一个简单的参照物:小写转载 2020-07-27 00:01:06 · 1342 阅读 · 0 评论 -
原生开发、H5开发和混合开发的区别
APP开发模式目前市场上主流的APP分为三种:1.原生APP2.Web APP(即HTML5)3.混合APP 当然,还有flutter等APP开发模式对比1. 原生开发原生开发(Native App开发),是在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行App开发。比如Android是利用Java、Eclipse、Android studio;IOS是利用Objective-C 和Xcode进行开发。优点:可访问手机所有功能(如GPS、摄像头等)、转载 2020-05-11 12:07:29 · 3391 阅读 · 0 评论 -
虚拟 DOM 到底是什么?
虚拟 DOM (Virtual DOM )这个概念相信大家都不陌生,从 React 到 Vue ,虚拟 DOM 为这两个框架都带来了跨平台的能力(React-Native 和 Weex)。因为很多人是在学习 React 的过程中接触到的虚拟 DOM ,所以为先入为主,认为虚拟 DOM 和 JSX 密不可分。其实不然,虚拟 DOM 和 JSX 固然契合,但 JSX 只是虚拟 DOM 的充分不必要条件,Vue 即使使用模版,也能把虚拟 DOM 玩得风生水起,同时也有很多人通过 babel 在 Vue 中使用 J转载 2020-05-09 15:01:29 · 465 阅读 · 0 评论 -
vue3.0跨域和axios使用
vue3.0 vue.config.js 配置跨域初入门,在vue中使用axiosVue中统一封装Axios请求转载 2020-05-07 18:56:52 · 821 阅读 · 0 评论 -
JS中轻松遍历对象属性的几种方式
自身可枚举属性Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举,那么将返回由键组成的数组。这是合理的,因为大多数时候只需要关注对象自身的属性。来看看一个对象拥有自身和继承属性的例子,Object.keys()只返回自己的属性键:let simpleCo...转载 2020-05-07 18:53:05 · 1160 阅读 · 0 评论 -
css布局说
前言其实,我们可能经常在聊组件化,咋地咋地。但是,回过头来思考一下,如果你看到一张设计稿的时候,连布局都不清不楚,谈何组件化呢。所以,我们需要在分清楚组件之前,先来分清楚布局。废话说了这么多,只是想告诉你,布局这个东西真的很重要。本篇内容概括了布局的基础+基本的PC端布局+移动端适配等内容。正文或许对于你来说,喜欢js的背后,是看不懂css的深层。入门级的css非常简单,但是,精通它却没有想...转载 2020-05-07 18:02:41 · 133 阅读 · 0 评论 -
Vue 3.0 语法记录
作为前端开发者,这几天想必大家都看到了Vue3.0的beta版新闻了,是的,尤大大在4.17号微博晒出了Vue3.0的beta链接,不少FEer开始兴奋,不过也有不少其它声音:『我学不动了』、『这不就是React』、『啥时候出正式版』;Vue3.0-beta链接:https://github.com/vuejs/vue-next#status-beta那么首先,我们先简单看一下Vue发布版本的...转载 2020-04-22 15:29:03 · 621 阅读 · 0 评论 -
记录git的简单学习
git commit后git branch one 创建分支git checkout one 切换到分支2.$ git checkout -b bugFix$ git commit$ git checkout master$ git commit$ git merge bugFix3.git checkout -b bugFix$ git commit$...原创 2020-04-21 18:19:42 · 119 阅读 · 0 评论 -
浏览器提示的"不安全"到底是什么?
3月中旬的某天, 某个小破站突然每篇头条动态下面都冷冷清清, 一个评论都没有了.我赶忙翻了翻, 在一处看到一则公告: 为响应国家<网络信息内容生态治理规定>, 本站暂时关闭回复, 转发功能.点开这个公告, 下面还附了这条规定的链接. 出于好奇, 我决定点进去浏览一番.然后, 我看到了地址栏左侧几个有些扎眼的字: 不安全.实际上, 大家或许都知道, 这个所谓的安全和不安全, 指的是网...转载 2020-04-17 20:13:47 · 2434 阅读 · 0 评论 -
对 React生命周期的理解
先总体看下React16的生命周期图React16废弃的三个生命周期函数componentWillMountcomponentWillReceivePropscomponentWillUpdate注:目前在16版本中componentWillMount,componentWillReceiveProps,componentWillUpdate 并未完全删除这三个生命周期函数,而且新增...转载 2020-04-15 11:30:53 · 246 阅读 · 0 评论 -
动态规划 最长公共子序列
文章推荐动态规划 最长公共子序列 过程图解动态规划经典五题算法-动态规划 Dynamic Programming–从菜鸟到老鸟1.基本概念首先需要科普一下,最长公共子序列(longest common sequence)和最长公共子串(longest common substring)不是一回事儿。什么是子序列呢?即一个给定的序列的子序列,就是将给定序列中零个或多个元素去掉之后得到的结果...转载 2020-03-26 20:13:51 · 151 阅读 · 0 评论 -
算法-动态规划
原文链接动态规划算法的核心理解一个算法就要理解一个算法的核心,动态规划算法的核心是下面的一张图片和一个小故事。A * "1+1+1+1+1+1+1+1 =?" *A : "上面等式的值是多少"B : *计算* "8!"A *在上面等式的左边写上 "1+" *A : "此时等式的值为多少"B : *quickly* "9!"A : "你怎么这么快就知道答案了"A : "只要...转载 2020-03-25 18:21:49 · 183 阅读 · 0 评论 -
Promise控制并发
题目是这样的:有 8 个图片资源的 url,已经存储在数组 urls 中(即urls = [‘http://example.com/1.jpg’, …., ‘http://example.com/8.jpg’]),而且已经有一个函数 function loadImg,输入一个 url 链接,返回一个 Promise,该 Promise 在图片下载完成的时候 resolve,下载失败则 rejec...转载 2020-03-25 09:57:56 · 856 阅读 · 0 评论 -
线程通信和进程通信区别(线程进程区别)
本文参考于线程通信与进程通信的区别 。进程和线程的区别:对于进程来说,子进程是父进程的复制品,从父进程那里获得父进程的数据空间,堆和栈的复制品。而线程,相对于进程而言,是一个更加接近于执行体的概念,可以和同进程的其他线程之间直接共享数据,而且拥有自己的栈空间,拥有独立序列。共同点: 它们都能提高程序的并发度,提高程序运行效率和响应时间。线程和进程在使用上各有优缺点。 线程执行开销比较小,但...转载 2020-03-24 14:59:33 · 2153 阅读 · 0 评论 -
解锁Webpack
本文对应的项目地址(编写本文时使用) 供参考:https://github.com/YvetteLau/webpack/tree/master/webpack-second1. 静态资源拷贝有些时候,我们需要使用已有的JS文件、CSS文件(本地文件),但是不需要 webpack 编译。例如,我们在 public/index.html 中引入了 public 目录下的 js 或 css 文件。这...转载 2020-03-24 11:51:01 · 180 阅读 · 0 评论 -
Javascript 代码是如何被压缩的
随着前端的发展,特别是 React,Vue 等构造单页应用的兴起,前端的能力得以很大提升,随之而来的是项目的复杂度越来越大。此时的前端的静态资源也越来越庞大,而毫无疑问 javascript 资源已是前端的主体资源,对于压缩它的体积至为重要。为什么说更小的体积很重要呢:更小的体积对于用户体验来说意味着更快的加载速度以及更好的用户体验,这也能早就企业更大的利润。另外,更小的体积对于服务器来说也意味...转载 2020-03-24 10:30:04 · 339 阅读 · 0 评论 -
TCP协议灵魂之问
转载来自文章https://juejin.im/post/5e527c58e51d4526c654bf41TCP 作为传输层的协议,是一个软件工程师素养的体现,也是面试中经常被问到的知识点。001. 能不能说一说 TCP 和 UDP 的区别?首先概括一下基本的区别:TCP是一个面向连接的、可靠的、基于字节流的传输层协议。而UDP是一个面向无连接的传输层协议。(就这么简单,其它TCP的特...转载 2020-03-23 16:12:58 · 312 阅读 · 0 评论 -
sessionStorage 、localStorage 和 cookie 之间的区别
sessionStorage 和 localStorage(又称为DOM Storage) 是HTML5 WebStorage API 提供的,可以方便的在web请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。共同点:都是保存在浏览器端,且同源的。区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而se...转载 2020-03-23 15:16:19 · 460 阅读 · 0 评论 -
vue 的diff算法
vue的diff位于patch.js文件中,复杂度为O(n)。 听大神说了解diff过程可以让我们更高效的使用框架,工作和女朋友都更加好找了,我们赶快了解哈~。 了解diff过程,我们先从虚拟dom开始。...转载 2020-03-07 15:19:21 · 239 阅读 · 0 评论 -
前端项目的自动化编译,合并,压缩,持续集成
webpack之自动编译的三种方式参考每次编译代码时,需要手动输入npm run build,挺麻烦的,有没有自动编译的方式呢?还真有,如下三种:自动编译方式1.webpack’s Watch Mode 观察模式2.webpack-dev-server web服务器3.webpack-dev-middleware webpack中间件观察模式在package.json中添加观察...转载 2020-03-07 12:08:22 · 351 阅读 · 0 评论 -
前端面试重要问题总结(前端100问小结)(十)
第 91 题:介绍下 HTTPS 中间人攻击题目讨论https协议由 http + ssl 协议构成,具体的链接过程可参考SSL或TLS握手的概述中间人攻击过程如下:服务器向客户端发送公钥。攻击者截获公钥,保留在自己手上。然后攻击者自己生成一个【伪造的】公钥,发给客户端。客户端收到伪造的公钥后,生成加密hash值发给服务器。攻击者获得加密hash值,用自己的私钥解密获得真秘钥。同...转载 2020-03-06 17:03:59 · 599 阅读 · 0 评论 -
for in和for of
先说结论:1.推荐在循环对象属性的时候,使用for…in,在遍历数组的时候的时候使用for…of。2.for…in循环出的是key,for…of循环出的是value3.注意,for…of是ES6新引入的特性。修复了ES5引入的for…in的不足4.for…of不能循环普通的对象,需要通过和Object.keys()搭配使用假设我们要遍历一个数组的valuelet aArray = [‘a...转载 2020-03-06 11:26:13 · 154 阅读 · 0 评论 -
前端面试重要问题总结(前端100问小结)(九)
第 81 题:打印出 1 - 10000 之间的所有对称数例如:121、1331 等[...Array(10000).keys()].filter((x) => { return x.toString().length > 1 && x === Number(x.toString().split('').reverse().join('')) })第...转载 2020-03-05 18:11:31 · 241 阅读 · 0 评论 -
前端面试重要问题总结(前端100问小结)(八)
第 71 题: 实现一个字符串匹配算法,从长度为 n 的字符串 S 中,查找是否存在字符串 T,T 的长度是 m,若存在返回所在位置。题目讨论slice左闭右开const find = (S, T) => { if (S.length < T.length) return -1 for (let i = 0; i < S.length; i++) { i...转载 2020-03-04 17:24:47 · 194 阅读 · 0 评论 -
前端面试重要问题总结(前端100问小结)(七)
第 61 题:介绍下如何实现 token 加密转载 2020-03-02 17:51:33 · 233 阅读 · 0 评论 -
为所欲为的proxy
Proxy 是 JavaScript 2015 的一个新特性,下面让我们看看他实现哪些有趣的东西。更安全的枚举类型在 JavaScript 里,我们通常用一个对象来表示枚举值。在计算机编程中,枚举类型是一个由一组叫做元素, 成员,枚举成员的值组成的数据类型.枚举成员的名字在语言中通常充当常量的标识符.枚举类型的变量可以被任意的枚举成员所赋值.但这往往是不安全,我们希望枚举值:如果...转载 2020-03-02 11:18:56 · 138 阅读 · 0 评论 -
前端面试重要问题总结(前端100问小结)(六)
第 51 题:Vue 的响应式原理中 Object.defineProperty 有什么缺陷?为什么在 Vue3.0 采用了 Proxy,抛弃了 Object.defineProperty?转载 2020-03-01 16:55:51 · 192 阅读 · 0 评论 -
HTTPS原理及握手过程
什么是 HTTPSHTTPS,比 HTTP 多了一个 S,这个 S 可以认为是 secure,即 HTTPS 是安全的 HTTP。我们知道,HTTP 是运行在 TCP 层之上的,而 HTTPS 则是在 HTTP 和 TCP 层直接多加了一个 SSL/TSL 层,SSL 层向上提供加密和解密的服务,对 HTTP 来说是透明的。对称加密 vs 非对称加密加密和解密都使用同一种算法的加密方法,称...转载 2020-03-01 15:38:07 · 929 阅读 · 0 评论 -
前端面试重要问题总结(前端100问小结)(五)
第 41 题:下面代码输出什么var a = 10;(function () { console.log(a) a = 5 console.log(window.a) var a = 20; console.log(a)})()转载 2020-03-01 12:43:00 · 251 阅读 · 0 评论 -
移动端网页要点
移动端网页最大的特点是什么?自适应不同尺寸的屏幕!高大上的叫法:响应式!知道了自适应网页怎么做岂不是能很好解决问题了?那么自适应网页怎么做呢?网上关于这方面的文章有很多,我简单的整理一下。一、 HTML设置在head中加入meta标签<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum...转载 2020-02-29 11:39:59 · 295 阅读 · 0 评论 -
浏览器缓存机制介绍
对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,那么就没有必要再将数据回传回来,这样就减少了响应数据。缓存位置从缓存位置上来说分为四种,并且各自有优先级,当依次查找缓存且都没有命中的时候,才会去请求网络。Service WorkerMem...转载 2020-02-28 16:07:20 · 192 阅读 · 0 评论 -
前端100问目录
第 1 题:(滴滴、饿了么)写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?第 2 题:[‘1’, ‘2’, ‘3’].map(parseInt) what & why ?第 3 题:(挖财)什么是防抖和节流?有什么区别?如何实现?第 4 题:介绍下 Set、Map、WeakSet 和 WeakMap 的区别?第 5 题:介绍下深度优先遍历和广度优先...转载 2020-02-28 15:32:28 · 163 阅读 · 0 评论 -
前端面试重要问题总结(前端100问小结)(四)
第 31 题:改造下面的代码,使之输出0 - 9,写出你能想到的所有解法。for (var i = 0; i< 10; i++){ setTimeout(() => { console.log(i); }, 1000)}题目讨论转载 2020-02-27 16:58:03 · 243 阅读 · 0 评论 -
前端面试重要问题总结(前端100问小结)(三)
第 21 题:有以下 3 个判断数组的方法,请分别介绍它们之间的区别和优劣Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()题目讨论Object.prototype.toString.call()每一个继承 Object 的对象都有 toString 方法,如果 toString 方法没有重写的话,会返回 [O...转载 2020-02-26 19:15:31 · 300 阅读 · 0 评论 -
事件循环
任务队列首先我们需要明白以下几件事情:JS分为同步任务和异步任务同步任务都在主线程上执行,形成一个执行栈主线程之外,事件触发线程管理着一个任务队列,只要异步任务有了运行结果,就在任务队列之中放置一个事件。一旦执行栈中的所有同步任务执行完毕(此时JS引擎空闲),系统就会读取任务队列,将可运行的异步任务添加到可执行栈中,开始执行。...转载 2020-02-24 22:10:24 · 82 阅读 · 0 评论 -
前端面试重要问题总结(前端100问小结)(二)
;;体育一转载 2020-02-24 22:09:55 · 416 阅读 · 0 评论 -
重写 toString()和Object.prototype.toString()的不同
首先记住undefined , null没有toString()方法.大家都知道toString()是用来返回相对应类型值的字符串格式.当我们调用toString()返回发现结果并非如此,当我们对Number,String,Boolean,Array类型 调用toString()方法时,会返回想对应的字符串.var arr= [1,2]arr.toString()//"1,2"va...转载 2020-02-23 16:14:23 · 227 阅读 · 0 评论 -
前端面试重要问题总结(前端100问小结)(一)
第一题:React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?部分讨论都是基于没有key的情况diff速度会更快。确实,这种观点并没有错。没有绑定key的情况下,并且在遍历模板简单的情况下,会导致虚拟新旧节点对比更快,节点也会复用。而这种复用是就地复用,一种鸭子辩型的复用。以下为简单的例子:<div id="app"> <div v-for="i...转载 2020-02-21 19:50:23 · 369 阅读 · 0 评论 -
网站性能优化总结(前端篇)
1.网络传输性能优化转载 2020-02-20 19:34:55 · 401 阅读 · 0 评论 -
js数组方法 改变原数组和不改变原数组的方法
改变原数组:pop():删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不 改变数组,并返回 undefined 值。arrayObject.pop()*push():*push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject,而不是创建一个新的数组,arrayObj...转载 2020-02-20 16:52:25 · 636 阅读 · 0 评论