前端面试题（各种基础）

最新推荐文章于 2023-02-03 09:45:00 发布

jontyy

最新推荐文章于 2023-02-03 09:45:00 发布

阅读量2.1k

点赞数

分类专栏： web-demo Javascript CSS/CSS3 web组件计算机网络 C++

本文链接：https://blog.csdn.net/YJD19970908/article/details/88890732

版权

HTML

Doctype的作用，标准模式和混杂模式有什么区别
- < ! D o c t y p e>声明位于HTML文档的第一行，出在html标签的前面，告诉浏览器的解析器用什么文档标准解析这个文档，当不存在或者格式错误的时候会采用兼容模式来加载这个网页
- 标准模式的排版和js运作模式都是以改浏览器支持的最高标准运行，在兼容模式中，页面以一种宽松的向后兼容的方式显示，模拟老师浏览器的行为以防止站点无法工作
html语义化的理解
- 用正确的标签做正确的事情
- 让页面的内容结构化，结构更加清晰，便于对浏览器、搜索引擎解析
- 即时没有css的情况下，也已一种文档格式显示，并且容易阅读
- 便于seo，因为搜索引擎的爬虫是依赖于html标记来确定各个关键字的权重
html5的离线存储怎么使用，工作原理

在用户和因特网没有连接时，可以正常访问站点和应用，在用户和因特网链接的时候可以更新用户机器上的缓存文件

原理： html5是一种基于新建一个appcache的文件的缓存机制，通过这个文件上的解析清单离线存储资源，这些资源就会响cookie一样被存储下来之后当网络处于离线状态下，浏览器会通过离线存储的数据进行页面展示

使用：
- 在页面头部下面加入一个mainfest的属性
- 在cache.mainfest文件的编写先存储的资源
- 在离线状态下，操作window.applicationCache进行需求实现。
iframe有那些缺点？
- iframe会阻塞主页面的onload事件，搜索引擎的检索程序无法解读这种页面，会影响seo。iframe和主页面之间是共享连接池的，所以会影响页面的并行加载。
- 为了解决这些缺点，我们需要给iframe动态加上src，这样子的话可以绕开上面的问题
laber的作用是什么？要怎么用
- laber标签定义表单控制，当用户选择该标签时，浏览器会自动吧焦点转到和标签相关的表单控件上。
```
<laber for = "Name">点击这里和点击输入框一样
</laber>
<input type = "texte" name = "bal"/>


<laber>data:<input type ="text" name ="B"/></laber>
```
对页面元素进行编辑
- 对页面整体编辑，需要设置designMode on/off
- 对页面元素编辑，需要设置contentEditable

实现不用border，实现1px高的线

<div style="height:1px;overflow:hidden;background:red"></div>

行内元素和块级元素，行内元素不会换新航，块级元素会格式化为块状，会换行，行内元素不呢能设置宽度和高度，熟悉的行内元素有span,i,em等，img是行内元素，但是可以设置宽度和高度。主要原因是置换元素和非置换元素。

置换元素和非置换元素不仅行内元素有区分，块级元素也有区分，比如iframe以及个别时候的audio和canvas也是置换元素。

置换元素是根据标签的属性来决定元素显示的具体内容，比如img标签就是根据src属性来显示，input标签是根据type属性来显示数据框，这些元素往往没有实际内容，也就是一个空元素。但是大多数元素都是不可替换元素，比如div p，他们都把实际的内容展示出来。

可置换元素有img|input|select|textarea|button。他们区别于一般的inline元素，这些元素拥有内在尺寸，可以设置高度和宽度，他们的性质和设置了inline-block的属性一样，

行内置换元素设置上下padding，可以撑大父元素，而行内非置换元素设置上下padding只是范围扩大，不会影响父元素。
语义化的标签基本都是h5的，比如header footer nav article
li标签之前看不见的空白间隔是什么原因引起的，有什么解决办法

行框的排列会受到中间空白(回车换行的影响）因为空格也属于字符，这些空白也会被应用样式，占据空间，把字符大小设置为0或者负边距，或者删除空白就行。

CSS

w3c标准中，块元素的总宽度就是content，而ie标准盒模型中块元素的总宽度就是content+2 * padding+2 * border。导致他们采用那个标准，是html文件顶部的doctype
行内元素有 br input span b i
BFC是块级格式化上下文，是css2.1的规范，决定了元素如何对其内容进行定位，以及与其他元素的关系和作用。。BFC提供了一个环境，html元素在这个环境中按照固定的规则进行布局，一个环境中的元素不会影响到其它环境的布局。浮动元素内部子元素主要受该浮动元素影响。

触发BFC
- display的值是table-cell ,table-caption,inline-blockk
- overflow为hidden，反正不能visible
- 只要元素触发了BFC，就不需要clearboth来清除浮动
- float的值不能为none
- position的值不是relative和static
css盒子模型中的padding是透明的，可以显示背景
canvas和svg的区别
- canvas
  - 依赖分辨率
  - 不支持事件处理器
  - 弱的文本渲染能力
  - 能够以jpg和png保存图像
  - 适合图形密集的游戏
  - 挨个像素进行渲染
  - 图形完成后不会继续得到浏览器的关注
- SVG
  - 不依赖分辨率
  - 支持时间处理器
  - 适合带有大型渲染区域的应用程序（地图）
  - 复杂度高会减慢渲染速度
  - 不适合游戏
垂直居中的方法
- flex
```
.flex {
       
    display : flex;
    align-items : center;
    align-items : center;
    
}
```
- 单行文字垂直居中，只需要height和line-height一样高
- 多对象的垂直居中技巧，将多个元素用一个大的div包裹起来，并且设置display是inline-block设置高度。
- absolute + margin负值
- absolute+ translate
- flex+margin
import和link的区别
- link
  - 加载页面之前吧css加载完毕
  - link在老版本ie也兼容
  - 当使用javascript控制dom去改变样式的时候，只能使用link标签
- import
  - 读完文件之后加载，所以一开始会没有css，会导致短暂的闪烁
  - 老版本不支持
  - 只能加载css
  - 不可以被dom控制
position定位
- static：默认布局，按照文档流进行排布
- relative：相对布局，按照本身的位置进行偏移
- absolute：绝对定位，从当前节点向上找寻第一个不是static的元素进行定位
- fixed：固定定位，固定在页面的某个位置
- sticky：粘性定位，==relative+fixed，先按照普通文档流进行定位，然后相对于该元素在流中的BFC和块级祖先元素定位，然后元素表现为在跨域特定阈值的时候为相对定位，之后为绝对定位，必须结合left，right，top或者bottom一个使用，可以实现导航栏那些功能。
display
- inline行内布局，表现为各元素在一行显示，比如span元素
- block块级元素，表现为每个元素独占一行，比如p和div
- inline-block行内块元素，表现为每个元素有自己的宽度和高度，但是他们在一行显示，会存在空白间隙现象，处理方法有负边距，font-size=0
- flex弹性布局，可以实现动态分配宽度，比如实现双飞翼那样的布局
双飞翼和圣杯布局

圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。

圣杯

DOM:
<body>
<div id="hd">header</div>
<div id="bd">
  <div id="middle">middle</div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
<style>
#hd{
      
    height:50px;
    background: #666;
    text-align: center;
}
#bd{
      
    /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
    padding:0 200px 0 180px;
    height:100px;
}
#middle{
      
    float:left;
    width:100%;/*左栏上去到第一行*/
    height:100px;
    background:blue;
}
#left{
      
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
    /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
    position:relative;
    left:-180px;
}
#right{
      
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
    /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
    position:relative;
    right:-200px;
}
#footer{
      
    height:50px;
    background: #666;
    text-align: center;
}
</style>

行内元素是否可以设置margin和padding

看html8 置换元素和非置换元素的区别

清除浮动的几种方式。

父级元素设置伪类

.clearfloat{
       zoom:1}
.clearfloat:after {
       
    content : '';
    display:block;
    clear:both;
    visibility:hidden;
}

/*
原理：利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：浏览器支持比较好，不容易出现兼容性问题
*/

在底部添加一个空div，添加属性

.newDiv {
       
    clear:both;
}
/*
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
缺点：添加了一个div，增加了dom节点
*/

父级div设置高度

/*
缺点明显，只适合固定高度的div
*/

父级div设置overflow：hideen

/*
必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
不能使用position
*/

父级元素设置float

/*
形成了bfc，浏览器会检测高度
*/

媒体查询

@media screen and (min-width:1200px)

@media screen and (min-width:992px)

@media screen and (min-width:768px)

@media screen and (min-width:480px)

移动端开发过程中，因为手机的dpr(设备像素比不同)，需要根据dpr来修改图标的大小，判断使用@2x 图还是 @3x 图，解决高清的适配。

/*less，sass这类css预处理语言中的混合，可以理解成自定义了一段代码，后面可以用@include调用*/
@mixin bg-image($url) {
         
      background-image: url($url + "@2x.png");    
      @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
             
            background-image: url($url + "@3x.png");    
      }
}
/*用@include调用*/
div{
     
  width:30px;
  height:20px;
  background-size:30px  20px;
  background-repeat:no-repeat;
  @include bg-image('../../../../static/image/map_loading');     
}



//scss
@mixin box-size($width:100px,$height:100px) {
     
    width: $width;
    height: $height;
}
.demo{
     
    @include box-size;
}

.demo2{
     
    @include box-size(200px,300px);
}

0.5px实现的几种方式

利用渐变来做

<div class = "bd-t"> </div>
.bd-t {
       
    position:relative;
}
.bd-t :after {
       
    content : '';
    position : absolute;
    top:0;
    left:0;
    width:100%;
    height:1px;
     background-image: linear-gradient(0deg, transparent 50%, #e0e0e0 50%);
}

/*
为了实现盒子顶部边框0.5px的伪代码：border-top：0.5px solid #e0e0e0; 的效果，使用after，作为一个钩子，宽度100%，高度1px,背景渐变，一半透明，一半有颜色，这么干是可以的。
*/

使用缩放

<div class="bd-t"></div>
.bd-t {
       
    position :relative;
}
.bt-d:after {
       
    content:'';
    position ；absolute;
    left:0;
    top:0;
    width:100%;
    height:1px;
    transform:scaleY(0.5);
    background:black;
    /*或者
    border-top 1px solid black;
    */
}

使用缩放解决四边都是0.5

<div class= "bd-t"></div>
.bd-t {
       
    position:relative;
}
.bd-t:after {
       
    content:"";
    position:absolute;
    z-index:-1;
	width:200%;
    height:200%;
    transform:sacle(0.5,0.5);
    border:1px solid black;
}

使用background-img

<div class="bd-t">
</div>
.bd-t {
       
    position:relative;
}
.bd-t:after {
       
    content : '';
    position: position;
    left:0;
    top:0;
    width:100%;
    border-top:1px solid transparent;
    border-image: url('pic.png') 2 1 1 1 stretch; 
}

使用同周边相似的浅色，利用视觉效果，让用户产生错觉。

在浏览器中我们可以开启硬件加速，使得gpu发挥作用。cssanimations,transform,transitions不会自动开启gpu加速，而是由浏览器的缓慢的软件渲染引擎来执行。现代浏览器检测到页面中某个dom元素应用了某些css规则的时候就会开启，显著的是元素的3d变换，我们可以欺骗浏览器开启硬件加速。
```
transform:translateZ(0);
```

jquery和css3做动画的区别

css3动画和过度都是基于css实现机制的，没有任何语言操作，效率高于jquery，兼容性不好
jquery的animate函数可以简单的理解为css样式的逐桢动画，是css样式不同状态快速切换的结果，兼容性好
css3使用gpu加速，jquery使用cpu，所以css3更加的流畅
css 动画建议transoform，而不是单独计算width等，因为tansform会吧元素独立出来单独计算。

 $("p").animate({
     "bottom":p*9},3000,function(){
     
                    // 回调函数
                $("p").animate({
     "bottom":-p},6000);
                
                
                
//css3
@keyframes myfirst
{
     
from {
     background: red;}
to {
     background: yellow;}
}

div
{
     
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

不可以继承的， display，margin，padding，border，backgroud，height，width，position等
css多列等高是如何实现的。

利用padding-bottom（+）和marin-bottom(-)正负相抵。设置父容器overflow：hidden，这样父容器的高度就是它里面子元素没有设定padding-boddom的高度，当里面的任何一列高度增加了，那么父容器的高度就被撑到里面最高的那列的高度了。其它的比这列矮的列会用他们的padding-bottom补偿这份高度差
全屏滚动的原理

比如要显示五个页面，可以设置高度为500%；然后只显示100%；通过transform来使用
响应式布局就是一个网站可以兼容多个终端，而不是为每一个终端写一个版本，有点事面对不同分辨率设备灵活性强。但是他会工作量大，而且效率有点低，代码累赘，加载时间长。可以通过媒体查询来做

@media 设备名 only(选取条件) not(选取条件) and(选取条件)
视觉感动就是网页向下滑动的时候，控制背景的移动速度比前景移动速度慢来创建出令人惊叹的3d效果。可以用css实现
::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

单冒号是用于css伪类，双冒号是css微元素，：：befare就是一个子元素的存在，定义在元素主体内容之前的一个微元素，并不存在dom中， after生成的会比before的靠后。
修改chrome记住密码之后自动填充表单的黄色背景，第一种情况是针对文本框是纯色背景的
```
input:-webkit-autofill, textarea:-webkit-autofill, select: -webkit-autofill {
     
  background-color:rgb(250, 255, 189);
  background-image :none,
    color:rgb(0,0,0);
}
/*
设置背景色为白色
*/
```
还有一种情况是，input使用背景图片，图片不复杂的情况下可以使用第一种情况解决，纯色内阴影覆盖，
line-height

行高是只一行文字的高度，具体说的是两行文字极限之间的距离，css起高度作用的主要是height和line-height，一个没有定义height属性，最终表现一定是line-height。单行文本垂直居中只需要吧line-height设置为何height一样高。多行文本垂直居中需要设置display为inline-block
设置元素浮动之后，他的display的值会自动变成block，ie出现双边框设置inline就可以解决bug
position：fixed在安卓中无效怎么办。

fixed的元素是相对整个页面固定位置的，你在屏幕上滑动只是移动站合格所以的viewport，但是原来的网页还好好的在哪里，fixed的内容也没有变化位置，。需要在head中加入代码
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, 
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
```
如果要手写动画，最小的时间间隔。

因为大多数显示器的默认分辨率是60hz，也就是1s刷新60次，所以莅临赏最小的时间间隔是1/60*1000 也就是16.7ms

有一个高度自适应的div，里面有两个div，一个高度是100px；希望另一个填满剩下的高度，

.con {
     
  height: auto;
}
.top {
     
  width:100%;
  height:100px;
  backgroun:red;
}
.bottom {
     
  position: absolute;
  top:100px;
  width:100%;
  bottom:0;
  left:0;
  right:0;
  
}

png, jpg, gif

png是无损的，压缩比高，色彩好，透明

jpg是针对相片的失真压缩，会皮怀的，

gif是一种位图格式，可以有动画
cookie隔离，看下面的cookie优化
移动端最小触控区域时44px*44px

css强制不换行，超出部分用省略号

{
     
  white-space: nowrap; //文本强制不换行；
  text-overflow:ellipsis; //文本溢出显示省略号；
  overflow:hidden; //溢出的部分隐藏；
}

颜色渐变

background: linear-gradient(to right, dodgerBlue, skyBlue);
-webkit-background-clip: text;

rem实现页面兼容

例如：设计稿宽度是750px，有一个元素设计稿上的宽度是50px，设备物理宽度是375px,那么我们在页面上应该设置宽度为 width:50rem，相当于宽度是：50*（375/750）=25px；这里能正确算出在375px的设备上刚好占一半,其实可以想象为 rem=（375/750）。

2.一般浏览器的最小字体是12px，如果html的font-size=（375/750）px，相当于font-size=0.5px，那么这个数值就小于12px，会造成一些计算的错误，和一些奇怪的问题，*100后，font-size是50px，就可以解决这种字体小于12px的问题。
1. 为了计算方便我们后面把比率乘以了100，（375/750）*100，那么相对应这个元素在设置数值的时候就需要除以100了（50/100）,这样可以保证最后出来的数值不变.
在header中写标签设置font-size的大小。
```
<script type="text/javascript">
	document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*100 + 'px';
</script>
```

js

移动端ios开发和andriod的区别
- 物理返回andriond会刷新，ios不会刷新
- ios和安卓对json对象遍历的顺序相反
- ios弹出键盘的时候，viewport的高度并不会边，但是安卓变，所以iosfixed在底部的元素显示不出来。
- ios自带的浏览器是有双击缩放功能的。比如用户在ios里面点击了一个连接，由于用户可以进行双击缩放和双击滚动的操作，浏览器并不能确定用户是要打开这个链接还是要放大，所以需要等待三百ms来判断用户是判断用户是否再次点击。所以就有了300ms延迟
- 解决方法有
  - 添加viewpoint meta标签，不允许缩放
```
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
```
  - 使用fastclick代码
  移动端事件触发的顺序是，touchstart-》touchmove-》touchend-》click，所以fastclick的原理就是检测到touch事件的时候，通过dom自定义事件立即模拟click事件，同时把300ms之后的事件阻止掉
- 与之相关的还有点击穿透事件，比如页面有两个元素a和b，b元素在a元素的上面，我们在b元素的touchstart事件上注册了一个回调函数，这个回调函数的作用是隐藏b元素，我们发现，当点击b元素的时候，b被隐藏了，同时a元素触发了click事件。这是因为事件的处理顺序，click有300ms的延迟，touchstart是立即发生的，然后300ms之后，浏览器触发了click事件，但是这时候b已经没了，那就触发了a事件，同样用fastclick解决
移动端为什么用zepto而不是jquery
- 因为jquery适用于桌面环境，桌面环境更加复杂，jquery需要考虑的因素非常多，尤其是在兼容性上面，相对于pc端，移动端的复杂度就比不上pc端了，pc端下载jquery只需要1-3s，但是移动端就慢了很多，zepto比jquery小很多，只有不到10k，表现也不比jquery差很多
cookie，sessionStorage，localStorage的区别
- cookie是网站为了标识用户身份而存储在用户本地终端上的数据，通常是加密的。是由服务器生成的。
- cookie的数据始终在同源的http请求中携带，即使不需要，也就是说他们会在浏览器和服务器之间来回传递
- localstorage和sessionstorage仅仅在本地保存，不会发给服务器
- cookie的大小是4kb，sessionStorage和loaclStorage虽然也有大小限制，但是他们比cookie要大得多，可以达到5m
- localStorage可以永久保存数据，浏览器关闭之后不会丢失的，除非主动删除
- sessionStroage 数据在当前浏览器窗口关闭之后自动删除
- cookie 设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭
- http-only属性标识一个客户端jas能否操作改cookie
- max-age属性表示缓存时间，单位为秒，domain设置可以访问该cookie的域名
- cookie的优化方案有
- 去除没有必要的cookie，如果页面不需要cookie就完全禁用
- 将ciikie的大小减少到最小，由于cookie在访问对应于明霞的资源时候都会通过http请求发送到服务器，所以减少cookie的代销，可以减少http请求报文的大小，提高相应速度。
- 设置合适的过期时间，较长的过期时间可以提高访问速度。
- 通过不同的domain来减少cookie的使用，在访问js，css和图片是，大多数cookie是多余的，可以使用不同的domain来存储这些静态资源，这样访问这些资源时就不会发送多余的cookie，从而提高响应速度举个例子来说，我们的主网站是 w w w . sunrobin.com/default.aspx，那么图片类的静态文件应该放到w w w.sunrobinimg.com域名下边。而且这两个域名其实最终可以指向同一个server，但是浏览器发送cookie的原则只是根据域名是否一样，不关心最终在哪个server,而且还有一种方式，就是使用CDN
- 那么是cookie的名称，value是cookie的值，domian字段设置cookie的域名，path字段可以访问cookiede页面路径
获取鼠标点击的位置
- 相对于屏幕 event.screenX
- 相对于浏览器窗口 event.clientX
- 相对于文档 event.pageX ||event.clientX + event.scrollX
判断一个对象是不是数组
- typeof一定不行，会返回一个object
- instanceof判断一个变量是否是某个对象的实例
- Object.prototype.toString.call(obj) ===’[object Array]’
- es5 有个isArray（）方法
ajax请求数据的流程
- 创建ajax对象
- 发送http请求
- 接受服务器返回的数据
- 更新网页数据
浏览器事件

事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间，可以用监听器来监听事件。部分不支持冒泡的事件有
- ui事件
  - load
  - unload
  - scroll
  - resize
- 焦点事件
  - blur
  - focus
- 鼠标事件
  - mouseleave
  - mouseenter
事件冒泡会从当前触发的目标事件一级一级向上传递，依次触发，知道document为止，事件捕获会从document开始触发，一级一级向下传递，依次触发，直到真正到目标为止

我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡。会执行几次事件，会先执行冒泡还是捕获？

会执行两次，先捕获，后冒泡

事件触发的顺序是事件捕获-> 事件触发 -> 事件冒泡
- 事件冒泡的用处有很多，比如可以给ui标签里面每一个li标签绑定事件，也可以给ul绑定事件，监听li标签，增加效率
- 有些时候需要阻止冒泡，比如一个模态框，框里有一个按钮，我点击按钮需要跳转页面，点击模态框没有反应，点击模态框外面的需要把模态框给藏起来，这个时候就需要阻止冒泡，要不然点击模态框会导致隐藏。。。
- 阻止冒泡的方法。dom中提供stopProgpagation方法，ie不支持这个方法，所以ie需要用cancelbubble方法，默认为false，当设置为true的时候就可以阻止冒泡了，也就是用event对象在事件函数中调用。
- 取消默认事件，在w3c中时preventDefault，ie是设置e.returnValue= true
js基本数据类型有 null，undefined，string number boolean symbol
复杂数据类型 array object function
延迟js的运行，需要加上在script中加上defer属性
日期类转换到原始值能使用什么方法，toString
typeof Date.now() 的返回值是number
oxff^33 是异或的意思。
client是content+ 2*padding。 offset是content+ 2 * padding + 2 * border
scrollheight是真实的高度，自身高度加上滑动高度
[] == 0; [1]==1; [0] == 0
a标签不跳转有三种方式，第一种src=#，第二种 onclick函数return false，第三种href= javascript:void(0)
parseInt(string，radix)有两个参数，第一个参数是要解析的字符串，第二个参数是要解析的基数，这个值在2-36之间，省略的话会当做10来处理，小于2或者大于36会NaN
javascript有许多保留字不嫩用作标识符，比如arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield
事件循环队列的只是，是主线任务完成后，会完成所有微队列内的异步任务(promise)，再去处理宏队列的任务，settimeout
每个对象都会在其内部初始化一个属性也就是prototype，当我们范文正对对象属性时，如果这个对象内部不存在这个属性，那么它就会去prototype中去找这个属性，这个prototype也会有自己的prototype。于是这样一直找下去，就是我们说的原型链的概念， instance.constructot.prototype = instance.proto
window对象是指浏览器打开的窗口，document对象时document对象的一个制度引用，是window对象的一个属性
全局函数无法查看局部函数，但是局部函数可以查看全局函数，当需要从局部函数查找某一属性和方法的时候，如果当前作用域没有找到，就会上诉到上层作用域查找，直到全局函数，这就是作用域链
上下文是基于对象的，上下文总是关键字this的值，this总是指向函数的直接调用者，当函数作为对象的方法被调用，this指向调用方法的对象、如果有new创建一个对象的实例的时候，那么this就指向new出来的这个对象，当调用一个未绑定函数，this默认指向全局上下文或者浏览器的window对象，如果在严格模式下，this指向undefined，当对象调用属性的时候，this指向调用的对象。call，bind，apply可以改变this的指向
当函数执行的时候，会创建一个称为执行上下文的内部对象，不是25的上下文，一个执行上下文就定义了一个函数执行时的环境，函数每次执行时对应的执行上下文都是独一无二的，所以多次调用同一个函数会导致创建多个执行上下文，当js代码被浏览器载入后，默认最先进入的是一个全局的执行上下文，当在全局上下文中调用一个执行函数的时候，程序流就进入了该调用函数内，此时，引擎就会为该函数新建一个执行上下文，并且将其压入执行栈顶部，(作用域链)浏览器总是执行位于执行栈顶部的执行上下文，一旦执行完毕，该执行上下文就会从执行栈顶部弹出，并且控制权进入下一个执行上下文，这样子，执行栈中的指向上下文就会被一次执行并且弹出，直到回到全局的执行上下文。
作用域链其实就是我们访问对象的属性和方法，当找不到的时候，就会通过scope，进行查找，scope连存储的执行上下文的集合，这个集合呈现链式连接，我们称之为作用域链
原型链就是我找一个属性首先会在f.proto中找，如果找不到，就去f.protot.proto中去找，直到找到null位置，这个串起来的链就是原型链
什么是闭包，为什么要用

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
javaScript中hasOwnProperty函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。
使用方法：
object.hasOwnProperty(proName)
其中参数object是必选项。一个对象的实例。
proName是必选项。一个属性名称的字符串值。
如果 object 具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回 true，反之则返回 false。
[].forEach.call($$(""),function(a){a.style.outline=“1px solid #”+(~~(Math.random()(1<<24))).toString(16)}) 给页面每一个dom元素加上一个彩色border
防抖和节流

针对响应跟不上触发频率这种问题的两种解决方案，再给dom绑定事件的时候，有些时间我们是无法控制频率的。如鼠标移动事件，滚动事件onscroll，窗口大小改变事件onresize，瞬间的操作都会导致这些事件被高频触发。如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿、假死现象。针对这种连续触发和不可控的高频触发问题，可以用去抖动和节流。防抖的方法是，当时间触发的时候，设定一个周期延迟执行，若期间又被触发，那么重新设定周期，直到周期结束，执行动作。如果周期内有事件发生，那么周期就重新设定。节流的方法是固定周期内，只执行一次动作，如果有新的事件触发，那么就不执行，周期结束之后，执行动作。
- 去抖方法一，有新事件触发，就清除旧定时器
```
// 暴力版： 定时器期间，有新操作时，清空旧定时器，重设新定时器
var debounce = (fn, wait) => {
       
	let timer, timeStamp=0;
	let context, args;
 
	let run = ()=>{
       
		timer= setTimeout(()=>{
       
			fn.apply(context,args);
		},wait);
	}
	let clean = () => {
       
		clearTimeout(timer);
	}
 
	return function(){
       
		context=this;
		args=arguments;
		let now = (new Date()).getTime();
 
		if(now-timeStamp < wait){
       
			console.log('reset',now);
			clean();  // clear running timer 
			run();    // reset new timer from current time
		}else{
       
			console.log('set',now);
			run();    // last timer alreay executed, set a new timer
		
```

最低0.47元/天解锁文章

jontyy

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端面试题（各种基础）

HTMLDoctype的作用，标准模式和混杂模式有什么区别< ! D o c t y p e>声明位于HTML文档的第一行，出在html标签的前面，告诉浏览器的解析器用什么文档标准解析这个文档，当不存在或者格式错误的时候会采用兼容模式来加载这个网页标准模式的排版和js运作模式都是以改浏览器支持的最高标准运行，在兼容模式中，页面以一种宽松的向后兼容的方式显示，模拟老师浏览器的...
复制链接

扫一扫