- 博客(6)
- 收藏
- 关注
RSS订阅原创 面试题系列--浏览器是如何渲染UI的？
浏览器是如何渲染UI的？ 浏览器获取HTML文件，然后对文件进行解析，形成DOM Tree 与此同时，进行CSS解析，生成Style Rules 接着将DOM Tree与Style Rules合成为 Render Tree 接着进入布局（Layout）阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标 随后调用GPU进行绘制（Paint），遍历Render Tree的节点，并将元素呈现出来 ...
2021-08-10 19:45:44
333
原创 前端性能优化方案
前端性能优化方案 1、减少DOM操作 2、部署前，图片压缩，代码压缩 3、优化js代码结构，减少冗余代码 4、减少http请求，合理设置HTTP缓存 5、使用内容分发cdn加速 6、静态资源缓存 7、图片延迟加载 ...
2021-08-10 19:06:49
129
原创 如何实现垂直水平居中?
如何让一个盒子在页面垂直水平居中? 已知宽高,利用margin:auto; div{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } 未知宽高,利用定位 div{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } 利用display：flex;设
2021-08-10 19:02:47
230
原创 重排与重绘
重排与重绘 重排 当DOM的变化引发了元素几何属性的变化，比如改变元素的宽高，元素的位置，导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树，这个过程称为“重排”。简单的说，重排负责元素的几何属性更新。 重绘 完成重排后，要将重新构建的渲染树渲染到屏幕上，这个过程就是“重绘”。简单的说，重绘负责元素的样式更新。 重排与重绘的关系与区别 重排必然带来重绘，但是重绘未必带来重排。比如，改变某个元素的背景，这个就不涉及元素的几何属性，所以只发生重绘。 ...
2021-08-10 18:38:22
121
原创 学习Vue系列—常用指令v-bind、v-on、v-for、v-if和v-show
Vue常用语法格式 插值语法 <div id="app"> <!-- {{ }}插值语法，也叫胡子语法，相当于营造了一个可以书写js代码的简单环境 --> <p>num1和num2较大的数字是:{{num1>num2?num1:num2}}</p> <p>请反转str: {{ str.split("").reverse().join("") }}</p> </div
2021-06-24 21:52:12
440
原创 学习Vue系列—认识Vue
Vue简介 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 Vue的特点和在Web开发中常见的高级功能 解耦视图和数据 双向数据绑定 可复用的组件 前端路由技术 状态管理 虚拟DOM Vue的安装使用 使用Vue的方式有很多 直
2021-06-24 20:28:15
155
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人