前端 170 面试题 + 答案学习整理(良心制作)
哪吒人生信条:如果你所学的东西 处于喜欢 才会有强大的动力支撑。
每天学习编程,让你离梦想更新一步,感谢不负每一份热爱编程的程序员,不论知识点多么奇葩,和我一起,让那一颗四处流荡的心定下来,一直走下去,加油,2021
加油!欢迎关注加我vx:xiaoda0423
,欢迎点赞、收藏和评论
不要害怕做梦,但是呢,也不要光做梦,要做一个实干家,而不是空谈家,求真力行。
前言
希望可以通过这篇文章,能够给你得到帮助。(感谢一键三连)
1.`css3`有哪些新特性
圆角border-radius
,阴影box-shadow
,对文字加特效text-shadow
,线性渐变gradient
,变化transform
,伪元素::selection
,媒体查询,多栏布局,图片边框border-image
。
p:first-of-type
,选择属于其父元素的首个<p>
元素的每个<p>
元素p:last-of-type
,选择属于其父元素的最后一个<p>
元素的每个<p>
元素p:only-of-type
,选择属于其父元素的唯一<p>
元素的每个<p>
元素p:only-child
,选择属于其父元素的唯一子元素的每个<p>
元素p:nth-child(2)
,选择属于其父元素的第二个子元素的每个<p>
元素:enabled:disabled
,控制表单控件的禁用状态:checked
,单选框或复选框被选中
2.`first-child`与`first-of-type`的区别是
first-child
匹配的是父元素的第一个子元素,可以说是结构上的第一个子元素first-of-type
匹配的是该类型的第一个元素,类型就是指冒号前面匹配到的元素。(只要是该类型的元素第一个即可,不限制是第一子元素)
p:first-child
匹配到p
元素,因为p
元素是div
的第一个子元素span:first-child
匹配不到span
元素,因为span
是div
的第二个子元素p:first-of-type
匹配到p
元素,因为p
是div
所有为p
的子元素中的第一个span:first-of-type
匹配到span
元素,因为span
是div
所有未span
的子元素中的第一个。
3.解决使用`transform:translate`属性时会出现闪烁现象
4.如何使用`@keyframes`使`div`元素移动 200 像素
5.如何实现文本换行
使用word-wrap
属性:normal
只在允许的断字点换行;break-word
在长单词或url
地址内部进行换行。
6.超出文本省略
使用text-overflow:ellopsis
:文本溢出时,为了不显示省略标记...
,通过clip
直接将溢出的部分裁剪掉。
7.`css3`动画如何在动作结束时保持状态不变
使用animation-fill-mode
,值为none
,表示不改变默认行为;值为forwards
,当动画完成后,保持最后一个属性值;backwards
,在animation-delay
所指定的一段时间内,在动画显示之前,应用开始属性值;both
,向前和向后填充模式都可以应用。
css3
动画的优点:在性能上会稍微好一些,浏览器会对css3
的动画做一些优化,代码相对简单;css3
动画的缺点:在动画控制上不够灵活,兼容性不好,部分动画功能无法实现。
8.实现某`div`元素以每秒`50px`的速度左移`100px`
9.说说`box-sizing`属性
box-sizing
属性用来控制元素盒模型的解析模式,默认是content-box
content-box
让元素维持w3c
的标准盒模型,元素的宽度/
高度由border+padding+content
的宽度/
高度决定,设置width/height
属性指的是指定content
部分的宽度/
高度。
border-box
让元素维持ie
传统盒模型,设置width/height
属性指的是指定border+padding+content
的宽度/
高度。标准浏览器下,按照w3c
规范解析盒模型,一旦修改了元素的边框或内距,就会影响元素的盒子尺寸,就不得不重新计算元素的盒子尺寸,从而影响整个页面的布局。
content-box
盒模型:
布局所占宽度:
布局所占高度:
padding-box
盒模型:
布局所占宽度:
布局所占高度:
border-box
盒模型:
布局所占宽度:
布局所占高度:
10.如何实现把文本分隔为 4 列并使两列之间间隔 30 像素
11.`background-clip`和`background-orgin`的区别
background-clip
规定背景,背景颜色和背景图片的绘制区域。
它有三个属性:
background-origin
规定背景图片的定位区域
它有三个属性:border-box
,padding-box
,content-box
(它只能对背景做样式上的操作)
12.`css3`中`transition`属性值以及含义是
transition
属性是一个简写属性:
transition-property
哪个属性需要实现过渡transition-duration
完成过渡效果需要多少秒/
毫秒transition-timing-function
速度效果的运动曲线,如linear,ease-in,ease,ease-out,ease-in-out,cube-bezier
transition-delay
规定过渡开始前的延迟时间
13.当元素不面向屏幕时其可见性如何定义
14.如何实现`css3`倒影
-webkit-box-reflect
设置方向,距离。方向可以设置为below,above,left,right
。
15.`css3`实现背景颜色线性渐变
16.为盒子添加蒙版
17.`animation`属性值有哪些
animation-name
就是动画名称;animation-duration
就是动画持续时间;animation-play-state
是播放状态(running
表示播放,paused
表示暂停),可以用来控制动画暂停;animation-delay
就是动画延迟时间;animation-timing-function
就是动画运动形式,animation-iteration-count
就是重复次数;animation-direction
就是播放前重置。
18.`rem`的原理是什么
在做响应式布局时,通过调整html
的字体大小,页面上所有使用rem
单位的元素都会做相应的调整。
19.如何设置`css3`文本阴影
20.如何把元素从左侧移动 50 像素,从顶端移动 100 像素
21.如何把一个元素旋转`30°`
22.利用`css3`制作淡入淡出的动画效果
23.在使用`Bootstrap`的同时使用地图`api`,可能会造成`Bootstrap`与地图冲突,地图显示不出来,如何解决
主要是在使用Bootstrap
的变体zui.css
的时候出现的,首先,打开浏览器的开发者工具,查看控制台有无错误,如没有,查看网络中的资源,并确认与地图相关的图片资源有无加载,若加载了,将地图调用的代码从项目中独立出来,看能否正常显示,若能显示,在项目中,使用二分法一半一半地删除引用的JavaScript,css
代码,看这些JavaScript
或css
代码是否对地图api
造成了影响,把问题锁定在zui.css
中,然后,在elements
里核对地图div
下面的一些css
。
24.`jquery`中的`deferred`的功能
实现链式操作
指定同一操作的多个回调函数
为多个操作指定回调函数
提供普通操作的回调函数接口
25.什么是`deferred`对象
开发网站过程中,会遇到某些耗时很长的javascript
操作,有异步操作,如ajax
读取服务器数据,有同步操作,如遍历一个大型数组,它们都不能立即得到结果。
可以为它们指定回调函数callback
,就是事先规定,一旦运行结束,调用那些函数,但是,在回调函数方面,jquery
的功能非常弱,为了改变这一点,jquery
开发设计了deferred
对象。
26.`jquery`和`jquery ui`的区别
jquery
是一个javascript
库,主要提供选择器,属性修改和事件绑定等功能。jquery ui
则是在jquery
的基础上对jquery
的扩展,是jquery
的插件。jquery ui
提供了一些常用的界面元素,如对话框,拖动行为,改变大小行为等。
27.如何用原生`JavaScript`实现`jquery`的`ready`方法
$(document).ready()
在dom
绘制完毕后就执行,而不必等到页面加载完毕。
28.`jquery`中的`attr`和`prop`区别
对于html
元素本身就带有的固定属性,在处理时,使用prop
方法;对于html
元素自定义的dom
属性时,在处理时,使用attr
方法。
29.`$.map()`和`$.each()`区别
$.map()
方法用来遍历操作数组和对象,返回的是一个新的数组; $.map()
方法适用于将数组或对象的每个项目映射到一个新数组中。
$.each()
用于遍历jquery
对象,返回的是原来的数组,并不会返回一个新数组。
30. `jquery`中如何将一个`jquery`对象转化为`dom`对象
jquery
对象是一个数据对象, 可以用[index]
的方法来得到相应的dom
对象
使用get(index)
方法:
31.`jquery`中监听事件有几种方式
4 中事件监听方式:bind(),live(),delegate(),on()
;解除事件对应的 4 种:unbind(),die(),undelegate(),off()
。
32.`jquery`中个`get`和`eq`区别
get()
取得其中一个匹配的元素,num
表示取得第几个匹配的元素,get()
多针对集合元素,返回的是dom
对象组成的数组eq()
获取第n
个元素,下标都从 0 开始,返回的是一个jquery
对象。
33.`jquery`中的事件冒泡,怎么执行,如何停止冒泡事件
事件冒泡从里面往外面开始传递。在jquery
中stopPropagation()
方法用于停止冒泡,兼容所有浏览器
34.`jquery`中的`hover`和`toggle`区别
hover()
和toggle()
都是jquery
中的两个合成事件。
hover()
方法用于模拟光标悬停事件toggle()
方法用于连续交替单击事件
35. 你使用过哪些数据格式
html
格式,json
格式,xml
格式:html
片段提供外部数据,一般来说是最简单的;如果数据需要复用,那么在性能和文件大小方面具有优势的是json
;当远程应用程序未知时,xml
能为数据的操作性提供最可靠的保证。
36.选择器中`id`,`class`有什么区别
id
,在网页中每个id
名称只能有一次,class
可以重复使用
37.为了将单选按钮组的第二个选框设置为选中状态,如何设置
38.`$.getScript()`方法和`$.getJson()`方法有什么区别
$.getScript()
方法可以直接加载javascript
文件,并且不需要对javascript
文件进行处理,javascript
文件会自动执行。$.getJson()
是用于加载json
文件的,用法和$.getScript()
一样。
39.`jquery`或`zepto`源码有哪些地方觉得不错
jquery
源码封装在一个匿名函数的自执行环境中,有助于防止变量的全局污染。
通过传入window
对象参数,可以使window
对象作为局部变量使用。
好处是当jquery
访问window
对象的时候,就不用将作用域链退回到顶层作用域了,从而可以更快地访问window
对象,同样,传入undefined
参数,可以降低undefined
被重定义的风险。
jquery
将一些原型属性和方法封装在了jQuery.prototype
中,为了方便对jQuery.prototype
的访问,将jQuery.prototype
赋值给jQuery.fn
。一些数组或对象的方法经常能使用到,jQuery
将其保存为局部变量以提高访问速度。jQuery
实现的链式调用可以节约代码,所返回的都是同一个对象,可以提高开发效率。
40.`jQuery`中的美元符号
41.`onload()`函数和`ready()`函数的区别
可以在页面中使用多个
ready()
,但只能使用一次onload()
ready()
函数在页面dom
元素加载完以后就会调用,而onload()
函数则要在所有的关联资源加载完毕后才会调用,要晚于ready()
函数。
42.`jQuery`中有哪几种常见的选择器
基本选择器;层次选择器;过滤选择器;属性选择器;子元素选择器;表单选择器;内容选择器;可见选择器
43.使用`jQuery`将页面上所有元素边框设置为`2px`宽的虚线
44.使用`jQuery`实现单击按钮时弹出一个对话框
45.如何使用`jquery`编码和解码`url`
编码时使用encodeURIComponent(url)
,解码时使用decodeURIComponent(url)
46.`jquery`中的`delegate()`函数有什么作用
delegate()
是jquery
中事件委托的语义化方法,会在以下两种情况中使用到。
如果有一个父元素,需要给其下的子元素添加事件,这时可以使用delegate()
了。
当元素在当前页面中不可用时,使用delegate()
47.如何禁用浏览器的前进和后退按钮
48.网页上有 5 个`<div>`元素,如何使用`jquery`来选择它们
可以使用标签选择器来选择所有的div
元素,$("div")
会返回一个包含 5 个div
标签的jQuery
对象。
49.如何在单击一个按钮时使用`jQuery`隐藏一副图片
50. `$(document).ready()`是什么函数
ready()
函数用于在文档进入ready
状态时执行代码。当dom
完全加载时,jquery
允许你执行代码,使用$(document).ready()
最大的好处在于它适用于所有浏览器,jQuery
有助于解决跨浏览器兼容性问题。
51.如何找到所有多选下拉框内的选中项
可以用jquery
选择器获取所有满足multiple=true
的<select>
标签的选中项。
52.如何获取页面中所有多(复)选框内选中选项的内容
53.`$(this)`和`this`关键字在`jquery`中的不同
$(this)
返回一个jQuery
对象,可以对它调用多个jQuery
方法,比如用text()
获取文本,用on()
绑定事件等。而this
代表当前元素,表示上下文中的当前dom
元素。
54.提取链接的`href`
55.能用`jquery`代码选择所有在段落内部的超链接吗
来选择所有嵌套在段落p
标签内部的超链接a
:
56.`jquery`中的`detach()`和`remove()`方法的区别
detach()
和remove()
方法都可以移除一个dom
元素:
remove()
将元素自身移除的同时,也会移除元素内部的一切,包括绑定的事件以及与该元素相关的jquery
数据detach()
虽然可以将元素自身移除,但是它不会删除数据和绑定事件
57.如何利用`jquery`,来向一个元素添加或移除`css`类
用addClass()
和removeClass()
方法动态地改变元素的class
58.使用`cdn`加载`jquery`库的主要优势是什么
可以节省服务器带宽
可以更快地下载
jquery
文件如果浏览器已经从同一个
cdn
上下载了jquery
文件,再次打开页面时,不会再次下载
59.`jQuery.ajax()`和`jQuery.get()`方法之间的区别
ajax()
方法更强大,可配置性更强,可以指定等待多久,以及如何处理错误get()
方法只是ajax()
方法中get
请求的简化方法
60.要是在一个`jQuery`事件处理程序里返回了`false`会怎么样
这将会阻止事件向上冒泡以及默认行为。
61.`document.getElementbyId("myId")`和`$("#myId")`哪个更高效
第一个,因为它使用原生方法;而二是jQuery
封装的方法,要处理其外部的判断逻辑
62.`jQuery`中的方法链是,使用的好处
方法链就是执行完的方法返回的结果是当前jQuery
的实例化对象,可以继续调用另一个方法。
63.如何用`jquery`将一个`html`元素添加到`dom`树中
appendTo()
方法,将一个html
元素添加到dom
树中,使用它可以在指定的dom
元素末尾添加一个现存的元素或者一个新的html
元素。
append,appendTo,prepend,prependTo,after,insertAfter,before,insertBefore
64.你是如何使用`jquery`中的`ajax`的
使用load(),$.get(),$.post()
,如果需要设定beforeSend
提交前回调函数,error
失败后处理,success
成功后处理以及complete
请求完成后处理回调函数等,要使用$.ajax()
65.页面导入样式时,使用`link`和`@import`有什么区别?
区别:
link
是HTML
标签,@import
是css
提供的。link
引入的样式页面加载时同时加载,@import
引入的样式需等页面加载完成后再加载。link
没有兼容性问题,@import
不兼容 ie5 以下。link
可以通过js
操作DOM
动态引入样式表改变样式,而@import
不可以。
66.`HTML`全局属性`(global attribute)`有哪些(包含`H5`)?
全局属性:用于任何HTML5
元素的属性
67.写一个方法去掉字符串中的空格
68.`CSS3`有哪些新增的特性?
69.用递归算法实现,数组长度为 5 且元素的随机数在`2-32`间不重复的值
70.写一个加密字符串的方法
71.浏览器内多个标签页之间的通信方式有哪些?
72.简述下你理解的优雅降级和渐进增强
优雅降级,先做好一个完善的具备完整体验的版本,再向下做兼容。
渐进增强,先做好一个可以基本正常使用的版本,再慢慢丰富体验和内容。
73.`viewport`常见设置都有哪些?
viewport
是在 meta
标签内进行控制。
74.对比下`px、em、rem`有什么不同?
默认情况下: 1em = 10px; 1rem = 16px
px
是css
中的逻辑像素,和移动端的物理像素之间会有一个比值dpr
em
是指相对于父元素的大小
rem
中的r
就是root
,也就是相对于root
元素的大小(html
标签)
75.简要描述下什么是回调函数并写一个例子出来
76.你对标签语义化的理解是什么?
见名知意,方便多人认识,且命名统一,简洁,易于重构代码
77.在页面上隐藏元素的方法有哪些?
78.去除字符串中最后一个指定的字符
79.`HTML5`的文件离线储存怎么使用,工作原理是什么?
localstorge
利用浏览器的本地存储可以缓存信息 ,在创建数据的时候引入创建好的数据
80.`CSS`选择器有哪些?哪些属性可以继承?
81.简述超链接`target`属性的取值和作用
<a>
标签的 target
属性规定在何处打开链接文档。
语法:<a target="value">
属性值:
82.`CSS3`新增伪类有哪些并简要描述
83.`label`都有哪些作用
<label>
的作用
表示用户界面中某个元素的说明
增加命中区域,屏幕阅读器可以读出标签。使用辅助技术的用户更容易理解输入 哪些数据
利用label
"模拟"button
来解决不同浏览器原生button
样式不同的问题
结合checkbox、radio
表单元素实现纯CSS
状态切换,这样的实例就太多了。比如控制CSS
动画播放和停止
input
的focus
事件会触发锚点定位,我们可以利用label
当触发器实现选项卡切换效果
84.用`css`创建一个三角形,并简述原理
原理是宽高是两边固定,border
不一样,有颜色,且有top、right、bottom、left
的选项进行修改。在使用的时候需要宽高为零。三角形就需要数学知识(勾股定理),去考虑为等边、全等。
创建一个div
,宽高都为 0,实现效果如下,发现border
的四个边都是一个三角形,要实现三角形只需将其中几个边background
设置为transparent
,即可得到三角形
85.`Iframe` 有什么好处,有什么坏处?国内还有哪些知名网站仍用`Iframe`,为什么?有哪些原来用的现在抛弃了?又是为什么?
iframe
原本的用法在现在看来是不合时宜的,问题太多了,但是它的其他功能却是不错的黑魔法。
用来实现长连接
跨域通信
历史记录管理,解决
ajax
化网站响应浏览器前进后退按钮的方案,在html5
的history api
不可用时作为一种替代。纯前端的
utf8
和gbk
编码互转
现在,应该使用 iframe
的例子如:
沙箱隔离。
引用第三方内容。
独立的带有交互的内容,比如幻灯片。
需要保持独立焦点和历史管理的子窗口,如复杂的
Web
应用。
注:登录弹窗用
iframe
未必合适。HTML
标准新增了dialog
元素,可能更适合。
86.简述你对`BFC`规范的理解
BFC
全称“块级格式化上下文”(Block Formatting Context)
,对应的还有 IFC
。BFC
类似一个“结界”,如果一个 DOM
元素具有 BFC
,那么它内部的子元素不会影响外面的元素;外面的元素也不会影响到其内部元素。
最常见的例子就是清除 float
的 overflow: hidden;
属性。overflow: hidden;
会触发元素的 BFC
,因此其内部的 float
元素不会影响到外部元素的布局。
触发 BFC
的条件:
参考文章:《CSS
世界》
87.统计某一字符或字符串在另一个字符串中出现的次数
88.清除浮动的方式有哪些及优缺点?
通过设置父标签
overflow: auto
通过
after
伪类:{display: block; content: ''; clear: both;}
触发BFC
或 clear: both
CSS
盒子塌陷问题解决方案解决方案
89.简要描述下`JS`有哪些内置的对象
90.常见的浏览器内核都有哪些?
内核按功能可以分为渲染引擎和JS
引擎。
我们常说的浏览器内核指代的是浏览器的渲染引擎。
91.盒模型的理解
盒模型主要有以下几部分组成:
盒模型分为两种:
标准盒模型(w3c
盒模型) 标准盒模型的 width = content
IE 盒模型 IE
盒模型的 width = padding + border + content
默认的情况下,盒子都是基于标准盒模型的盒子。
在 css3
中出现了 box-sizing
属性,该属性会改变默认盒子的盒模型。该属性的两个属性值分别表示为:content-box
(标准盒模型)和 border-box
(IE 盒模型)。
92.`html5`中的`form`怎么关闭自动完成?
设置form
的autocomplete
属性为off
93.`::before`和`:after`中单冒号和双冒号的区别是什么
【CSS】属性content有什么作用呢?有哪些场景可以用到?
94.说说你对 javascript 的作用域的理解
1:全局作用域
2:局部作用域
在 ES5
之前,javascript
只有函数作用域而没有块级作用域的。在 if
或者 for
花括号中的变量实际在外层是可以被访问的。
不过使用 ES6 的 let 和 const
之后,就可以实现块级作用域了。
95.`http`都有哪些状态码?
96.为什么`HTML5`只需要写`<!DOCTYPE HTML>`就可以
因为 HTML5
与 HTML4
基于的基准不同。
HTML4
基于 SGML
因此需要除了 DOCTYPE
外还需要引入 DTD
来告诉浏览器用什么标准进行渲染。DTD
还分为标准模式、严格模式。如果什么都不写,就完全让浏览器自我发挥,会变成怪异模式。
HTML5
不基于 SGML
,因此后面就不要跟 DTD
,但是需要 DOCTYPE
来规范浏览器的渲染行为。
注:SGML
是通用标记语言的集合。其中有 HTML、XML
,因此需要用 DTD
来指定使用那种规范。
97.什么是闭包?优缺点分别是什么?
闭包:在局部作用域引用上层作用域(非全局)的变量
优点:防止变量污染作用域
缺点:不释放则会导致内存泄漏
98.写一个数组去重的方法
一维
二维
99.元素的`alt`和`title`有什么区别?
title
属性是一个标记,它向每个元素添加补充信息。当鼠标指针放在元素上时,主要作用是显示工具提示。
alt
是为图片指定替代文字的属性
alt
是在<img>
中指定的属性标签,表示图像。
正如我写为替代文本一样,它用于需要文本而不是图像的情况。
如果盲人使用语音阅读功能,则会大声朗读图像的
alt
属性中的文本。当由于链接断开而无法显示图像时,将显示它。
Google
和Yahoo!
等机器人抓取图片的提示。
100.`table`的作用和优缺点是什么呢?
table
用于表格数据的展示,并且很符合人们的直观认知。
在 div+css
布局流行之前,普遍使用 table
进行布局。
table
布局的好处在于样式好控制,特别是居中、对齐。缺点在于会多处非常多的 DOM
节点,会导致页面加载变慢、不利于 SEO
。也因此,在 CSS
成熟之后,table
布局马上就变成历史了。
101. `typeof('abc')`和`typeof 'abc'`都是`string`, 那么`typeof`是操作符还是函数?
假设typeof
是函数,则调用typeof(typeof)
应该返回一个字符串'function'
,但是实际操作会报错,所以typeof
不是函数
typeof
是操作符,明确定义在MDN
当中,作用是对后方表达式的返回做类型定义。
102.说说你对`SVN`和`GIT`的理解和区别
SVN
是集中式,GIT
是分布式
103.什么是`FOUC`?你是如何避免`FOUC`的?
FOUC
:加载时样式突然变化
原因:由于在渲染HTML
时,遇到CSS
样式表会重新渲染HTML
样式表没有放到head
里面,使用了@import
导入样式
解决:尽量把样式表放到body
标签上面
104.`css`的属性`content`有什么作用呢?
content
属性与 ::before
及 ::after
伪元素配合使用生成文本内容
105.`"attribute"`和`"property"`有什么不同?
property
是DOM
中的属性,是JavaScript
里的对象attribute
是HTML
标签上的特性,它的值只能够是字符串
106.写一个验证身份证号的方法
地址码 6 位+年份码 4 位+月份码 2 位+日期码 2 位+顺序码 3 位+校验码 1 位
107.对于 HTML 表单输入字段,`disabled =“ disabled”和 readonly =“ readonly”`有什么区别?
相同点:都会使文本框变成只读,不可编辑
disabled
属性在将input
文本框变成只读不可编辑的同时,还会使文本框变灰,但是readonly
不会。
设置了readonly
属性的input
元素依然可以获取焦点,但是设置了disabled
属性的input
元素没有办法获取焦点
readonly
只针对input
和textarea
有效,而disabled
对于所有的表单元素都有效。
readonly
:不可编辑、可复制、可选择、可以接收焦点但不能被修改,后台会接收到传值
disabled
:不可编辑、不可复制、不可选择、不能接收焦点,后台也不会接收到传值
108.说说你对`line-height`是如何理解的?
line-height
,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度。
如图红色线即为基线
基线(baseline)
,指的是一行字横排时下沿的基础线,基线并不是汉字的下端沿,而是英文字母 x 的下端沿。
109.说说你对重绘和重排的理解,以及如何优化?
浏览器加载网页时会生成 DOM 树和 CSSOM 树
重绘:
当盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来之后,浏览器便把这些原色都按照各自的特性绘制一遍,将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。
触发重绘的条件:改变元素外观属性。如:color,background-color,font-size
等。
重排(回流):
当渲染树中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建, 这就称为回流(reflow
)。每个页面至少需要一次回流,就是在页面第一次加载的时候。
重绘和重排的关系:在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程称为重绘。
所以,重排必定会引发重绘,但重绘不一定会引发重排。
触发重排的条件:任何页面布局和几何属性的改变都会触发重排
比如:
1、页面渲染初始化(无法避免)
2、添加或删除可见的DOM
元素;
3、元素位置的改变,或者使用动画;
4、元素尺寸的改变——大小,外边距,边框;
5、浏览器窗口尺寸的变化(resize
事件发生时);
6、填充内容的改变,触发重排的条件:改变元素的大小 位置 等如:width、height、pading、margin、position
等, 添加删除DOM
操作等
重绘重排的代价:耗时,导致浏览器卡慢。
110.`0.1 + 0.2、0.1 + 0.3 和 0.1 * 0.2`分别等于多少?并解释下为什么?
111.`new`操作符的理解是什么?手动实现一个`new`方法
new
运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一
new Object()
举例:
创建一个新对象
把新对象的原型指向构造函数的 prototype
把构造函数里的 this 指向新对象
返回这个新对象
112.`jquery`中是如何操作类的
用addClass()
来追加类,用removeClass()
来删除类,用toggle()
来切换类。
如何给jQuery
动态添加新的元素,如何给新生产的元素绑定事件
jQuery
的html()
可以给当前元素添加新的元素。直接在元素还未生成前就绑定事件肯定是无效的,因为所绑定的元素目前根本不存在。所以可以用live
方法来动态绑定事件。
113.使用`jQuery`中的动画
hide()
和show()
可以同时修改多个样式属性,如高度,宽度,不透明度。fadeIn()
和fadeOut()
,fadeTo()
只能改变不透明度。slideUp()
和slideDown()
,slideToggle()
只能改变高度。animate()
属于自定义动画的方法,可以自定义属性。
114.单击超链接后自动跳转,单击“提交”按钮后表单会提交等,有时候,为了阻止默认行为,怎么办
使用event.preventDefault()
或在事件处理函数中返回false
,即是return false
115.你使用什么方法提交数据
一般使用$.post()
方法,如果需要设定beforeSend
提交前回调函数,error
失败后处理,success
成功后处理complete
请求完成后处理回调函数等,就会使用$.ajax()
。
116.在`ajax`中获取数据的主要有几种方式
三种:html
拼接的query
数据,json
数组对象数据,serialize()
方法序列化后的表单数据。
117.`jquery`中使用过哪些插入节点的方法
内部插入方法:append(), appendTo(), prepend(), prependTo()
外部插入方法:after(), insertAfter(),before(), insertBefore()
118.在`jquery`中,如何获取或者设置属性?如何删除属性
jquery
中可以用attr()
方法来获取和设置元素属性,可以用removeAttr()
方法来删除元素属性。
119.如何设置和获取`html`以及文本的值
使用html()
方法,类似于innerHTML
属性,可以用它读取或设置某个元素中的HTML
内容。
html()
方法可以用于XHTML
文档,不能用于XML
文档。
text()
方法可以用来读取或设置某个元素中的文本内容val()
方法可以用来设置或获取元素的值
120.说说`<script>、<script async>和<script defer>`的区别
<script>
标签,它具有两个属性的,async
异步加载和defer
延迟加载
<script>
当script
标签放在head
中,并且这个script
标签只有scr
属性引入外部js
文件的情况下,HTML
文件开始渲染,直到命中script
标签,此时解析将停止,并发现一个请求获取该文件并执行。执行结束之前继承渲染 HTML 标签。
<script async>
async
表示的意思是异步加载JavaScript
文件。
使用async
会在HTML
解析期间下载文件,并在下载完成后暂停HTML
的解析,执行下载的外部js
文件,执行后继续解析HTML
。
<script defer>
defer
表示的意思是在HTML
文档解析之后在执行加载完成的JavaScript
文件。
它和async
的区别是,同样在HTML
解析期间下载外部的js
文件,但是下载完成后不会立即执行js
脚本文件,而是等到HTML
解析完成后才执行它。即在DOMContentLoaded
之间执行已下载的外部js
文件
121.说说你对`z-index`的理解
z-index
属性设定了一个定位元素及其后代元素或 flex
项目的 z-order
。 当元素之间重叠的时候, z-index
较大的元素会覆盖较小的元素在上层进行显示。
122.包裹节点的方法有哪些?用包裹节点方法的好处?
包裹节点的方法:wrapAll(),wrap(), wrapInner()
,在文档中插入额外的结构化标记时可以使用这些包裹的方法,因为它不会破坏原始文档的语义。
123.如何实现自适应布局
可以使用媒体查询做响应式页面
用
Bootstrap
的栅格系统使用弹性盒模型
124.在移动端如何做好用户体验
清晰的视觉纵线
信息的分组
极致的减法
利用选择代替输入
标签以及文字的排布方式
依靠明文确认密码
合理地利用键盘
125.如何解决长时间按住页面出现闪退的问题
126.解决`iPhone`以及`iPad`输入框的默认内阴影的问题
127.如何解决安卓手机圆角失效问题
通过background-clip:padding-box
为失效的元素设置样式
128.如何解决`ios`设置中`input`按钮样式会被默认样式覆盖的问题
129.如何解决移动端`click`事件有`300ms`延迟问题
300ms
延迟导致用户体验不好,为了解决这个问题,一般在移动端用touchstart, touchend, touchmove, tap
模拟的事件来取代click
事件。
130.如何解决移动端`html5`中的`date`类型的`input`标签不支持`placeholder`属性的问题
131.如何禁止复制或选中文本
132.解决上下拖动滚动条时的卡顿问题
133.说说`XHTML`
所有的
XHTML
元素必须被嵌套于 根元素中。XHTML
标签必须关闭XHTML
所有标签必须小写XHTML
标签必须正确嵌套
134.为什么`10.toFixed(10)`会报错?
原因是js
解释器对.
的解释发生了歧义导致。它既可以理解为小数点,也可以理解为对方法的调用。按照规范,解释器就把它判断为一个小数点。
135.`DOM`和`BOM`有什么区别?
BOM
指 浏览器对象模型
DOM
指 文档对象模型
注意: 只有
JS
的宿主环境是浏览器的时候才有DOM 和 BOM
,在Node
中是没有这两个对象的。
关系说明如图:
136.验证码是为了解决什么问题?
防止机器行为,确定是人为操作,比如登陆、发帖等。
保护服务器,比如
12306
买票的时候,各种抢购的时候。
验证码的类型:
图形验证码;手机验证码
137.写一个获取数组的最大值、最小值的方法
138.`css`的权重计算规则
139.输入 URL 到页面展示
可以带出 缓存、DNS 解析、TCP 连接、HTTP 请求、重排重绘 等等非常多的子问题.
140.`rgba()`和`opacity`
opacity
是属性,rgba()
是函数,计算之后是个属性值opacity
作用于元素和元素的内容,内容会继承元素的透明度,取值0-1
rgba()
一般作为背景色background-color
或者颜色color
的属性值,透明度由其中的alpha
值生效,取值0-1
141.对`arguments`的理解,它是数组吗?
arguments
是一个类数组对象,只能在非箭头函数内部访问,可以通过Array.from(arguments)
将arguments
转化为数组,它和数组的区别是除了length
和索引访问跟数组一样之外没有push和pop
等方法。
142.说说`bind、call、apply`的区别?并手写实现一个`bind`的方法
call和apply
都是为了解决改变this
的指向; 作用都是相同的,只是传参的方式不同。call
可以接收一个参数列表,apply
只接受一个参数数组
bind
绑定完之后返回一个新的函数,不执行。
143.说说你对`this`的理解
全局this
是window
;函数this
是调用者;构造函数的this
是new
之后的新对象,call 和 apply bind
的this
第一个参数
144.如何解决块属性标签浮动后,在设置水平`margin`的情况下,在`ie6`中显示的`margin`比设置的大的问题。
在float
的标签样式控制中加入display:inline
,将其转化为行内属性。
145.页面中的图片元素为什么默认具有间距。
因为img
标签是行内属性标签,所以只要不超出容器的宽度,img
标签都会排在一行里,但是部分浏览器的img
标签之间会有个间距。
出现间距时的解决方法:
可以使用
float
属性让img
浮动布局可以通过
font-size
属性将空白字符大小设置成 0可以将图片的
display
属性设置成block
146.怎么实现盒模型
147.如何解决`li`元素内出现浮动元素时产生间隙的问题
通过设置vertical-align:top/middle/bottom
来解决
148.如何让长单词以及较长的`url`转换
用word-break:break-all
在词内换行。
149.如何解决`display:inine-block`在`ie6`,`ie7`下不兼容的问题
设置float:left
属性
150.如何解决`ie6`不支持`position:fixed`属性的问题
ie6
下用position:absolute
和javascript
来模拟,或者完全不用fixed
属性。
151.如何获取自定义属性数据
在ie
下,可以使用获取常规属性的方法来获取自定义属性数据,也可以使用getAttribute()
获取自定义属性数据。
在Firefox
下,只能使用getAttribute()
获取自定义属性数据。
所以要统一用getAttribute()
获取自定义属性数据。
152.说说`event.srcElement`兼容问题
在ie
下,even
对象有srcElement
属性,但是没有target
属性。
在Firefox
下,even
对象有target
属性,但是没有srcElement
属性。
通过使用srcObj = event.srcElement ? event.srcElement:event.target
这种方式兼容所有浏览器。
153.说说`body`载入问题
Firefox
的body
对象在body
标签没有被字体完全读入之前就存在。
ie
的body
对象则必须在body
标签被浏览器完全读入之后才存在。
154.如何实现元素水平居中
块元素:
行内元素:使用父元素选择器{text-align:center;}
155.如何让`p`元素垂直居中
用vertical-align:middle
将行距增加到和整个p
一样高,然后插入文字,就垂直居中了。
156.`margin`的加倍问题
设置为float
的p
在id
下设置的margin
会加倍,这是ie6
中都存在的一个bug
。解决:在p
里面加上:display:inline
157.如何解决`ie6`下图片有空隙的问题
可以改变html
的排版,设置img
为display:block
,或者设置vertical-align
属性为vertical-align:top/bottom/middle/text-bottom
158.如何让文本与文本输入框对齐
可以为输入框添加vertical-algin: middle
属性。
159.解决`ie`无法设置滚动条颜色的问题
将body
换成html
160.解决`form`标签边距兼容性问题
161.构造函数的特点
构造函数的函数名首字母大写,构造函数类似于一个模板,可以使用new
关键字执行构造函数,创建实例化对象。
162.`javascript`中继承的实现方法
子类的实例可以共享父类的方法,子类可以覆盖从父类扩展来的方法。
163.如何通过`new`构造对象。
创建一个新的对象,这个对象的类型是object
,将this
变量指向该对象;将对象的原型指向该构造函数的原型;执行构造函数,通过this
对象,为实例化对象添加自身属性方法;将this
引用的新创建的对象返回。
164.面向对象的特性
抽象;封装;继承;多态
165.面向对象编程三大特点概述
封装:将描述同一个对象的属性和方法定义在一个对象中。
继承:父对象中的属性和方法被子对象使用。
多态,同一个对象在不同情况下呈现不同的形态:重载(同一方法名,根据传入的参数不同,而执行不同操作);重写(子对象在继承父对象的 属性或方法后,重新定义一个新的属性或方法,来覆盖从父对象中继承的属性或方法)
166.`this`通常的指向
在运行时,this
关键字指向正在调用该方法的对象
167.实现对象的继承
168.`JSONP`实现跨域
在html
中,动态插入script
标签,通过script
标签引入一个javascript
文件,这个javascript
文载入成功后会执行在url
参数中指定的函数,并且会把需要的json
数据作为参数传入。
169.`ajax`请求
170.异步加载的方式
设置
defer
属性,延迟脚本执行,只支持ie
。设置
async
属性,异步加载脚本。创建
script
标签,并插入DOM
中,页面渲染完成后,执行回调函数。
❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章
点赞、收藏和评论
我是Jeskson
(达达前端),感谢各位人才的:点赞、收藏和评论,我们下期见!(如本文内容有地方讲解有误,欢迎指出☞谢谢,一起学习了)
我们下期见!
文章持续更新,可以微信搜一搜「 程序员哆啦 A 梦 」第一时间阅读,回复【资料】有我准备的一线大厂资料,本文 http://www.dadaqianduan.cn/#/ 已经收录
github
收录,欢迎Star
:https://github.com/webVueBlog/WebFamily
版权声明: 本文为 InfoQ 作者【魔王哪吒】的原创文章。
原文链接:【http://xie.infoq.cn/article/71af513da5386b37e2b0901ee】。未经作者许可,禁止转载。
评论 (1 条评论)