CSS:margin塌陷和margin合并 发表于 2020-02-17 | 分类于 CSS | 字数统计: 439 字 | 阅读时长 ≈ 2 分钟 margin塌陷 标准文档流中,垂直方向的margin不叠加,以较大的为准。即父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margin会取其中最大的值。 正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位。 但由于margin的塌陷,父级相对浏览器定位.而子级没 ... 阅读全文 »
Vue:路由原理 发表于 2020-02-15 | 分类于 Vue | 字数统计: 1,425 字 | 阅读时长 ≈ 6 分钟 单页面应用随着前端应用的业务功能越来越复杂、用户对于使用体验的要求越来越高,单页应用(SPA)成为前端应用的主流形式。大型单页应用最显著特点之一就是采用前端路由系统,通过改变URL,在不重新请求页面的情况下,更新页面视图。 vue-router实现方式“更新视图但不重新请求页面”是前端路由原理的核心 ... 阅读全文 »
WebSocket 发表于 2020-02-15 | 分类于 前端 | 字数统计: 1,607 字 | 阅读时长 ≈ 6 分钟 长连接和短连接长连接是存在于网络层的一种连接状态,而实现它则需要在传输层进行开发,因为它是基于对真实数据的收发,需要在底层进行管控。 http http1.0不支持长连接,http1.1支持长连接 http1.x是文本协议,http2.0是二进制协议 HTTP作为应用层协议,其实它的生命周期在服务 ... 阅读全文 »
回流(Reflow)和重绘(Repaint) 发表于 2020-02-15 | 分类于 前端 | 字数统计: 189 字 | 阅读时长 ≈ 1 分钟 浏览器渲染解析HTML,生成DOM树,解析CSS,生成CSSOM树。将DOM树和CSSOM树结合,生成渲染树(Render Tree)。 回流当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流。 每个页面至少需要一次回流,就是在页面第一次加载 ... 阅读全文 »
页面渲染过程(输入一个url) 发表于 2020-02-13 | 分类于 前端 | 字数统计: 695 字 | 阅读时长 ≈ 2 分钟 输入一个url到网页呈现 输入网址 发送到DNS服务器,并获取域名对应的web服务器对应的ip地址。 与web服务器建立TCP连接 浏览器向web服务器发送http请求 web服务器响应请求,并返回指定url数据 浏览器下载web服务器返回的数据。 解析 HTML 文件,构建 DOM 树,同时浏览 ... 阅读全文 »
JS:简化运算 发表于 2020-02-12 | 分类于 JS | 字数统计: 77 字 | 阅读时长 ≈ 1 分钟 三元运算12345678let type;if(type === 'a') { type = 'typeA';} else if (type === 'b') { type = 'type ... 阅读全文 »
JS:this指向 发表于 2020-01-15 | 分类于 JS | 字数统计: 697 字 | 阅读时长 ≈ 3 分钟 普通函数 普通函数被调用时,即运行时,才会确定该函数内this的指向。 this指向调用该函数的对象。 fn() 不带任何引用形式调用函数,this指向全局对象。 严格模式下this为undefined。12345var a = 1;function fn () { console ... 阅读全文 »
算法:多层数组转化为一层 发表于 2020-01-14 | 分类于 算法 | 字数统计: 145 字 | 阅读时长 ≈ 1 分钟 题目给定一个数组,将多层数组转化为一层。 注意,数组元素不一定是数字,有可能为对象或字符串。 测试用例121. ['1',[2,3],-1] // ['1',2,3,-1]2. ['1',[2,3],{a:-1}] // ... 阅读全文 »
LeetCode:验证回文串 发表于 2019-12-19 | 分类于 算法 | 字数统计: 198 字 | 阅读时长 ≈ 1 分钟 题目给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写。 说明:本题中,我们将空字符串定义为有效的回文串。 测试用例121. "A man, a plan, a canal: Panama" // true2. "race a car&quo ... 阅读全文 »
JS:AJAX 发表于 2019-12-06 | 分类于 JS | 字数统计: 1,294 字 | 阅读时长 ≈ 5 分钟 核心XMLHttpRequest,一个js对象,一个构造函数。 方法 open():准备启动一个AJAX请求; setRequestHeader():设置请求头部信息; send():发送AJAX请求; getResponseHeader(): 获得响应头部信息; getAllResponseHea ... 阅读全文 »