- 博客(42)
- 收藏
- 关注
RSS订阅
原创 frond-end summary
分类链接css用CSS实现三角形、等腰梯形等根本原理以及编码实现javascripthtml面试中那些html的坑es6react优化前端性能优化网络UDP协议 （其余在微信）面经前端面试中那些常问的问题数据结构与算法js数据结构与算法——主要是栈 队列 图 和排序算法。你不知道的js你不知道的js上卷——函...
2019-04-18 12:12:11
122
原创 快速排序找出第K大的元素
利用这个思路，当我们找到这个基准值对应的 index，等于我们要找的index时，就可以了，不用管左右两边是否是有序的。快速排序的思路主要就是选一个基准值p，然后将小于p的值放在p的左右，大于p的值放在p的右边，然后对左右数组进行递归。有序数组里第 K 大的元素就是index 为 array.length - k 的元素。这里是新建数组分别用来存比基准值小和大的元素。然后看优化版，不新建数组，直接在原数组上操作。
2024-05-07 22:08:56
226
原创 并发请求控制
• 所有请求完成后，结果按照 urls 里面的顺序依次打出（发送请求的函数可以直接使用fetch即可）• 每当有一个请求返回，就留下一个空位，可以增加新的请求。• 要求最大并发数 maxNum。
2024-04-21 22:33:10
135
转载 CSRF攻击与防御
CSRF概念：CSRF跨站点请求伪造(Cross—Site Request Forgery)，跟XSS攻击一样，存在巨大的危害性，你可以这样来理解：攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。 如下：其中Web A为存在CSRF漏...
2019-08-07 11:36:47
164
原创 js经典排序算法
首先来一个大佬汇总蛤，https://juejin.im/post/5c72280351882562914edb61（先占个坑）
2019-08-07 11:16:14
114
原创 关于原型链的那些事儿
1.创建对象我们知道，创造对象有很多种方法：1.1 比如最原始的工厂模式：1.2 然后是构造函数模式：以上两种方式不同的地方在于：1.构造函数模式没有显式地创建对象；2.构造函数模式直接将属性和方法赋给了this对象；3.构造函数没有return语句那么，要创建Person的新实例，必须使用new操作符，使用这种方式调用构造函数实际上经历了哪些步骤呢？1.创建一个新对象；2...
2019-07-30 11:50:34
136
原创 实现一个环形进度条
前两天偶然看到这个题目，抽空做了一下话不多说，看看具体怎么实现的叭如果是对其前端比较熟悉的人，看到这个图应该大致知道有哪几个点啦，比如用到了同心圆、旋转。1.画两种不同背景色的圆（我这里是旋转的浅色，把深色作为底色，在浅色旋转的过程中，深色一步步露出来）2.浅色部分是两个圆切割出的两个半圆，一个左半圆，一个右半圆3.右半圆旋转180°后，置它的背景色为底色，位置归位4.然后左半圆旋转...
2019-07-21 18:08:31
1224
原创 性能优化
前端性能优化最佳实践减少页面加载时间的方法：1.压缩html css js等文件2.减少DNS解析3.减少DOM元素，对于相关操作可以缓存节点4.改变页面元素样式时尽量操作className，而不是频繁使用xxx.style.5.避免不必要的重定向6.合并js css及图片，减少请求数量7.使用CDN8.合理利用缓存9.关于CDN？https://zhuanlan.z...
2019-07-21 16:43:31
303
原创 剑指offer
//求1到n的数中出现的所有1的次数 console.log(NumberOf1Between1AndN_Solution(1)); function NumberOf1Between1AndN_Solution(n) { var sum=0; if(n<1){ ...
2019-07-21 16:37:04
94
原创 HTML
什么是DOCTYPE?https://zhuanlan.zhihu.com/p/32609899doctype是一种文档通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。<!DOCTYPE>声明用来指示浏览器当前页面使用的是哪个版本HTML写的指令。必须放在HTML文档第一行，HTML标签之前。浏览器本身有两种模式：...
2019-06-14 15:44:02
102
原创 BFC
什么是BFC？BFC（block formatting context）直译为“块级格式化上下文”，是web页面中盒模型布局的CSS渲染模式，它是一个独立的渲染区域，规定了内部的Block-level Box如何布局，与区域外部毫不相干。在这之前，我们先说一下文档流，我们常说的文档流其实分为定位流、浮动流和普通流三种。普通流就是指BFC中的FC，格式化上下文，它是页面中的一块渲染区域，有一套...
2019-06-09 17:03:10
81
原创 CSS两栏三栏布局
所有的布局都用一个容器包含。两栏布局1. 浮动float+margin-left<div class="container"> <div class="left ">我是左边</div> <div class="right ">我是右边</div></div>.container{...
2019-06-08 20:05:41
156
原创 安全
XSSXSS，即Cross Site Script，中译是跨站脚本攻击，其原本缩写是CSS，但是为了和层叠样式表有所区分，因而在安全领域叫做XSS。XSS攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。这类攻击通常包含了HTML以及用户端脚本语言。XSS攻击的防范:HttpOnly...
2019-06-05 22:24:31
182
原创 CSS-居中
水平居中1. 定宽的块级元素当被设置元素为定宽块级元素时，可以用外边距实现。<div class="parent" > <div class="child" >demo</div></div>.child{ width:200px; margin:0 auto;}2.行内元素当被设置元素为行内元素时，可以使用此方法，不...
2019-06-05 22:23:30
120
原创 跨域
什么是跨域？所谓跨域，就是网站的协议名（protocol：如http://）、域名（host：如 www.example.com）、端口号（port：例如80，默认端口可以省略）这三者中任意一个不同，网站之间的数据传输或者请求就属于跨域请求了。这是由于浏览器的同源策略，为了防范跨站脚本的攻击，禁止客户端对不同源的服务器进行跨站调用，但是跨域并非浏览器限制了发起跨站请求，而是跨站请求可以正常发送...
2019-05-29 22:02:18
133
原创 js实现简单的tab切换案例
效果如下每点击就切换相应的页面/*css*/html ,body ,div ,ul ,li{ padding: 0; margin: 0; } ul{ list-style: none; } body{ padding: 100px...
2019-05-29 11:16:06
831
原创 回流（reflow）和 重绘（repaint）
在这之前我们再复习一遍浏览器渲染过程图我们知道渲染中有一步是构建渲染树（即render tree）回流：当render tree中的一部分或全部因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的时候，就叫回流（reflow）。回流几乎是无法避免的，现在页面上流行的一些效果，比如树状目录的折叠、展开等都会引起浏览器的回流，只要这些行为影响了页面上某些元素的占位面积、定位方式、边距等属性的变化...
2019-05-27 21:27:56
303
原创 浏览器渲染原理与过程
要了解这个过程，我们首先得知道一个名词——关键路径渲染（Critical Rendering Path，它是指与当前用户操作有关的内容。例如用户在浏览器中打开一个页面，其中页面所显示的东西就是当前用户操作相关的内容，也就是浏览器从服务器那里收到的HTML、css、JavaScript等相关资源，然后经过一系列处理后渲染出的web页面。1.浏览器渲染过程先解释一下几个概念：DOM Tree：浏...
2019-05-27 16:50:47
141
原创 GET和POST的区别
当看到这个问题时，大多数人想到的是这张图中的信息但是实际上，get和post是HTTP中两种发送请求的方法，而HTTP我们大家都知道，是基于TCP/IP协议的关于数据如何在万维网中通信的协议，也就是说get和post的底层也是TCP/IP，所以从根本上来讲，get和post是没有区别的。它们之间在用法上的区别就是get用于请求数据，post用于修改数据。还有get产生一个TCP数据包，p...
2019-05-26 22:12:09
134
原创 网络&浏览器
1. OSI七层模型？作用？OSI七层模型通过七个层次化的结构模型使不同的系统不同网络之间实现可靠通讯，其主要功能就是帮助不同类型主机实现数据传输。物理层：利用传输介质为数据链路层提供物理连接，实现比特流的透明传输。数据链路层：通过各种控制协议，将有差错的物理信道变成无差错的、能可靠传输数据帧的数据链路。网络层： 通过路由选择算法，为报文或分组通过通信子网选择最适当的路径。 数据链路层的...
2019-05-26 20:36:32
785
原创 DNS协议
DNS服务器树状结构图由上往下分别是：根 DNS 服务器 ：返回顶级域 DNS 服务器的 IP 地址顶级域 DNS 服务器：返回权威 DNS 服务器的 IP 地址权威 DNS 服务器 ：返回相应主机的 IP 地址DNS服务器十分重要，因为它掌握了整个互联网的地址簿，如果上网的人都去同一个地方访问某一台服务器，那么时延会非常大，因而DNS服务器一定要设置成高可用、高并发、分布式的。1...
2019-05-21 19:44:57
135
原创 网络协议TCP
TCP头格式1. TCP协议要关注的几个问题顺序问题丢包问题连接维护流量控制拥塞控制2. TCP的三次握手？连接维护问题涉及到建立连接，这就要讲到TCP的三次握手，“你好，我是A” “你好A，我是B” “你好B” ，客户端发出请求，服务端收到并发出确认接收应答，客户端收到应答并发送收到应答的应答，创建连接成功。具体传输过程如图SYN：代表请求创建连接，所以在三次...
2019-05-13 16:34:46
131
原创 网络协议UDP
1. TCP和UDP有哪些区别?首先，建立连接是为了在客户端和服务端维护连接，而建立一定的数据结构来维护双方交互的状态UDP：面向无连接继承IP包的特性：不保证不丢失，不保证按序到达基于数据报，一个一个发，一个一个收没有拥塞控制无状态服务TCP面向连接提供可靠交付：通过TCP连接传输的数据 无差错、不丢失、不重复、按序到达面向字节流：发送的是一个流，没头没尾拥有拥...
2019-05-13 10:11:41
196
原创 BOM
DOM和BOM结构树，可以看到document是BOM树的一个所属对象，在BOM中用得比较多的就是Document、Location1.window对象是浏览器中的顶层对象，是对浏览器窗口的功能API的封装。常用属性：-console.log-name 设置读取窗口名字常用方法-alert()-confirm() 进行确认操作的消息框-close() 关闭-print()...
2019-05-12 11:01:18
234
1
原创 DOM
DOM继承关系图1.document对象的常用属性//只读document.URL//可更改，获取当前html的title的文字内容document.title其他不常用属性见文档document属性2.document常用访问DOM树节点方法//返回Element对象document.getElementById('')//根据CSS选择器选取满足条件的第一个元素，返...
2019-05-08 23:14:38
72
原创 es6
一.let&const命令1.let命令有以下几个特点：a).let声明的变量只在其所在的代码块中有效。以下代码中由于当前的i只在本轮有效，所以每次循环的i都是一个新的变量，js内部引擎能记住上一次循环的值，帮助重新生成一个正确值的i。但是如果将let换成var，由于i是全局变量，最后会输出10。var a=[];for(let i=0;i<10;i++){ //父作用域...
2019-05-06 16:24:45
106
原创 用CSS实现三角形、等腰梯形等根本原理以及编码实现
实现原理关键实现因素在于border的top right left bottom属性，看下面这样一段css样式：.triangle { height: 0px; width: 0px; border-top: 50px solid gold; border-right: 50px solid gray; border-bottom: 50px solid...
2019-04-17 23:13:43
1834
原创 总结：数字、字符串、布尔值、对象之间的转换规则和相等比较
首先让我们来看一张图：在这张图中，连线表示相互比较的类型值，靠近类型值的N或P表示该值在比较时要进行的操作N：即Number()，把该值做数字转换；P：toPrimitive()，先检查该值是否有valueOf()方法，如果有并且返回基本值，就使用此值进行强制类型转换，如果没有就使用toString()返回的返回值（如果存在）进行强制类型转换。还需要了解一些基本信息：假值列表：null...
2019-04-12 17:30:28
1353
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人