2019年08月_离子守恒

原创踩过的坑：Vue引入Sass文件

问题：在使用vue cli 3.0开发自己网页的过程中，想把CSS样式单独抽离出来，因为Sass的嵌套写法显得层次十分清晰，所以我个人是十分喜欢的。但是在CSS样式单独抽离形成文件之后再引入，发现只有第一层样式作用上了。问题来了，为什么呢？ CSS .section{ /* 只有这层作用上了 */ width: 500px; height: 500px; background-color...

2019-08-23 21:45:13 1483 1

原创 Vue基本指令

v-if：true渲染元素，false删除元素 HTML <div id="vm"> <div v-if="flag">flag=true显示，flag=false移除dom</div> </div> JavaScript const vm = new Vue({ el: "#vm", data: { fla...

2019-08-20 15:01:11 125

原创函数的节流和防抖

一个DOM元素绑定了事件，如果不断地触发事件，函数会频发地执行，这样会消耗大量的性能。这时候，节流和防抖就是很好的解决方案。 const myDiv = document.getElementById("click"); const mySpan = document.getElementById("show"); let num = 0; function count () { num+...

2019-08-08 18:13:11 106

原创 VUE：JavaScript模拟DOM

DOM结构 <div id="container"> <h1 class="title"> JS模拟DOM <span>哈哈</span> </h1> <p class="content">模拟模拟</p> ...

2019-08-07 17:27:51 137 2

重绘(repaint)——当页面中的元素只是外观或风格被改变不影响布局，这个过程就是重绘。重排(relayout)——当RenderTree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变，浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构的过程，也就是重新构造渲染树 ,这个过程叫做重排（relayout）。回流(reflow)——Gecko中布局的称谓，同时也是重排的别...

2019-08-07 17:11:12 121 2

翻译浏览器渲染过程

浏览器下载页面中所有的组件：HTML、JavaScript、CSS、图片后：解析HTML代码，构建DOM树。解析CSS，生成CSS规则树。合并DOM树和CSS规则树，生成Render树。布局Render树，负责各元素尺寸、位置的计算。绘制Render树，绘制页面像素信息。浏览器将各层的信息发送给GPU，GPU将各层合成。 ...

2019-08-07 16:50:44 86 3

翻译从输入网址，按下回车键，到网页展示内容，发生了什么。

域名解析。（先查找本地DNS缓存列表，没有的话再向默认的DNS服务器发送查询请求并缓存）发起TCP的3次握手。建立TCP连接后发起http请求。服务器端响应http请求，浏览器得到html代码。浏览器解析html代码，并请求html代码中的资源。浏览器对页面进行渲染呈现给用。 ...

2019-08-07 16:46:42 538 3

qq_24243695的博客