![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端知识点
文章平均质量分 87
啥时候能干全栈
一个想要成为全栈工程师的默默奋斗小憨憨
展开
-
实习心得
2020 07-23一.布局分析由外向内的分析页面布局。确定页面的可视区,划分页面的模块。每一个模块中,分析他的行模块再分析行中的列模块。分析每一个模块的布局方式。思考宽高固定还是自适应。模块构建完毕后,再开始写每一模块中的样式。每一部分的样式布局要自己思考设定,不能照搬设计图,设计图只是为了给你它的宽高等一些参数。(注意设计图中的line-height和height的设定值)二.代码时刻注意代码格式化(shift+command+f)(不能出现空行,空格,重复代码)命名规范(要原创 2020-07-23 19:34:23 · 279 阅读 · 0 评论 -
JS事件捕获和事件冒泡
事件捕获:DOM接收的事件最先应该是window接收,然后再一节一节往下,最后才是具体的元素接受到事件。事件冒泡:IE认为DOM事件应该由具体元素最先接受事件,然后再一节一节往上,最后再由window接收事件。W3C将两种方案做了统一,即:把DOM事件分为两个阶段,事件捕获阶段和事件冒泡阶段,例如:当页面某一个元素被点击,首先是事件捕获阶段,window最先接收事件,然后一节一节往下捕获,最后由具体元素接收,然后再由具体元素一节一节往上,最后window会再次接收事件。这样当页面上一个对象触发某个事件原创 2020-07-03 16:28:01 · 114 阅读 · 0 评论 -
前端缓存
http缓存指的是: 当客户端向服务器请求资源时,会先抵达浏览器缓存,如果浏览器有“要请求资源”的副本,就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。常见的http缓存只能缓存get请求响应的资源,对于其他类型的响应则无能为力,所以后续说的请求缓存都是指GET请求。http缓存都是从第二次请求开始的。第一次请求资源时,服务器返回资源,并在respone header头中回传资源的缓存参数;第二次请求时,浏览器判断这些请求参数,命中强缓存就直接200,否则就把请求参数加到request .原创 2020-07-04 15:22:14 · 210 阅读 · 0 评论 -
网络之存储(cookie webStorage )
cookie 存储数据的功能已经很难满足开发所需,逐渐被 WebStorage、IndexedDB 所取代cookie详情见cookie①LocalStorage保存的数据长期存在(特点:持久),下一次访问该网站的时候,网页可以直接读取以前保存的数据。仅在客户端使用,不和服务器进行通信。可以作为浏览器本地缓存方案。用来提升网页首屏渲染速度(根据第一次返回,将一些不变得信息直接存储在本地)存入数据:locoalStorage.setItem("key","value");读取数据:locoalSt原创 2020-06-16 21:29:20 · 170 阅读 · 0 评论 -
ES6异步解决方案Promise
JS经常会遇到一些异步任务:(1)ajax请求服务器(2)监听按钮是否被点击(3)setTimeout等待一段时间后做某些事情。ES6的异步处理模型分为两个阶段和三个状态。两个阶段:unsettled(未决),settled(已决)三种状态:pending(挂起),resolved(完成),rejected(失败)Promise通过new promise()创建一个任务对象。function matchingPlayer(callback){ return new Promise((原创 2020-06-04 16:45:17 · 212 阅读 · 0 评论 -
JS之闭包
闭包表面现象:综上所以什么是闭包:现在这个father()就是一个 闭包,由父函数和子函数构成,子函数在调用的时候读取父函数的变量,就产生了闭包。(1)有父子函数的关系(2)子函数调用了父函数的变量(3)子函数有调用闭包底层原理必须懂的几个点1.变量的生命周期:局部变量的生命周期在函数执行完成之后就到头了;全局变量的生命周期在页面关闭之后就到头了。2.垃圾回收机制:定期检查你数...原创 2020-04-20 15:58:27 · 207 阅读 · 0 评论 -
JS之性能优化
一.页面级优化1.css Sprites雪碧图:减少http请求2.使用CDN使用第三方CDN,不需要你自己下载3.压缩合并的代码webpack gulp4.使用DNS预解析二.代码级别的1.减少DOM操作2.异步加载默认:script开始解析,后面代码处于阻塞暂停状态defer:script解析,后面代码也解析,都解析完了之后开始执行asnyc:script解析,后...原创 2020-04-19 00:41:35 · 162 阅读 · 0 评论 -
JS之事件循环
JS运行的环境叫宿主环境执行栈:call stack,一个数据结构,用于存放函数的执行环境,没一个函数执行之前,他的相关信息会加入到执行栈。函数调用之前,创建执行环境,然后加入到执行栈,函数调用之后,销毁执行环境JS执行引擎永远执行栈的最顶部异步函数:等到时机到了在执行,比如事件处理函数。异步函数执行的时机,会被宿主环境控制。浏览器宿主环境中有5个线程:1.JS引擎:负责执行执行栈...原创 2020-04-15 18:39:35 · 190 阅读 · 0 评论 -
JS之原型链
所有对象都是通过 new 函数()创建的,该函数叫做构造函数1.函数可以产生对象2.所有对象都是靠函数产生的函数也是一个对象,对象赋值给变量后,变量中保存的是地址,地址指向对象所在内存 var u1 = { name:'jj', age:12 } var u2 = u1; u2.name = "bcd" cons...原创 2020-04-15 16:36:11 · 6720 阅读 · 1 评论 -
究竟什么是异步编程
同步编程是一种典型的请求-响应模式。当前代码耗时执行会阻塞后续代码执行。虽然它能很好的保证程序的执行但是当:请求服务器接口数据,需要根据返回的数据内容执行后续操作,读取文件和请求接口直到数据返回这一过程是需要时间的,网络越差耗费时间越长,同步的话js在这一时间不能处理其他任务,页面的交互会被阻塞。若此时ajax请求数据同步进行:浏览器锁死,不能进行其他操作,每当发出新的请求浏览器都会锁死。多线程...原创 2020-04-15 10:41:36 · 2085 阅读 · 1 评论 -
防抖,节流
前端开发中频繁的触发事件执行,对于DOM操作,资源加载等耗费性能的处理,很可能导致页面卡顿,甚至浏览器崩溃。函数节流和防抖应运而生。防抖<body> <input type="text" id="inp"></input> </body><script> var oInp = document.getElement...原创 2020-04-14 22:35:04 · 125 阅读 · 1 评论 -
JS执行机制,bind的模拟实现,纯函数,柯里化
JS单线程:一个时间只能进行一件事情,JS就是为了与用户交互,处理DOM,假如是多线程,同一时间修改多个DOM,另一个线程想要删除DOM,问题就会变的复杂,浏览器不知道听谁的。遇到大量数据:vue与nodejs配合,SSR技术JS引擎线程的执行机制:单线程异步执行,基于事件驱动。同步和异步任务分别会进入到两种不同的场所,同步的进入主线程,异步的进入Event Table并注册函数当指定的...原创 2020-04-14 20:40:36 · 188 阅读 · 0 评论 -
Promise到底解决了什么问题啊
在js环境下,我们编程大多数是异步编程,在异步编程中使用最多的是回调函数,然后就会形成回调地狱。我们会发现编程中的几个大问题:1.回调配合着嵌套会产生回调地狱问题,2.由于回调存在着依赖反转,在使用带三方提供的方法时,存在信任问题3.当我们不写错误的回调函数时,会存在异常无法捕获4.导致我们性能更差,本来可以一起做的但是回调后,导致多件事情顺序执行,用的时间更多。So,怎么解决?首...原创 2020-04-13 23:48:23 · 1197 阅读 · 0 评论 -
正则表达式
正则表达式正则表达式就是一个表达式,用来查找一个有指定【特点】的表达式,规则匹配的。正则表达式定义的方式var reg = /abc/;var reg = new RegExp('abc');正则表达式使用方法reg.test(str);str.match(reg);特殊属性 i/g/mg代表的是global全局匹配i代表ignoreCase忽略大小写,m代表multi...原创 2020-04-02 15:04:55 · 122 阅读 · 0 评论 -
window环境下node版本和gulp版本不兼容降低node版本解决方案
报错:primordials is not defined;写 项目卡到版本不兼容问题真的就巨烦人。gulp3.x.x需要将node降低到11.x.x(另:gulp3和gulp4有很大区别)使用nvm:就是一个可以让你在同一台机器上安装和切换不同版本node的工具。(1):下载nvmhttps://github.com/coreybutler/nvm-windows/releases...原创 2020-03-21 06:26:50 · 1999 阅读 · 0 评论 -
JS / CSS / 网络部分知识总结
(1)垂直两栏左边固定 右边自适应//基本布局 *{ margin: 0; padding: 0; } .outer{ height: 200px; } .left{ background-color: gold; height: 200px; } .right{...原创 2020-03-19 17:14:18 · 579 阅读 · 0 评论 -
元素居中总结
①<style> main{ position: absolute; width: 18rem; height: 6rem; top: 50%; left: 50%; /* 6/2 */ margin-top: -3rem; /* 18/2 */ margin-left: -9rem;...原创 2020-03-18 18:04:32 · 130 阅读 · 0 评论 -
CSS预编译器
你知道什么是CSS 预编译器么?为什么会出现CSS 预编译器这个东西呢?这就要谈到CSS 的不足了:没有变量(新的规范已经支持了),不支持嵌套,编程能力较弱,代码复用性差。这些不足导致写出来的 CSS 维护性极差,同时包含大量重复性的代码;为了弥补这些不足之处,CSS 预编译器应运而生。而谈到 CSS 预编译器,就离不开这三剑客 Sass、Less、 Stylus。历史上,最先登场的是 Sass...原创 2020-03-06 19:05:54 · 379 阅读 · 0 评论 -
标准盒模型和 IE 盒模型
对于标准盒模型和 IE 盒模型你了解多少?盒模型讲解我们今天只会提到 标准盒模型,和 IE 盒模型,两种盒模型模式讲解。首先来看标准盒模型。只要是盒模型都会有这四个属性 margin, border, padding, content 这四个部分。也就是说一个基本的盒模型由着四部分组成。样子如下:这里要说明的是,为了体现出盒模型的层次感。这里的 content 和 padding 用了不...原创 2020-03-02 19:51:00 · 311 阅读 · 0 评论 -
对于 Cookie 你了解多少
cookie 是什么?http 是一个不保存状态的协议,什么叫不保存状态,就是一个服务器是不清楚是不是同一个浏览器在访问他,在 cookie 之前,有另外的技术是可以解决,就是在请求中插入一个 token,然后在发送请求的时候,把这个东西带给服务器,这种方式是易出错,所以有了 cookie 的出现cookie 是什么,cookie 就是一种浏览器管理状态的一个文件,它有 name,也有 val...原创 2020-02-21 15:09:50 · 248 阅读 · 0 评论 -
了解HTTP 缓存
---------------------武汉加油,陕西加油,中国加油---------------2020-02-17----------------重用已获取的资源能够有效的提升网站与应用的性能。Web 缓存能够减少延迟与网络阻塞, 进而减少显示某个资源所用的时间。借助 HTTP 缓存,Web 站点变得更具有响应性。1.浏览器发起请求(携带 Cache-Control ),会先去本地缓存...原创 2020-02-17 22:38:07 · 194 阅读 · 1 评论 -
页面加载出现白页是什么原因造成的
1、页面加载时,有较长时间的白页,有可能是什么原因造成的?在日常开发中,会发现浏览器白页情况会偶尔出现。这是怎么一回事?我们又该怎么去分析在哪里出现了问题?接下来我们一探究竟。为了更好的发现问题,解决问题,我们将从三个方向来说明白页问题:客户端方向,服务端方向以及网络方向。客户端方向JavaScript 异常由于 JavaScript 出现的问题导致了页面白页。那么那些情况下 js 报...原创 2020-02-12 22:31:14 · 6640 阅读 · 0 评论 -
什么是拖库,撞库和洗库
--------------------------2020-02-06-----------------------武汉加油!中国加油!-----------------------今年这个年是我们陪伴父母最多的一年吧-----平安胜意----------------------------------你知道拖库,撞库和洗库么?什么是拖库(因为谐音,也经常被称作“脱裤”).拖库这个行为现在...原创 2020-02-06 22:42:26 · 8812 阅读 · 1 评论 -
setTimeout与requestAnimationFrame的区别
--------------------武汉加油!!!中国加油!!!------------------------------------------------------2020-02-02-----------------今天这个日期不错--------------------------------------------------这两个东西是和动画相关的两个api什么是动画?动画...原创 2020-02-02 21:09:46 · 1950 阅读 · 1 评论 -
你了解HTTP吗?如何减少HTTP请求确保你的性能最优。
------------------------武汉加油!中国加油!跨过了病情我们都去见最想见的人------------1.HTTP简介**超文本传输协议**(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的www文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。1960年美国人Ted Ne...原创 2020-02-01 12:55:29 · 1016 阅读 · 0 评论 -
了解ajax,ajax的优化有哪些
2020-01-20------------------------------学习打卡---------------------------------------------------------------------AJAX简介AJAX全称Asynchromous JavaScript and XML(异步的JavaScript 和 XML),将ajax中处理的一些异步信息或叫“即...原创 2020-01-20 23:06:25 · 288 阅读 · 0 评论 -
跨域问题
2020-01-18跨域访问资源什么东西属于资源?js文件算吗?算,但是js文件是允许被跨域请求的。所有的src请求的资源可以被跨域请求。href大部分可以被跨域请求。css文件jpg文件等。哪资源算跨域请求的资源?1.后端接口的数据。2.其他域的Cookie。3.其他域的缓存。什么是其他的域?怎么样算跨域?页面本身:有协议(http/https),域名,端口要请求的数据:ht...原创 2020-01-18 18:24:27 · 197 阅读 · 0 评论 -
页面的正确打开,发送网络请求
2020-01-18B/S结构Browser/server --Browser只负责内容展示,Server负责提供内容。C/S结构Client只负责内容的展示,Server负责提供内容。------------kk--------------------------------index.html页面的本质是什么?压面的本质就是一个字符串。带有HTML格式的字符串。浏览器向服务器...原创 2020-01-18 15:38:33 · 322 阅读 · 0 评论 -
Cookie与Session
Cookie:1.如果我们用JS的变量来存储数据,name在页面关闭的时候,数据就消失了。2.保持登陆状态是怎么做到的呢?按照正常的HTTP协议来说,是做不到的。因为HTTP协议上下文无关协议。3.所以说前端页面上要有一个可以持久化存储数据的东西。一旦登陆成功,就记载在这个页面里。Cookie是有限制的。Cookie是存在浏览器里面的,不存是存在某个页面上。是可以长期存储的。Cook...原创 2020-01-18 14:48:13 · 125 阅读 · 0 评论 -
深入Get和Post请求的区别
2020-1-18 开年第一篇啊哈哈哈 2020年学习第一天打卡Get 与Post请求方式的区别1.是基于什么前提的?如果什么前提都没有,不使用任何规范,只考虑语法和理论上的HTTP协议。:Get和Post几乎没有什么区别,只有名字不一样。2.如果是基于RFC规范的。(1)理论上的:GET和POST具有相同语法,但是有不同语义。GET是获取数据的,POST是用来发送数据的,其他地方没有区...原创 2020-01-18 14:21:07 · 144 阅读 · 0 评论