前端笔记
css 加载会阻塞 DOM 树的解析和渲染吗

css加载会直接影响网页的渲染,因为只有css加载完毕,构建完CSSOM后,渲染树(RenderTree)才会构建,然后渲染成位图如果html中有加载script的话,还会间接影响DOM树的解析,因为java...

line-height 的值分别取 [2, 2em, 200%] 有什么区别?

line-height是相对于元素自身的字体大小来取值,但同时会被继承。在实际工作中,取值2em或者200%有可能遇到未预测的内容。比如:父元素:fontSize:18px;lineHeight:1.5em(27px...

简述 css 中 position 的值?

static:默认值,无定位,top、right、bottom、left不起任何作用relative:相对定位absolute:绝对定位,脱离文档流,上下左右以最近的定位父元素为参照系fixed:脱离文档流,上下左右以浏览器...

css 动画与 js 动画哪个性能更好

CSS3的动画:  1.在性能上会稍微好一些,浏览器会对CSS3的动画做一些优化(比如专门新建一个图层用来跑动画)  2.代码相对简单  3.在动画控制上不够灵活  4.兼容性不好  5.部分动画功能无法实现...

简述下 css specificity

cssspecificity即css中关于选择器的权重,以下三种类型的选择器依次下降id选择器,如appclass、attribute与pseudo-classes选择器,如.header、[type="radio...

有没有使用过 css variable,它解决了哪些问题?

css变量减少样式重复定义,比如同一个颜色值要在多个地方重复使用,以前通过less和sass预处理做到,现在css变量也可以做到,方便维护,提高可读性:root{--bgcolor:blue;--color...

什么是 Data URL?

DataURL是将图片转换为base64直接嵌入到了网页中,使用这种方式引用图片,不需要再发请求获取图片。使用DataURL也有一些缺点:base64编码后的图片会比原来的体积大三分之一左右。DataURL形式的...

HTML 中的 input 标签有哪些 type

button没有默认行为的按钮,上面显示value属性的值,默认为空。<inputtype="button"name="button"/>checkbox复选框,可设为选中...

JavaScript数组所有API全解密

全文共13k+字,系统讲解了JavaScript数组的各种特性和API数组是一种非常重要的数据类型,它语法简单、灵活、高效。在多数编程语言中,数组都充当着至关重要的角色,以至于很难想象没有数组的编程语言会是什么模样。特别是JavaS...

JavaScript 判断一个变量是对象还是数组 ?

typeof都返回object在JavaScript中所有数据类型严格意义上都是对象,但实际使用中我们还是有类型之分,如果要判断一个变量是数组还是对象使用typeof搞不定,因为它全都返回object。第一,使用typ...

闭包的理解 ?

一、变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种:全局变量和局部变量。Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。varn=999;fun...

js 的两种回收机制

标记清除(markandsweep)从语义上理解就比较好理解了,大概就是当变量进入到某个环境中的时候就把这个变量标记一下,比如标记为“进入环境”,当离开的时候就把这个变量的标记给清除掉,比如是“离开环境”。而在这后面还有标记的变量...

判断一个字符串中出现次数最多的字符,统计这个次数

步骤将字符串转化数组创建一个对象遍历数组,判断对象中是否存在数组中的值,如果存在值+1,不存在赋值为1定义两个变量存储字符值,字符出现的字数varstr=&039;abaasdffggghhjjkkgfddsssss3444...

异步过程的构成要素有哪些?和异步过程是怎样的 ?

总结一下,一个异步过程通常是这样的:主线程发起一个异步请求,相应的工作线程接收请求并告知主线程已收到(异步函数返回);主线程可以继续执行后面的代码,同时工作线程执行异步任务;工作线程完成工作后,通知主线程;主线程收到通知后,执行一定的...

函数里的 this 什么含义,什么情况下,怎么用 ?

this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。情...

call、apply、bind

怎么利用call、apply来求一个数组中最大或者最小值?如何利用call、apply来做继承?apply、call、bind的区别和主要应用场景?call跟apply的用法几乎一样,唯一的不同就是传递的参数不同...

什么叫优雅降级和渐进增强 ?

渐进增强progressiveenhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级gracefuldegradation:一开始...

rem、em、px、vh 与 vw 的区别 ?

一、rem的特点rem的大小是根据html根目录下的字体大小进行计算的。当我们改变根目录下的字体大小的时候,下面字体都改变。rem不仅可以设置字体的大小,也可以设置元素宽、高等属性。rem是CSS3新增的一个相对单位...

用 css 实现左侧宽度自适应,右侧固定宽度 ?

1、标准浏览器的方法当然,以不折腾人为标准的w3c标准早就为我们提供了制作这种自适应宽度的标准方法。把container设为display:table并指定宽度100%;然后把main+sidebar设为di...

前端笔记
何时应当时用 padding 和 margin ?

何时应当使用margin需要在border外侧添加空白时。空白处不需要背景(色)时。上下相连的两个盒子之间的空白,需要相互抵消时。如15px+20px的margin,将得到20px的空白。何时应当使用paddi...