前端面试题汇总

1、从输入URL到页面加载发生了什么：

1. DNS解析：用户输入url地址，浏览器根据域名寻找IP地址
2. TCP连接
3. 发送HTTP请求：浏览器向服务器发送http请求，如果服务器段返回以301之类的重定向，浏览器根据相应头中的location再次发送请求
4. 服务器处理请求并返回HTTP报文:这时的html页面代码可能是经过压缩的
5. 浏览器接收服务器响应结果，如果有压缩则首先进行解压处理，紧接着就是页面解析渲染

： 解析渲染该过程主要分为以下步骤：a.解析HTML b. 构建DOM树 c.DOM树与CSS样式进行附着构造呈现树 d.布局 e.绘制

1. 连接结束

• 人类身份验证 - SegmentFault

2、js六大数据类型：string、number、boolean、null、undefined、object、symbol

3、请求方法：GET, POST, PUT, DELETE, OPTIONS, HEAD

4、

总结get和post区别---面试用 - o笨小孩o - 博客园

5、vue中keep-alive作用：keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

6、http状态码：

• 1xx：指示信息–表示请求已接收，继续处理。
• 2xx：成功–表示请求已被成功接收、理解、接受。
• 3xx：重定向–要完成请求必须进行更进一步的操作。301：永久重定向，302：暂时重定向
• 4xx：客户端错误–请求有语法错误或请求无法实现。401：无权限；403：资源找不到；404：网页找不到
• 5xx：服务器端错误–服务器未能实现合法的请求。503：服务器出错

7、web前端性能优化：

• 内容优化

(1)减少HTTP请求数:这条策略是最重要最有效的，因为一个完整的请求要经过DNS寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。常见方法：合并多个CSS文件和js文件，利用CSS Sprites整合图像，Inline Images(使用 data：URL scheme在实际的页面嵌入图像数据 )，合理设置HTTP缓存等。 (2)减少DNS查找 (3)避免重定向：

常见的状态码：

200：OK，表明请求成功完成，所有资源成功发送给客户端；

302：重定向，例如google在中国被黑掉之后，只能转战利用香港服务器去请求，我们输入http://www.google.com，

服务器就会返回302 Found，并且客户端接收到的response中location字段包含一个新的url地址，然后浏览器会根据这个地址重新发送一个新url的request；

304：使用的缓存文件：关于http缓存详解 - CSDN博客

400：客户端请求与语法错误，不能被服务器解读；

403：服务器拒绝服务；

404：请求资源不存在；

500 Internal Server Error 服务器发生了不可预期的错误503 Server Unavailable 服务器当前不能处理客户端的请求，一段时间后可能恢复正常 (4)使用Ajax缓存 (5)延迟加载组件,预加载组件 (6)减少DOM元素数量:页面中存在大量DOM元素,会导致javascript遍历DOM的效率变慢。 (7)最小化iframe的数量：iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。 (8)避免404：HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应（例如404没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。

• 服务器优化

(1)使用内容分发网络（CDN）：把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。 (2)GZIP压缩 (3)设置ETag：ETags（Entity tags，实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。 (4)提前刷新缓冲区 (5)对Ajax请求使用GET方法 (6)避免空的图像src

• Cookie优化

(1)减小Cookie大小 (2)针对Web组件使用域名无关的Cookie

• CSS优化

(1)将CSS代码放在HTML页面的顶部 (2)避免使用CSS表达式 (3)使用<link>来代替@import (4)避免使用Filters

• javascript优化

(1)将JavaScript脚本放在页面的底部。 (2)将JavaScript和CSS作为外部文件来引用：在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。 (3)缩小JavaScript和CSS (4)删除重复的脚本 (5)最小化DOM的访问：使用JavaScript访问DOM元素比较慢。 (6)开发智能的事件处理程序 (7)javascript代码注意：谨慎使用with,避免使用eval Function函数,减少作用域链查找。

• 图像优化

(1)优化图片大小 (2)通过CSS Sprites优化图片 (3)不要在HTML中使用缩放图片 (4)favicon.ico要小而且可缓存

8、前端跨域知识总结：

• 通过document.domain跨域
• 通过location.hash跨域
• 通过HTML5的postMessage方法跨域
• 通过jsonp跨域
• 通过CORS跨域
• 通过window.name跨域

9、小程序与H5的区别

运行环境的不同 开发成本的不同 获取系统级权限的不同 运行流畅度的不同

微信小程序和H5傻傻分不清，看完你就明白两者的区别了！

10、vue和其他框架区别

对比其他框架 — Vue.js

11、virtual dom的实现

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文

档当中当状态变更时，重新构造一棵新的对象树。然后用新的树和旧的树进行比较两个数的差异。

然后把差异更新到久的树上，整个视图就更新了。Virtual DOM 本质就是在 JS 和 DOM 之间做

了一个缓存。既然已经知道 DOM 慢，就在 JS 和 DOM 之间加个缓存。JS 先操作 Virtual DOM

对比排序/变更，最后再把整个变更写入真实 DOM。

12、预解析

JavaScript“预解析”简单原理 - CSDN博客、dns预解析

<meta http-equiv="x-dns-prefetch-control" content="on">

<link rel="dns-prefetch" href="//www.zhix.net">

13、首屏优化

关于首屏性能优化的总结【原创】 - 一半水一半冰 - 博客园

14、懒加载原理

懒加载和预加载

15、事件绑定方法

关于JavaScript中事件绑定的方法总结_javascript技巧_脚本之家

16、所谓的 Virtual DOM 算法。包括几个步骤：

1. 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
2. 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
3. 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。

17.、隐式转换

js中的隐式转换 - 陈水水 - 博客园

18、==，===，Object.is

简单的说，两等号判等会在比较时自动进行类型转换，而三等号不会，如果类型不同，会直接返回false，而Object.is()则是在三等号的基础上，又特别处理了NaN、-0、+0，保证了-0和+0不再相同，但是要注意的是Object.is(NaN, NaN)会返回true

19、let

1. let使用块级作用域
2. let不支持在同作用域中声明标识符相同的变量
3. let用TDZ禁止了声明前访问

20、移动端兼容问题

移动端经常出现的兼容问题整理 - 学习web前端 - CSDN博客

21、bootstrap面试题

Bootstrap面试题

22、vue面试题

Vue.js面试题整理

23、基础面试题汇总

【前端】前端面试题整理 - 杠子 - 博客园

24、判断是否是数组

1.array属于引用型数据，在传递过程中，仅仅是引用地址的传递。

2.每个页面的Array原生对象所引用的地址是不一样的，在子页面声明的array，所对应的构造函数，是子页面的Array对象；父页面来进行判断，使用的Array并不等于子页面的Array；切记，不然很难跟踪问题！

3.通用方法Object.prototype.toString.call(o)=='[object Array]'

25、数组累加

JS 数组求和的5种方法（解题报告）

26、Object.assign()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

27、原型链的顶端是Object.prototype

28、css、js、html加载顺序

html,css,js加载顺序 - NewLife365 - 博客园

29、谈谈document.ready和window.onload的区别

在Jquery里面，我们可以看到两种写法:(function(){}) 和(document).ready(function(){})

这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。

而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。

30、数组去重

JS实现数组去重方法总结(六种方法)_javascript技巧_脚本之家

31、vue的生命周期

<script>
    //生命周期：初始化阶段 运行中阶段 销毁阶段
    Vue.component("aaa",{
        template:"#aaa",
        data:function(){
            return {msg:'hello'}
        },
        timer:null,
        methods:{
            destroy:function(){
                this.$destroy()//
            }
        },
        beforeCreate:function(){
            console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')           
            console.log(this.msg)//undefined
            console.log(document.getElementsByClassName("myp")[0])//undefined
        },
        created:function(){
            console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
            this.msg+='!!!'
            console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
            console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
        },
        beforeMount:function(){
            console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
            this.msg+='@@@@'
            console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
            console.log(document.getElementsByClassName("myp")[0])//undefined
            console.log('接下来开始render，渲染出真实dom')
        },
        // render:function(createElement){
        //     console.log('render')
        //     return createElement('div','hahaha')
        // },
        mounted:function(){ 
            console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
            console.log(document.getElementsByClassName("myp")[0])
            console.log('可以在这里操作真实dom等事情...')

        //    this.$options.timer = setInterval(function () {
        //        console.log('setInterval')
        //         this.msg+='!'  
        //    }.bind(this),500)
        },
        beforeUpdate:function(){
            //这里不能更改数据，否则会陷入死循环
            console.log('beforeUpdate:重新渲染之前触发')
            console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')         
        },
        updated:function(){
            //这里不能更改数据，否则会陷入死循环
            console.log('updated:数据已经更改完成，dom也重新render完成')
        },
        beforeDestroy:function(){
            console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
            // clearInterval(this.$options.timer)
        },
        destroyed:function(){
            console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
        }
    })


    
    new Vue({
    }).$mount('#app')


</script>

32、vuex概念、作用、设计模式

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

#什么是“状态管理模式”？

让我们从一个简单的 Vue 计数应用开始：

new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions methods: { increment () { this.count++ } } })

这个状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的极简示意：

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择

33、setTimeout

setTimeout()只有在效果产生以后，才会生成唯一的timeoutId。然后，你才能通过clearTimeout(timeoutId); 使setTimeout() 失效。 如果你这样操作： m1 =setTimeout('tick()',1000); m2 = setTimeout('tick2()',5000); clearTimeout(m1);这样，5秒以后，就不会再执行tick();