- 博客(38)
- 收藏
- 关注
RSS订阅原创 前端性能优化总结
性能优化加载相关为什么强调把css放在header中，js放在尾部？加载相关为什么强调把css放在header中，js放在尾部？因为构建Render树需要DOM和CSSOM树，所以HTML和CSS都会阻塞渲染。所以需要css尽早加载（放在头部），以缩短首次渲染的时间。除此之外，由于css不会阻塞文档的解析，但是会阻塞文档渲染。把CSS放在头部，可以先生成CSSOM树，后续渲染DOM的时候，可以一次性构建Render树，只需要渲染一次；如果把CSS放在后面，会先解析一次DOM，加载CSS之后，会重
2020-10-18 14:58:01
442
1
原创 （1）关于this指向问题
关于this指向问题一.new的实现原理是什么？在js中，只要new一个函数，就会new一个对象。 对于new创建的对象 var arr =new Array（）new的实现原理（new的过程 4步骤）在内存中创建一个空对象；将构造函数的作用域给新对象（this指向这个新对象）执行构造函数中的代码（为这个新对象添加看属性）如果构造函数中没有返回其他对象，则返回this，即创建的这个新对象；否则，返回构造函数中返回的对象。手写实现new操作符 // new的实现
2020-10-01 15:41:03
246
原创 cookie，localStorage ，sessionStorage理解和区别
cookie，localSorage，sessionStorage的理解和区别理解1.共同点：cookie，sessionStorage，localStorage都是保存在浏览器端的，并且都是同源的。2.Cookie: cookie数据始终在同源http请求中携带，在浏览器和服务器端来回传递。而sessionStorage和localStorage是不会自动把数据发给服务器的，仅在本地保存。cookie数据还有路径（path）概念，可以进行限制。cookie只属于某个路径下，存储数据大小限制也不同
2020-05-31 22:13:37
296
原创 js原型 原型链相关内容
如何理解原型和原型链的？所有的函数数据类型都天生自带一个prototype属性，该属性的属性值是一个对象prototype的属性值中天生自带一个constructor属性，其constructor属性值指向当前原型所属的类所有的对象数据类型，都天生自带一个_proto_属性，该属性的属性值指向当前实例所属类的原型把所有的对象共用的属性全部放在堆内存的一个对象（共用属性组成的对象），然后让每一个对象的 __proto__存储这个「共用属性组成的对象」的地址。而这个共用属性就是原型，原型出现的目的就是为
2020-05-31 18:33:32
110
原创 网络总结归纳（二）HTTP
网络归纳总结：一、http：http是超文本传输协议。超文本可以将多种文本/图像等进行混合，更重要的是可以从一个文本跳转到另一个文本，而对于传输则就是沟通。http他有不同的版本0.9 这个版本相对简单，采用纯文本格式，而且设置为只读，所以只能使用get方法从服务器获取html文件，响应以后就直接关闭，响应中只包含了文档本身，没响应头，无错误吗，无状态码。响应过程：应用层的http建立在传输层tcp之上并运用tcp可靠性等特性，先三次握手建立连接，客户端请求建立连接，服务端响应请求，数据以asci
2020-05-30 23:59:06
115
原创 浏览器：从URL输入到网页呈现的过程中，发生了什么？
基础版本：1.浏览器会根据请求的URL交给DNS域名解析，找到真实的ip，向服务器发起请求。2.服务器交给后台处理后返回数据，浏览器接受文件（HTML，JS,CSS，图像等）；3.浏览器对加载到的资源（HTML,JS,CSS等）进行语法解析，建立相对应的内部数据结构（如：HTML的DOM）；4.载入解析到的资源文件，渲染页面，完成。完善版1.从浏览器接受url到开启网络请求线程（浏览器的机制以及线程之间的关系）2.开启网络线程到发出一个完整的http请求（涉及dns查询，tcp/ip请求，5
2020-05-30 18:57:19
394
原创 js正则表达式RegExp总结篇
js正则表达式什么是正则表达式？一、校验数字的表达式1 数字：1*$2 n位的数字：^\d{n}$3 至少n位的数字：^\d{n,}$4 m-n位的数字：^\d{m,n}$5 零和非零开头的数字：^(0|[1-9][0-9]*)$6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$7 带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})?$8 正数、负数、和小数：^(-|+)?\d+(.\d+)?$9 有两位小数的正实数：2+(.
2020-05-26 23:55:43
272
原创 关于数组位置方法中的indexOf（）和lastIndexOf（）参数问题的理解
indexOf（）和lastIndexOf（）的参数值最近在看红宝书，对于inedxOf()和lastIndexOf()的第二个参数一直没有理解，也上网查了很多，不同的解释和理解。于是总结一下我在查询后所理解的结果，如理解不正确，请大佬纠正指出，非常感谢！在解释第二参数之前，先总结一下这两个位置方法。indexOf() 表示从数组的开头（位置0）开始向后查找所要查询的内容。lastIndexOf() 表示从数组的末尾开始向前查找所要查询的内容。这两个位置方法：（1）都接收两个参数（第一个参数：要
2020-05-25 14:41:09
2497
2
原创 如何理解js中的垃圾回收机制？
js中的垃圾回收机制必要性：由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进 行动态的存储分配。JavaScript 程序每次创建字符串、数组或对象时，解释器都必须分配内存 来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用， 否则，JavaScript 的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。这段话解释了为什么需要系统需要垃圾回收，JS 不像 C/C++，他有自己的一套垃圾回收机制 （Garbage Collection）。J
2020-05-23 14:17:41
239
原创 关于跨域相关知识整理
跨域同源策略：所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。同源策略的限制：1.Cookie、LocalStorage 和 IndexDB 无法读取2.DOM 和 Js对象无法获得3.AJAX 请求不能发送跨域解决方案：通过jsonp跨域document.domain + iframe跨域location.hash + iframewindow.na
2020-05-21 17:38:51
151
原创 关于cookie，localStorage ，sessionStorage
localSorage，sessionStorage以及cookie之间的区别
2020-05-21 13:35:17
259
原创 es6新特性有哪些
ES6特性你了解多少？ 如果遇到一个东西不知道是ES6还是ES5，你改如何区分？1、常用的es6新特性：let && const；let 命令也用于声明对象，但是作用域为局部；iterable 类型。为了统一集合类型，ES6 标准引入了新的 iterable 类型，Array、Map 和 Set 都属于 iterable 类型，具有 iterable 类型的集合可以通过新的for … of 循环来遍历。2、es6 比 es5 增加了很多特殊的方法，如果你遇到了这些特殊的方法， 你就可以
2020-05-09 21:44:24
28899
原创 关于HTTP状态码之301 302 304
301、302、304301 Moved Permanently 永久移动。是指请求的资源已被永久的移动到新的URL，返回信息会包括新的URL，浏览器还会自动定向到新的URL。今后任何新的请求都应该使用新的URL来代替。302 Found 临时移动。与301类似。但是资源只是临时被移动。客户端应该继续使用原有的URI304 Not Modified 未修改。所请求的资源未修改，服务器返回此...
2020-04-20 23:43:10
5117
原创 网络总结归纳（一）
一、cookie，session，token二、get，post三、tcp，udp四、三次握手，四次挥手五、网络7层 / 5层 结构
2020-04-20 22:34:34
354
原创 操作系统归纳总结
跨域同源策略：所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。同源策略的限制：1.Cookie、LocalStorage 和 IndexDB 无法读取2.DOM 和 Js对象无法获得3.AJAX 请求不能发送跨域解决方案：通过jsonp跨域doc...
2020-04-09 20:59:17
312
原创 DOM事件流，事件冒泡，事件捕获，事件委托，事件监听
如何理解原型和原型链的？所有的函数数据类型都天生自带一个prototype属性，该属性的属性值是一个对象prototype的属性值中天生自带一个constructor属性，其constructor属性值指向当前原型所属的类所有的对象数据类型，都天生自带一个_proto_属性，该属性的属性值指向当前实例所属类的原型把所有的对象共用的属性全部放在堆内存的一个对象（共用属性组成的对象），然后让每...
2020-04-07 23:33:39
221
原创 安全防范 XSS 、CSRF、SSRF
XSS 简单点来说，就是攻击者想尽一切办法将可以执行的代码注入到网页中。XSS 可以分为多种类型，但是总体上我认为分为两类：持久型和非持久型。持久型也就是攻击的代码被服务端写入进数据库中，这种攻击危害性很大，因为如果网站访问量很大的话，就会导致大量正常访问页面的用户都受到攻击CSRF 中文名为跨站请求伪造。原理就是攻击者构造出一个后端请求地址，诱导用户点击或者通过某些途径自动发起请求。如果用...
2020-04-01 23:34:38
994
原创 关于JS事件循环
JS事件循环浏览器的主要组件包括调用堆栈，事件循环，任务队列和Web API。像setTimeout，setInterval和Promise这样的全局函数不是JavaScript的一部分，而是 Web API 的一部分。JS调用栈是后进先出(LIFO)的。引擎每次从堆栈中取出一个函数，然后从上到下依次运行代码。每当它遇到一些异步代码，如setTimeout，它就把它交给Web API。因此，每...
2020-03-30 23:14:40
94
原创 关于js运行机制
js运行机制js是个单线程的语言，所以如果说遇到setTimeout、setInterval、ajax请求等需要停顿的语句，就停下来等这个停顿时间过去的话，语言的运行就阻塞在这里了。所以说，js就想了个办法，那就是我遇到setTimeout这样停顿类的语句，不管你停顿多久吧（可能是停顿0），都一律跳过去，等那些不需要停顿的语句执行完了，再回过头来执行需要等待的语句。“js引擎单线程执行的,它是...
2020-03-29 21:53:05
88
原创 关于深拷贝、浅拷贝
深拷贝、浅拷贝浅克隆:只是拷贝了基本类型的数据，而引用类型数据，复制后也是会发生引用，我们把这种拷贝叫做“（浅复制）浅拷贝”，换句话说，浅复制仅仅是指向被复制的内存地址，如果原地址中对象被改变了，那么浅复制出来的对象也会相应改变。深克隆：创建一个新对象，属性中引用的其他对象也会被克隆，不再指向原有对象地址。JSON.parse、JSON.stringify()...
2020-03-24 23:40:24
80
原创 css布局 （关于BFC布局、Flex布局、Grid布局）总结整理
css布局BFC （BFC是指块级格式上下文）产生BFC的方法BFC可以解决哪些问题？常见面试题Flex布局什么是Flex布局？Flex布局模型Flex布局的属性为容器属性和元素属性两种：如何开启Flex布局？/Flex布局的使用容器属性（flex-container）元素属性（flex-items）Grid布局其他常见布局方式BFC （BFC是指块级格式上下文）（Formatting Contexts 是指格式化上下文）1.BFC所具有的特性（1）. 是一个独立的渲染区域，与区域外部毫不相
2020-03-15 16:44:01
570
原创 HTML5新特性复习整理
关于H5的新特新性标签增删8个语义化元素 header section footer aside nav main article figure内容元素 mark高亮progress进度新的表单控件calander date time email url search新的input类型 color date datetime...
2020-03-10 23:37:39
200
原创 JS中的数组的使用
数组的基本使用1.数组基础部分-数组的其他操作迭代方法3.关于 foreach,each,map参考掘金forEach参考掘金each参考掘金map在 JavaScript 中 为什么你应当使用 map 和 filter 来替代 forEach？参考掘金处理一个包含所有人的数组，以找出每个年龄小于 15 岁的人。当你需要将一个数组或一部分数组复制到一个新数组时，首选...
2020-03-02 21:11:53
206
原创 关于Axios
一.概念axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。二.功能特点在浏览器中发送 XMLHttpRequest请求从在node.js 发送 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF三.在项目中安装axios可直接在项目目录在安装axios的...
2020-02-08 03:09:22
134
原创 Git常用命令及Git分支
Git常用命令，Git分支git常用命令(1). git init 初始化git仓库(2). git add 添加文件（把指定文件存入暂存区stage）eg：git add ./index.htmleg: git ./ 把所有修改文件放入暂存区(3). 提交git commit -m"这次添加东西的说明"（提交到暂存区）git commit -am“添加东西的说明...
2020-02-04 03:44:41
147
原创 关于Glup
gulp ----项目工程化的工具一，作用：(1) 能够完成代码的压缩(2) 合并，复制，监听，ES6的代码转换，启动服务器等等二，gulp 使用步骤：搭建环境(1)安装nodeJS(2) 安装node的目的是为了测试npm （npm是nodeJS的包管理工具 全 称：nodeJS Package Manager）使用npm的原因：a.如果一个项目中使用的第三方js代码非常多，...
2020-02-03 22:15:17
215
原创 vue项目环境搭建所遇到的问题
本人vue项目框架搭建过程在删除框架之后所遇到的问题（第一次搭建成功的前提下）1如果本地在搭建环境执行如下步骤后，在执行vue init webpack hanjiaxm 的指令之后，出现错误（如下所示）则创建项目时，运行vue init webpack 项目名字，报错信息如下:vue-cli · Failed to download repo vuejs-templates/webp...
2020-02-03 03:53:42
376
原创 关于Git
Git简易教程1.Git简单介绍2.版本控制工具比较3.Git使用流程(1). 操作步骤(2).4.Git常用命令有人说过学会和掌握git是每个程序员的必备技能，根据本人对git的一些学习，现将git的一些知识点进行归纳总结，主要目的是加深和巩固自己对git的知识掌握情况。（ps：如果有错误和不足欢迎评论补充）Git介绍git----分布式版本控制工具1.版本控制工具能够解决多...
2020-01-19 11:28:35
168
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人