WEB前端面试题大全前端面试

简单前端面试题

2019-08-21  本文已影响0人  栀璃鸢年_49a3

简单面试题

1.map与foreach区别、

2.call和apply区别

3.五大常用浏览器及内核

1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

4.cookies，sessionStorage和localStorage的区别？

  1. 数据与服务器之间的交互方式
    cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
    sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
    var name = "jack";  
    var pwd = "123";  
    var now = new Date();  
    now.setTime(now.getTime() +1 * 24 * 60 * 60 * 1000);//转毫秒  
    var path = "/";//可以是具体的网页  
    document.cookie = "name=" + name + ";expires=" + now.toUTCString() + ";path=" + path;//姓名  
    document.cookie= "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密码 

    var name = null;  
    var pwd = null;  
    var now = new Date();  
    var path = "/";//可以是具体的网页  
    document.cookie= "name=" + name + ";expires=" + now.toUTCString()+ ";path=" + path;//姓名  
    document.cookie = "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密码

5.src与href

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。
src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。

6.link和@import的区别

7.javaScript之split与join的区别

split()用于分割字符串，返回一个数组
join()用于连接多个字符或字符串，返回值为一个字符串

8.JS阻止冒泡和取消默认事件(默认行为)

js冒泡和捕获是事件的两种行为，使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。
使用event.preventDefault()可以取消默认事件

9.document.ready和onload的区别——

10.判断数据类型

  1. typeof
  2. instanceof
  3. num.constructor==Number
  4. Object.prototype.toString.call()

11.JavaScript原型，原型链 ? 有什么特点？

12.闭包的特点：

全局变量和局部变量

1、函数内部可以读取函数外部的全局变量；在函数外部无法读取函数内的局部变量。
2、函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

闭包的缺点：

1）滥用闭包，会造成内存泄漏：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）会改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

13.js数组类型中的常用方法

concat()
连接两个或更多的数组，并返回结果。
join()
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()
删除并返回数组的最后一个元素
push()
向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()
颠倒数组中元素的顺序。
shift()
删除并返回数组的第一个元素
slice()
从某个已有的数组返回选定的元素
sort()
对数组的元素进行排序
splice()
删除元素，并向数组添加新元素。
toSource()
返回该对象的源代码。
toString()
把数组转换为字符串，并返回结果。
toLocaleString()
把数组转换为本地数组，并返回结果。
unshift()
向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()
返回数组对象的原始值

14.列举可以哪些方面对前端开发进行优化

代码压缩、合并减少http请求，图片制作精灵图、代码优化

15.ajax详解

1.ajax?

2.ajax过程

  1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
  3. 设置响应HTTP请求状态变化的函数
  4. 发送HTTP请求
  5. 获取异步调用返回的数据
  6. 使用JavaScript和DOM实现局部刷新
    //第一步，创建XMLHttpRequest对象
        var xmlHttp = new XMLHttpRequest();
        function CommentAll() {
        
        //第二步，注册回调函数
            xmlHttp.onreadystatechange =callback1;
            //{
            //    if (xmlHttp.readyState == 4)
            //        if (xmlHttp.status == 200) {
            //            var responseText = xmlHttp.responseText;
            //        }
            //}
        
        //第三步，配置请求信息，open(),get
            //get请求下参数加在url后，.ashx?methodName = GetAllComment&str1=str1&str2=str2
            xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?    methodName=GetAllComment", true);
            //post请求下需要配置请求头信息
            //xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //第四步，发送请求,post请求下，要传递的参数放这
            xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"
        }

        //第五步，创建回调函数
        function callback1() {
            if (xmlHttp.readyState == 4)
                if (xmlHttp.status == 200) {
                    //取得返回的数据
                    var data = xmlHttp.responseText;
                    //json字符串转为json格式
                    data = eval(data);
                    $.each(data,
                        function(i, v) {
                            alert(v);
                        });       
                }
        }

3.readyState生命周期

0. 当前请求未初始化 当前请求数据包已设置好但未初始化
1.建立和后台的链接open
2.请求已经发送   后台接收到请求 send
3.后台正在处理请求
4.后台已经响应，前端接收数据

4.Ajax中POST和GET的区别

Get和Post都是向服务器发送的一种请求，只是发送机制不同。

  1. GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的。
  2. 首先是"GET方式提交的数据最多只能是1024字节"，因为GET是通过URL提交数据，那么GET可提交的数据量就跟URL的长度有直接关系了。而实际上，URL不存在参数上限的问题，HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。注意这是限制是整个URL长度，而不仅仅是你的参数值数据长度。
  3. GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题
    get请求和post请求在服务器端的区别:
  4. 在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,而客户端使用post请求时,服务器端使用Request.Form来获取参数.

5.ajax优缺点

6..AJAX注意点及适用和不适用场景

7.浅谈域名的发散和收敛

当前，浏览器对同一域名的连接数是有上限的，
连接数：服务器同时进行的并行服务；
浏览器设置最大连接数的目的有二：
1、早期服务器脆弱，子啊处理高并发的时候一蹦
域名的发散（1）2000-2010 PC有线网
1）将同一个网站的不同数据分别存储在多个域名中。
2）音乐 贴吧 搜索
3）好处①提升访问速度
（2）防止DDOS攻击
PC端时代，为了解决服务器高并发压力，而产生的理念。
域名的收敛
移动端
2010--至今 移动端浏览器
2011-移动网络 2g 3g 4g 网速比有线网慢
一般移动端的网站域名个数在2-3个左右耗时最短
http请求的步骤：
1）DNS解析 时间用时最久
域名解析 顺序 com -> taobao.com -> www.taobao.com
4g网解析一个域名需要1,7s so DNS解析 时间用时最久
2）TCP三次握手
3）前后端连接后发送请求
4）后台处理请求
5）返回响应数据
6）四次挥手
7）渲染

8.工作原理

1.dns解析，2.tcp三次握手，3.ajax建立前后端连接，4.发请求，5.服务器处理请求，6.响应数据

16.十二栅格

17.实例化，原型，构造函数关系

[站外图片上传中...(image-656bd5-1565946750119)]
三者的关系是，每个构造函数都有一个原型对象，原型对象上包含着一个指向构造函数的指针，而实例都包含着一个指向原型对象的内部指针。通俗的说，实例可以通过内部指针访问到原型对象，原型对象可以通过constructor找到构造函数。

18.处理异步的方法

promise./回调/aysnc awiat

19.跨域

20.new 的时候都做了哪些？

?创建一个新的实例对象
?将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）
?执行构造函数中的代码（为这个新对象添加属性）
?返回新对象。

21.继承方法

1.children.prototype=new person();
2.代码效率低，性能不好（特殊）
extend(person.prototype,children.prototype)function extend(obj1,obj2){
for(attr in obj1){
obj2[attr]=obj1[attr];
}
}

22.什么是面向对象

把客观对象抽象成属性数据或数据的相关操作，把内部细节和不相关的信息隐藏起来，把同一类数据和操作绑定在一起，封装成类，并且允许分成不同层次进行抽象，通过继承实现属性和操作的共享

23.什么是设计

1.按哪一种思路或者标准来实现功能
2.功能相同，可以有不同的设计方案
3.需求如果不断变化，设计的作用才能体现出来
首字母 代指 概念
S 单一职责原则 单一功能原则认为对象应该仅具有一种单一功能的概念
O 开放封闭原则 开闭原则“软件体应该是对于拓展的开放，但是对于修改封闭的概念
L 里式替换原则 里氏替换原则认为“程序中的对象应该是可以在不改变程序正确的前提下被它的子类所替换”的概念，参考 契约式设计
I 接口隔离原则 接口隔离原则认为“多个特定客户端要好于一个宽泛用途接口的概念
D 依赖反转原则 依赖翻转原则认为一个方法应遵从“依赖于抽象而不是一个实例的概念。依赖注入是该原则的一种实现方式

24.理解作用域：

25.动画和过渡区别

26.http常用状态码

27.什么是javaScript

28.css3动画

@keyframes  规定动画。   3
animation   所有动画属性的简写属性，除了 animation-play-state 属性。 3

animation-name  规定 @keyframes 动画的名称。    3
animation-duration  规定动画完成一个周期所花费的秒或毫秒。 3 事件
animation-timing-function   规定动画的速度曲线。  3 ease  ease-in进入慢  ease-out出去慢  ease-in-out 进入出去慢
animation-delay 规定动画何时开始。   3  延迟
animation-iteration-count   规定动画被播放的次数。 3  infinite循环播放
animation-direction 规定动画是否在下一周期逆向地播放。   3 alternate 交替  alternate-reverse反向交替      normal正序  
animation-play-state    规定动画是否正在运行或暂停。  3 running 运行   paused 暂停
animation-fill-mode 规定对象动画时间之外的状态。(动画保持) backwards 默认回到第一帧 forwards 动画结束保持最后一帧

/* 透视距离，物体越远显示越小 */
            ！！！/* perspective: 800px; */
            /* 透视基点     水平，垂直*/
            /* perspective-origin: 186px 112px; */
 animation-fill-mode: forwards; 
        /* backwards 默认回到第一帧 */
        /* 动画结束保持最后一帧 */
transform-origin: left; 基点
 animation-delay: 1s;延迟加载

29.弹性盒子

#### 父类设置
display:flex/inline-flex
    flex:弹性布局
    inline-flex 内联块级弹性布局
控制主轴方向
    flex-direction:row/column/row-reverse/column-reverse 竖列反向
                    
控制换行
    flex-wrap:
        nowrap 不换行
        wrap 换行
        wrap-reverse

可用替换成  （控制主轴方向，控制换行）      
flex-flow:row wrap;

控制主轴排序方式(对齐)
    jistify-content
        flex-start 左对齐（靠上）
        flex-end 右对齐 （靠下）
        center 居中
        space-between 两端靠边中间平分（项目之间间隔相等）
        space-around 两侧间隔相等，（项目边距与边框间隔大一倍）

控制轴线之间的距离
    algin-content
        flex-start 左对齐（靠上）
        flex-end 右对齐 （靠下）
        center 居中
        space-between 两端靠边中间平分（项目之间间隔相等）
        space-around 两侧间隔相等，（项目边距与边框间隔大一倍）
        stretch 拉伸至父级
    align-items
        flex-start 上对齐
        flex-end  下对齐
        center 中对齐 
        stretch 不设高度或为auto是充满整屏
        baseline 根据基线  和flex-start基本一致

#### 子类设置

    flex 设置宽度比例
    flex:1/2/3/4
    order排序
    1234
    可以设置order:-1;提到前面

用弹性盒子不生效的属性
float：浮动
清除浮动
vertical-align

30.@import与link

1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5.权重区别(该项有争议，下文将详解)
link引入的样式权重大于@import引入的样式。

31.数组/对象的深拷贝

32.遍历对象

33.jquery优化的方法

1. 使用#id去寻找element
2. 缓存jq对象
3. 限制直接对DOM操作
4. 采用jQuery内部函数data()来存储状态。
    存储：$("#home").data("name","value");
    调用：$("#home").data("name");
5. 在class前面使用tag
6. 更好的利用链式结构

34.vue2.0中的$router 和 $route的区别

1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
举例：history对象
router.push({path:'home'});本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录 方法：router.replace({path:'home'});//替换路由，没有历史记录
2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等
我们可以从vue devtools中看到每个路由对象的不同

35.vue核心

vue有两大核心: 数据驱动 和 组件

36.在vue中监听路由变化的函数

1.通过 watch
2.通过 vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave

37.事件的阶段

-event.eventPhase

38.vue dta为什么是函数

而当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。
 vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。
上面解释了data不能为对象的原因，这里我们简单说下data为函数的原因。data为函数，通过return 返回对象的拷贝，致使每个实例都有自己独立的对象，实例之间可以互不影响的改变data属性值。

39.SPA （单页应用程序）

40.页面生成过程

1、DNS服务器通过域名查找对应的web 服务器ip地址；
2、浏览器访问web服务器；
　 这里涉及到客户端与服务器的tcp 三次握手与四次挥手，可以参考上篇博文《TCP的三次握手(建立连接）与 四次挥手(关闭连接）》；
3、服务器处理完成返回html;
4、浏览器解析、加载页面

解析html 构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树 ：
解析：
　　1、将HTML构建成一个DOM树（DOM = Document Object Model 文档对象模型），DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
　　2、将CSS解析成CSS去构造CSSOM树( CSSOM = CSS Object Model CSS对象模型)
　　3、根据DOM树和CSSOM来构造 Rendering Tree（渲染树）。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。

4.有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。
　　5.下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置 layout render tree。
　　6.再下一步就是绘制，即遍历render树，并使用浏览器UI后端层绘制每个节点。

41.html渲染过程

1．解析HTML文件，创建DOM树
2．解析CSS,形成CSS对象模型
3．将CSS与DOM合并，构建渲染树（renderingtree）
4．布局和绘制

42.性能优化中重绘、重排：

（1）Reflow（回流/重排）：当它发现了某个部分发生了变化影响了布局，渲染树需要重新计算。
（2）Repaint（重绘）：改变了某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排；
Reflow要比Repaint更花费时间，也就更影响性能。所以在写代码的时候，要尽量避免过多的Reflow。

reflow的原因：

（1）页面初始化的时候；
（2）操作DOM时；
（3）某些元素的尺寸变了；
（4）如果 CSS 的属性发生变化了。

43.defer、async 区别

defer、async都是异步下载，但是执行时刻不一致；

44.vue常用修饰符

45.react生命周期??

46.vue路由钩子

    router.beforeEach((to, from, next) => {
    //会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了
    console.log('beforeEach')
    console.log(to,from)
    //
    next()
    })
    //
    router.afterEach((to, from) => {
        //会在任意路由跳转后执行
    console.log('afterEach')
    })

     routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]

` beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

47.获取数据类型的方法

typeof
instanceof
num.constructor==Number
Object.prototype.toString.call()

48.bfc 块格式化上下文

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

49.跨域

1.什么是跨域

    由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况：
    网络协议不同，如http协议访问https协议。
    端口不同，如80端口访问8080端口。
    域名不同，如qianduanblog.com访问baidu.com。
    子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。
    域名和域名对应ip,如www.a.com访问20.205.28.90.

2.跨域请求资源的方法：

(1)、porxy代理

(2)、CORS 【Cross-Origin Resource Sharing】

    res.writeHead(200, {
        "Content-Type": "text/html; charset=UTF-8",
        "Access-Control-Allow-Origin":'http://localhost',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
    });

(3)、jsonp

    <script>
        function testjsonp(data) {
        console.log(data.name); // 获取返回的结果
        }
    </script>
    <script>
        var _script = document.createElement('script');
        _script.type = "text/javascript";
        _script.src = "http://localhost:8888/jsonp?callback=testjsonp";
        document.head.appendChild(_script);
    </script>

50.隐藏内容

    <div style="display:none;">我不占地儿，你看不见我；</div>
    <div style="visibility:hidden;">我占了地儿，你也看不见我；</div>
    <div style="width:120px; height:20px; overflow:hidden;">我占的地儿太多了你就看不见我的尾巴了。。。。。</div>

51.移动端前端适配方案

2.Flex弹性布局
3.rem + viewport 缩放
4、rem实现

什么函数永远不会去查找原型

object.hasOwnProperty(proName)

52.js字符串操作

concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。

indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回 -1 。

charAt() – 返回指定位置的字符。

lastIndexOf() – 返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回 -1 。

match() – 检查一个字符串是否匹配一个正则表达式。

substr() 函数 -- 返回从string的startPos位置，长度为length的字符串

substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。

slice() – 提取字符串的一部分，并返回一个新字符串。

replace() – 用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。

search() – 执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。

split() – 通过将字符串划分成子串，将一个字符串做成一个字符串数组。

length – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。

toLowerCase() – 将整个字符串转成小写字母。

toUpperCase() – 将整个字符串转成大写字母。

53.操作节点

1）创建新节点

createDocumentFragment() //创建一个DOM片段
　　createElement() //创建一个具体的元素
　　createTextNode() //创建一个文本节点

2）添加、移除、替换、插入
　　appendChild() //添加
　　removeChild() //移除
　　replaceChild() //替换
　　insertBefore() //插入

3）查找
　　getElementsByTagName() //通过标签名称
　　getElementsByName() //通过元素的Name属性的值
　　getElementById() //通过元素Id，唯一性

54.写出3个使用this的典型应用

1）、在html元素事件属性中使用，如：

<input type=”button” onclick=”showInfo(this);” value=”点击一下”/>

（2）、构造函数

    function Animal(name, color) {
    　　this.name = name;
    　　this.color = color;
    }

（3）、input点击，获取值

<input type="button" id="text" value="点击一下" />
<script type="text/javascript">
    var btn = document.getElementById("text");
    btn.onclick = function() {
        alert(this.value);    //此处的this是按钮元素
    }
</script>

(4)、apply()/call()求数组最值

var  numbers = [5, 458 , 120 , -215 ]; 
var  maxInNumbers = Math.max.apply(this, numbers);  
console.log(maxInNumbers);  // 458
var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215); 
console.log(maxInNumbers);  // 458

54.比较typeof与instanceof？

55.全局变量和局部变量

56.谈谈垃圾回收机制方式及内存管理

一.回收机制
1、定义和用法：垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。

2、原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。

二。垃圾回收策略：标记清除(较为常用)和引用计数。
标记清除：-

定义和用法：当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为："离开环境"。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。

到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。

引用计数：

定义和用法：引用计数是跟踪记录每个值被引用的次数。

基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。

57.在JavaScript中实现继承的方法：

  1. 原型链（prototype chaining）
  2. call()/apply()
  3. 混合方式(prototype和call()/apply()结合)
  4. 对象冒充

58.从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

dns缓存，cdn缓存，浏览器缓存，服务器缓存

59.数组的结构赋值和对象的区别

60.Promise概念和常用api

-链接
https://blog.csdn.net/songlf521/article/details/55670977

61.数组对象

62.你所了解到的Web攻击技术

（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

63.js基本类型与包装类的区别

    //我们平常写程序的过程：
    var str = 'hello'; //string 基本类型
    var s2 = str.charAt(0); //在执行到这一句的时候 后台会自动完成以下动作 ：
    （ 
    var _str = new String('hello'); // 1 找到对应的包装对象类型，然后通过包装对象创建出一个和基本类型值相同的对象
    var s2 = _str.chaAt(0); // 2 然后这个对象就可以调用包装对象下的方法，并且返回结给s2.
    _str = null;  //    3 之后这个临时创建的对象就被销毁了， str =null; 
    ） 
    alert(s2);//h 
    alert(str);//hello

1.引用类型和基本包装对象的区别:生存期
引用类型所创建的对象，在执行的期间一直在内存中，而基本包装对象只是存在了一瞬间。
2.添加属性或方法
基本包装对象的原型下面添加，每个对象都有原型

    //给字符串添加方法  要写到对应的包装对象的原型下才行
    var str = 'hello';
    String.prototype.last= fuction(){ 
        return this.charAt(this.length);
    }; 
    str.last(); // 5 执行到这一句，后台依然会偷偷的干这些事
    ｛ 
        var _str = new String('hello');// 找到基本包装对象，new一个和字符串值相同的对象，
        _str.last();  // 通过这个对象找到了包装对象下的方法并调用 
        _str =null; //  这个对象被销毁
    ｝

64.严格模式

ECMAScript 5的严格模式是采用具有限制性JavaScript变体的一种方式，从而使代码显示地 脱离“马虎模式/稀松模式/懒散模式“（sloppy）模式。

65.预处理与预编译

66.touches targetTouches changedTouches

touches：当前屏幕上所有触摸点的列表；
targetTouches：当前对象上所有触摸点的列表；
changedTouches：涉及当前（引发）事件的触摸点的列表：

67.外边距重叠

68.超出省略

xxx{
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

69.json Xml区别

70.简述异步与同步

同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

71.什么叫优雅降级和渐进增强？

72.浏览器访问一个网站所经历的步骤？

页面加载---》DNS解析--》 发起tcp请求----浏览器向服务器发起http三次握手--》发起http请求--》服务器处理收到请求--》浏览器收到http的响应--》浏览器渲染--》网页面静态资源加载

73.vue生命周期

新增了激活和禁用activated 与created类似 在组件上面包裹一层keep-alive组件
Deactivated 与destory类似 不会被创建和销毁
在最早发请求的时候在created时候发请求
UpDated
Mounted
大致：创建、查找与处理（找到组件并渲染）、挂载（插入）、更新（重新渲染并插入）、销毁（卸载所有）

详细：1.1.创建vue对象，初始化事件，进行数据的观测，可以看到在created的时候数据已经和data属性进行绑定（放在data中的属性当值发生改变的同时，视图也会改变）。注意看下：此时还是没有el选项，到created实例对象已经完成了配置，dom还没有渲染
2.created之后，，实例对象开始对参数进行解析，el选项。此时el为undefined, 如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期 ，进入编译过程；继续找template如果有在template模板上编译render函数，如果没有模板，在outhtml上编译render函数，如果template与render都没有，则生命周期结束。
3.挂载部分mounted,此时增添 el成员，替换dom元素，
4.更新 更新回调，将旧的数据替换新的数据，在虚拟的dom中重新渲染，updated更新后钩子， data发生改变，真正dom结构被彻底替换，页面发生变化，
5.销毁部分：开始销毁vue实例之前会提示是否删除，销毁所有的属性，最后销毁完毕，生命周期结束

74.前端鉴权：值得是什么？

1.http base authentication（基本授权）
2.Session-cookie
3.Token验证（基于JWT Jwt实际上是一个字符串，他是由三部分组成的，头部，载荷，签名）
4.OAuth(开发授权)

75.伪类数组转为数组的方法两种：

Array.prototype.slice.call(伪数组)
Array.from(伪数组)

76.Es6数组的方法

filter:过滤 返回的是一个条件为真的数组，不操作原数组
map: 映射；把一个数组映射为另一个新数组；一个参数；
Reduce 收敛 两个参数；reduce(callback，prev) 返回一个数值
特点：1.return 后面的值会作为下一次的prev

77.JS打开新窗口防止被浏览器阻止的方法：

第一种、使用原生javascript的window.open()方法（大部分情况下会被浏览自阻止）
第二种、模拟表单(form)提交，原理是指定表单的action为想要打开的URL地址，target设置为"_blank"
第三种、模拟超链接(<a>)被点击

78.Websocket (聊天软件或者单机游戏 )

WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据.
HTML5带来的新协议，通过类似HTTP的请求建立连接。主要目的是可以获取服务端的推送。
原来的方式可能是使用long poll（即不中断连接一直等待数据），或者是ajax轮询的方式（每隔一段时间发送请求，建立连接，询问是否有新的数据）。这两种方式的缺点在于long poll的阻塞，以及ajax轮询的冗余连接。
WebSocket的设计思想有点类似于回调，在发送请求升级服务端的协议并收到确认信息后，服务端一有新的信息/数据就会主动推送给客户端，至于要一次HTTP握手便可以建立持久连接

79.网页布局大致分为三种

1.早期使用的table布局；2.使用div+css布局3.bootstrap提供扥栅格布局系统

80.vue组件封装过程？

1.使用vue.extend()创建组件2.使用vue.component()方法注册组件3.如果子组件需要使用数据，可以在props中接收定义4.子组件修改好数据后，想把数据传递给父组件，可以使用emit方法
Vue组件的功能：
能把页面抽离成多个 相对独立的模块
实现代码块的复用，提高开发效率和代码质量，使代码更易维护
Vue 的定义：
组件component是vue.js最强大的功能之一
组件可以扩展html元素，封装可复用的代码
在较高层面上，组件是自定义元素，vue。Js的编辑器为他添加了特殊功能
组件也可以用is特性进行扩展的原生的html元素
Vue组件也是vue实例，可以接收相同的选项对象，提供相同的生命周期钩子

异步组件实现的本质是2次渲染，先渲染成注释节点，当组件加载成功后，在通过forceRender重新渲染;
高级异步组件可以通过简单的配置实现loading resolve reject timeout 4种状态

81.jq迭代器

$.each（）典型的迭代，通过each我们可以额外传入function，然后来对所有的item进行迭代操作；迭代器的特点：封装实现，然后迭代器的聚合对象不用关心迭代的过程，从而符合SRP原则。
Jq的链式调用：jq的方法都是挂载在原型上的。如果我们每次在内部方法返回this，也就是返回实例对象，那么我们就可以继续调用原型上的方法了，节省代码量提高效率

82.阻止a标签跳转

# / ：javascript; / return false / preventdefault

83.对象的属性

①hasOwnProperty 查看某一属性是否为对象的私有属性
②isPrototypeOf 当前对象是否为该对象的原型
③propertyIsEnumerable 对象属性是否可枚举（遍历），如果是私有属性就可以，如果是继承属性就不可以
④toLocalString toString 将其类型转为字符串
⑤valueOf 获取对象的原始值
⑥proto 是一个非标准属性
⑦getPrototypeOf(对象) 标准 获取原型

84.数组降维

Apply/concat/双层for循环

85.Bom对象的方法？

Location History navigator screen document window

86.js延迟加载的方法？

async/defer
动态创建DOM方式
按需异步载入js
setTimeout

87.defer与async的区别？

标签中如果不加defer或async,就同步执行 ;
加async《script async src=‘aaa.js’/》外部js文件会和当前代码同时加载并执行;
上述代码中将async换为defer,外部js文件的加载就会和当前代码同时执行，但是等当前代码;执行完，才能执行外部js;

88.ajax有什么缺点

1.数据类型需要手动转换
2.操作繁复
3.对移动设备兼容性不好
4.原生js各大浏览器兼容性不好
5.无数据刷新重载页面

89.promise和async的区别

·async/await是写异步代码的新方式，以前的方法有回调函数Promise。
·async/await是基于Promise实现的，它不能用于普通的回调函数。
·async/await与Promise一样，是非阻塞的。
.async/await代码更简洁 代码没有回调

90.减少页面加载时间的方法？

减少http请求/减少本地图片/压缩代码/域名的发散/减少DOM操作/懒加载

91.jq的优化方法？

设置入口函数/尽量缩短链式编程的链/$(‘div.aa’)在class前面加标签名，查找块/限制对DOM的操作/总是用#id去寻找element/缓存jq对象

91.jq对象和dom对象的区别？

jq里面可以隐士迭代 链式调用 $(‘对象’)
Dom只能用操作js的方法

92.Vue的钩子函数 ？

beforeEach afterEach beforeRouterleave beforeRouterUpdata beforeRouterEnter beforeEnter

93.css3的函数有哪些？

Animation() rotate() skew() url() rgba()

94.js的内置对象、本地对象、宿主对象？

Js的内置对象：Math\global 不用new
Js的本地对象：需要new的 Object/Date/数组/字符串/函数/布尔 需要new实例
Js的宿主对象：window\bom对象\dom对象
Global整个js无主的值和属性，都是global对象的属性，
parseInt parseFloat isNan NaN undefined Object Number String
global对象只是一个概念，因此不可见

95.一个网页的渲染过程？

DNS解析（在网址上写入域名，传到DNS服务器，缓存中如果有的话通过迭代进行查询，咩有再向服务器请求，最后转为IP地址，）
发起tcp/ip 请求 执行三次握手过程
浏览器发送http请求
负载均衡 判断请求什么数据，从而使用对应的服务器来响应数据
服务器响应
四次挥手
渲染

96.es6新增的内容

箭头函数、Set let const、解构赋值、扩展运算符、promise、async/await、class类（继承）、reduce、Map、map、filter

97..vue自定义指令的方法、钩子函数以及参数？

自定义指定方法：directive\directives
1)全局指令
组件页面里面 <input v-focus=’’>
Main.js文件中写
Vue.directive(‘focus’，{
inserted:function(el){
el.focus()
}
})
2）局部指令
组件里面
export default{
directives：{
focus:{
inserted:function(el){
el.focus()
}
}
}
钩子函数：bind\inserted\update\componentUpdated\unbind

98.js-什么是立即执行函数？有什么作用？

1.创建一个匿名函数并执行
2.创建一个独立的作用域，避免全面局污染

99.纯函数

100.jquety动画xi

$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下0值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

101.自定义事件

1. Event() 构造函数, 创建一个新的事件对象 Event

2. CustomEvent() 创建一个自定义事件
　　3. document.createEvent() 创建一个新的事件（Event），随之必须调用自身的 init 方法进行初始化。
https://www.cnblogs.com/shapeY/p/7923353.html

102.单页面应用和多页面应用区别

103.ajax和flash区别

Ajax的优势
1.可搜索性 2.开放性 3.费用 4.易用性 5.易于开发 
可搜索性 
普通的文本网页会更有利于SEO。文本内容是搜索引擎容易检索的，而繁琐的swf字节码却是搜索引擎不愿触及的。虽然Google等一些大型的搜索引擎可以检索SWF内部的内容，但是仍然有很多麻烦存在。 
开放性 
Flash常年以来被Macromedia看的很死。包括Flex、FMS等辅佐技术一直都需要昂贵的安装、维护费用。而JS则没有这样的麻烦。没有人愿意承担法律和版权的风险。 
费用 
Flash开发是很昂贵的，因为FlashIDE等环境都是要收费的．而Ajax则不同．虽然有一些便宜的生成swf的工具，但是他们的工能实在无法满足复杂需求。 
易用性 
Ajax程序有更好的易用性。由于中间有一层Flashplayer代理层，因此许多辅助功能无法被Flash灵活利用。而且Flash在一些方面有着不好的口碑。比如弹出广告、比如恶意代码。 
（awflasher.com个人认为这八成是乱上xx网站造成的） 
易于开发 
人们开发复杂的Ajax和Flash应用程序时，都会借助一些高级的开发工具。普遍来说，Ajax的开发包比Flash简便、容易。

Ajax的劣势
（1）AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性. 
（2）AJAX只是局部刷新,所以页面的后退按钮是没有用的. 
（3）对流媒体还有移动设备的支持不是太好等

Flash的优势
1.多媒体处理 2.兼容性 3.矢量图形 4.客户端资源调度 
多媒体处理 
Flash在音频、视频等多媒体领域相比HTML有绝对的优势。现在几乎所有的网站都包含有Flash内容。 
兼容性 
兼容性好：由于通过了唯一的FlashPlayer“代理”。人们不必像调试JS那样，在不同的浏览器中调试程序。 
矢量图型 
这是Flash最大的优势，同样处在这一领域的SVG、Canvas element以及Direct完全不能与Flash相比。 
客户端资源调度 
Flash能够更容易的调用浏览器以外的外部资源。比如摄像头、麦克风等。然而这是普通的HTML无法完成的。但是这也许是一个缺点

Flash的优势
（1）二进制格式 
（2）有效性交互差 
（3）flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间 
（4）商用体验表现能力差 
（5）成本高 
（6）不适合企业网站 
（7）必须插件支持 
（8）更新维护复杂 
（9）可扩展性差 
（10）搜索引擎不友好

104.箭头函数与普通函数的区别

105.$冲突

106.浏览器样式兼容

CSS常见兼容性问题及解决方案：

  1. 上下margin重合问题：
    问题描述：相邻的margin-left和margin-right是不会重合的，但是相邻的块级元素margin-top 和margin-bottom会产生重合。

解决方案：统一设置margin-top或者 Marin-bottom，不要混合使用。

2.超链接访问后，hover样式不显示：

问题描述：同时设置a:visited和a:hover样式后，超链接访问后，hover的样式不显示，

问题原因：标签中的样式顺序出现了错误。

解决方案：将他们的样式排序为 a:link , a:visited , a:hover , a:active .

3.行内元素上下margin及padding不拉开元素间距的问题：

问题描述：行内元素的margin和padding属性很奇怪，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。

解决方案：将行内元素display设置为block即可解决

4.不同浏览器的标签默认的外间距和内间距不同

问题描述：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决方案：在CSS文件开头用通配符*来设置各个标签的内外边距是0。

{

margin: 0px;

padding:0px;

}

5.ul在浏览器中不同表现，具有默认边距在不同浏览器中显示的位置不同：

问题描述：在IE中，ul的默认边距是margin，在Firefox中，ul的默认边距是padding。

解决方案：设置其属性 padding：0px ; Margin : 0px;

6.按钮默认大小不一：

问题描述：不同浏览器的默认按钮大小可能不同。

解决方案：用a标签来模拟按钮，添加样式；如果按钮是一张背景图片，那么直接给按钮添加背景图；

7.图片间默认又间距问题：

问题描述：几个img标签（行内标签）放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

解决方案：使用float属性为img布局

8.双倍浮动问题：

问题描述：块状元素float后，有添加了横向的margin，在IE6下比设置的值要大。

解决方案：给float标签添加display：inline，将其转换为行内元素

9.设置较小高度的容器（小于10px），在IE6下不识别小于10px的高度

问题描述：IE8之前的浏览器都会给标签一个最小默认的行高的高度，一般会出现在设置小圆角背景标签里。

解决方案：给容器添加overflow：hidden；或者设置行高line-height 小于你设置的高度。

10.容器不扩展问题：

问题描述：div嵌套结构中，外层的高度并没有随着子容器的高度自动扩展，却是形成了一条线。

问题原因：因为当子容器成为浮动元素后，并脱离了文档流，父容器认为自己内容为空而导致的。

解决问题：在容器的末尾加入个清理浮动的div。 在网页中的任何地方，当遇到容器不扩展时，只需加入以下代码段，便能修复问题。

https://cloud.tencent.com/developer/news/323781

逻辑分析题

1.判断一个字符串中出现次数C最多的字符，统计这个次数

    var str = 'asdfssaaasasasasaa';
    var json = {};
    for (var i = 0; i < str.length; i++) {
        if(!json[str.charAt(i)]){
        json[str.charAt(i)] = 1;
        }else{
        json[str.charAt(i)]++;
        }
    };
    var iMax = 0;
    var iIndex = '';
    for(var i in json){
        if(json[i]>iMax){
            iMax = json[i];
            iIndex = i;
        }
    }        
    console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');

2.编写一个方法 去掉一个数组的重复元素

    方法一：

var arr = [0,2,3,4,4,0,2];
var obj = {};
var tmp = [];
for(var i = 0 ;i< arr.length;i++){
   if( !obj[arr[i]] ){
      obj[arr[i]] = 1;
      tmp.push(arr[i]);
   }
}
console.log(tmp);
结果如下： [0, 2, 3, 4]

 方法二：

var arr = [2,3,4,4,5,2,3,6],
   arr2 = [];
for(var i = 0;i< arr.length;i++){
    if(arr2.indexOf(arr[i]) < 0){
        arr2.push(arr[i]);
    }
}
console.log(arr2);
结果为：[2, 3, 4, 5, 6]

 方法三：

var arr = [2,3,4,4,5,2,3,6];
var arr2 = arr.filter(function(element,index,self){
return self.indexOf(element) === index;
});
console.log(arr2);

结果为：[2, 3, 4, 5, 6]
上一篇 下一篇

猜你喜欢

热点阅读