前端
关注
分享
扫一扫
进阶er
进阶
展开
-
块级元素、行内元素、可变元素及其区别
1 块级元素2 行内元素3.块级元素与行内元素的区别（1）块级元素会独占一行，其宽度自动填满其父元素宽度；行内元素不会独占一行，相邻的行内元素会排列在同一行，直至一行排不下才会换行，其宽度随元素的内容而变化。（2）块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素。（3）行内元素设置width、height、margin-top、margin-bottom、padding...原创 2019-12-10 14:33:58 · 174 阅读 · 0 评论 -
图片优化
不同业务场景下的图片方案选型时下应用较为广泛的 Web 图片格式有 JPEG/JPG、PNG、WebP、Base64、SVG 等，这些格式都是很有故事的，值得我们好好研究一把。此外，老生常谈的雪碧图（CSS Sprites）至今也仍在一线的前端应用中发光发热，我们也会有所提及。前置知识：二进制位数与色彩的关系在计算机中，像素用二进制数来表示。不同的图片格式中像素与二进制位数之间的对应关系是不...原创 2019-12-01 20:00:36 · 1985 阅读 · 0 评论 -
回流（Reflow）与重绘（Repaint）
1. 回流与重绘1）回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。2）重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属...原创 2019-12-02 17:45:51 · 730 阅读 · 0 评论 -
Event Loop与异步更新策略
Vue 和 React 都实现了异步更新策略，虽然实现的方式不尽相同，但都达到了减少 DOM 操作、避免过度渲染的目的一. 前置知识：Event Loop 中的“渲染时机”1. Micro-Task 与 Macro-Task事件循环中的异步队列有两种：macro（宏任务）队列和 micro（微任务）队列。常见的 macro-task 比如： setTimeout、setInterva...原创 2019-12-02 17:17:36 · 198 阅读 · 0 评论 -
DOM 优化原理与基本实践---学习笔记
1. DOM 为什么这么慢因为收了“过路费”把 DOM 和 JavaScript 各自想象成一个岛屿，它们之间用收费桥梁连接。——《高性能 JavaScript》JS 引擎和渲染引擎（浏览器内核）是独立实现的。当我们用 JS 去操作 DOM 时，本质上是 JS 引擎和渲染引擎之间进行了“跨界交流”。这个“跨界交流”的实现并不简单，它依赖了桥接接口作为“桥梁”（如下图）。我们每操作一次...原创 2019-12-02 16:00:51 · 148 阅读 · 0 评论 -
浏览器的运行机制
1. 浏览器的内核浏览器内核可以分成两部分：渲染引擎（Layout Engine 或者 Rendering Engine）和 JS 引擎。早期渲染引擎和 JS 引擎并没有十分明确的区分，但随着 JS 引擎越来越独立，内核也成了渲染引擎的代称（下文将沿用这种叫法）。渲染引擎又包括了 HTML 解释器、CSS 解释器、布局、网络、存储、图形、音视频、图片解码器等等零部件。目前市面上常见的浏览器内...原创 2019-12-02 15:54:36 · 506 阅读 · 0 评论 -
前端路由和后端路由
1 History API1.1 back()方法此异步方法转到会话历史记录中的上一页，与用户单击浏览器的“后退”按钮时的操作相同。等同于history.go(-1)。 调用此方法以返回会话历史记录的第一页之外不会产生任何效果，也不会引发异常。1.2 forward()此异步方法转到会话历史记录的下一页，与用户单击浏览器的“前进”按钮时的操作相同；这相当于history.go(1)。 调...原创 2019-11-14 22:41:56 · 213 阅读 · 0 评论 -
路由拦截
路由拦截很多页面是需要登录后才有权限访问的，所以需要在前端做路由拦截判断用户是否可以访问该页面。1 前端路由拦截实现思路：在自定义路由时添加一个自定义字段requireAuth，用于判断该用户是否已经登录成功登录的用户可以进行页面跳转，否则会重定向到登录页面vue实现前端路由拦截如下：const routes = [ { path: '/', name: 'In...原创 2019-11-14 21:48:46 · 1894 阅读 · 0 评论 -
单页应用与多页应用的区别
1 单页应用（SPA：单页复应用）1）页面跳转->JS渲染（JS能感知URL的变化，动态地把页面的内容删除掉，新的页面上的结构渲染出来）2）首屏展示：一次HTML请求 一次JS请求（两者都回来之后首屏进行展示）一次请求 节约HTTP请求时延3）优点：页面切换块4）缺点：首屏时间长 SEO差2 多页应用1）页面跳转->返回HTML2）优点：首屏时间快 SEO效果好3...原创 2019-11-14 17:53:26 · 187 阅读 · 0 评论 -
AJAX跨域原理以及方法
AJAX跨域的原理以及方法浏览器的同源政策规定，AJAX请求只能发给同源的网址，否则就报错。除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制。1）JSONP2）CORS3）WebSocket1 . JSONP方式实现原理：利用script脚本的跨域能力基本思想： 1）客户端网页通过添加一个<script>标签，向服务器请求JS...原创 2019-11-14 17:40:02 · 258 阅读 · 0 评论 -
【CSS】制作ICO图标
有一个网站比特虫，专门用来将自己的图片生成ico图标的，具体制作步骤如下：1 进入比特虫网站2 选择自己想要做成ico的目标文件，然后选择尺寸，生成ICO图标这是我的ico图标3 之后将它放在与自己的项目文件css,js,images并列的地方，记住，千万不要放在images中，因为它不是一个图片。4 在head头部中引入这个ico图标 <link rel="shortcu...原创 2019-09-16 10:54:41 · 1194 阅读 · 1 评论 -
【前端】简单验证码的制作
在写注册页面的时候用到了验证码，但不知道怎样实现，所以就在晚上各种搜索，学了简单的一种，在此总结一下。效果图总体思路：使用canvas元素画背景图，用js产生随机验证码，背景颜色以及干扰图线，干扰点，然后渲染到页面上代码实现如下：HTML部分：<canvas id="mycanvas"></canvas><br /><br />&l...原创 2019-09-05 16:05:11 · 3757 阅读 · 0 评论 -
【CSS】CSS选择器的优先级
CSS的三大特性：1）层叠性：也相当于就近原则，如果出现样式冲突且权重相同，最后一个定义的样式其作用。2）继承性：子标签会继承父标签的某些属性3）优先级：选择器的优先级权重有一套计算公式，也就时CSS Specificity,它是衡量优先级的一个标准。用一个四位的数字来表示，左面的最大，一级大于一级，数位之间没有进制，级别之间不可以超越级别贡献值继承或*0,0，0,0...原创 2019-09-07 20:30:32 · 216 阅读 · 0 评论 -
【CSS3】CSS元素定位的四种模式
定位要配合定位模式和边偏移一起使用定位模式是否脱标是否可以使用边偏移移动位置基准静态static不脱标正常模式不可以正常模式相对定位relative不脱标 占有位置可以相对自身位置移动绝对定位 absolute脱标 不占位置可以相对于定位父级移动位置固定定位 fixed完全脱标 不占位置可以相对于浏览器位置注意事项1.定位...原创 2019-09-09 16:21:51 · 988 阅读 · 1 评论 -
【CSS3】CSS精灵技术sprite
1 本质是一种处理网页背景图像的方式，它将一个页面涉及到的所有背景图集中到一张大图上去然后将大图应用于网页，这样，当用户访问该网页时，只需向服务器发送一次请求，这张大图称为精灵图；2 使用要想精确定位到精灵图中的某个小图，就需要使用到CSS的background,background-position:背景图调整图片定位（往上走是负的）3 制作精灵图：用ps制作制作原则：1）精灵图上放...原创 2019-09-10 22:24:14 · 264 阅读 · 0 评论 -
【CSS3】CSS字体图标
发现了一个超好玩的东西，字体图标1 产生由来：图片是有诸多优点的，但是缺点也很明显，比如图片不但增加了总文件的大小，还增加了很多额外的“http请求”，这都会大大降低网页的性能，更重要的是图片不能很好的进行缩放，因为图片放大和缩小会失真。在移动端响应式模式下，很多情况我们希望我们的图标是可以进行缩放的，这就可以用到字体图标技术。2 字体图标的优点：1） 可以做出跟图片一样可以做的事情，改变透...原创 2019-09-11 17:36:58 · 216 阅读 · 0 评论 -
【CSS】CSS新增的2D和3D效果
1.透视（perspective）也就时近大远小的效果，给一些动画添加的效果，使其更有立体感。perspective: 视距；值越大效果越不明显，但为0的时候没有效果。这个特性添加给父盒子。给出一个开门案例：实现效果为：当鼠标经过时，门打开，移走时，门关闭；代码如下：<!DOCTYPE html><html> <head> <me...原创 2019-09-14 21:42:33 · 399 阅读 · 0 评论 -
【CSS】BFC
1 BFC是什么block formation context 块级格式化上下文，它就是页面的一个隔离的独立容器，容器里面的元素不会影响到外面的元素。这个特性可以很好地帮助我们进行页面布局。2 触发BFC的情况1）float:不为none的情况2）position:为absolute,fixed的情况3）display:flex inline-flex table-cell table-...原创 2019-09-15 11:39:03 · 153 阅读 · 0 评论 -
【CSS】小黄人案例
CSS部分过了一遍，跟着做了一个综合案例，小黄人（眼睛会动的哦）,觉得里面有很好的值得借鉴的地方，所以在此做下笔记：效果图：代码实现：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>小黄人制作</title> <style>...原创 2019-09-15 20:31:00 · 833 阅读 · 3 评论 -
【前端】表单验证
1.JS实现表单验证在form 中添加onsubmit代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单验证</title> </head> <script type="text/javascript"&g...原创 2019-09-03 15:40:40 · 474 阅读 · 0 评论