撩课-Web大前端每天5道面试题-Day9】的更多相关文章

1. 请用至少3中方式实现数组去重? 方法一: indexOf ,,,,,,,,]; function repeat1(arr){ ,arr2=[];i<arr.length;i++){ ){ arr2.push(arr[i]); } } return arr2; } 方法二: hash function repeat2(arr){ // 1. 遍历arr中每个元素,同时声明hash ,hash={};i<arr.length;i++){ // hash中是否包含当前元素值的建 // 如果不包…
1. px和em的区别? px和em都是长度单位; 区别是: px的值是固定的,指定是多少就是多少, 计算比较容易. em得值不是固定的,并且em会继承父级元素的字体大小. 浏览器的默认字体高都是16px; 所以未经调整的浏览器都符合: 1em=16px; 那么12px=.75em, 10px=.625em 2. CSS 去掉inline-block元素间隙的几种方法? 间隙是怎么来的: 间隙是由换行或者回车导致的; 只要把标签写成一行或者 标签直接没有空格,就不会出现间隙; 怎么去除? 方法1…
1. 如何实现瀑布流? 瀑布流布局的原理: ) 瀑布流布局要求要进行布置的元素等宽, 然后计算元素的宽度, 与浏览器宽度之比,得到需要布置的列数; ) 创建一个数组,长度为列数, 里面的值为已布置元素的总高度(最开始为0); ) 然后将未布置的元素依次布置到高度最小的那一列, 就得到了瀑布流布局; ) 滚动加载, scroll事件得到scrollTop, 与最后盒子的offsetTop对比, 符合条件就不断滚动加载. 瀑布流布局核心代码: /** * 实现瀑布流的布局 * @param {str…
1. var的变量提升的底层原理是什么? JS引擎的工作方式是: 1) 先解析代码,获取所有被声明的变量: 2)然后在运行.也就是说分为预处理和执行两个阶段. 变量提升:所有变量的声明语句都会被提升到代码头部. 但是变量提升只对var命令声明的变量有效,如果一个变量不是用var命令声明的,就不会发生变量提升. 2. JS如何计算浏览器的渲染时间? 撩课小编: 浏览器的渲染过程主要包括以下几步: 1) 解析HTML生成DOM树. 2) 解析CSS生成CSSOM规则树. 3) 将DOM树与CSSOM…
1. 如何手写一个JQ插件? 方式一: $.extend(src) 该方法就是将src合并到JQ的全局对象中去: $.extend({ log: ()=>{alert('撩课itLike');} }); 方式二: $.fn.extend(src) 该方法将src合并到jquery的实例对象中去: $.fn.extend({ log: ()=>{alert('撩课itLike');} }); 说说平衡二叉树? 平衡二叉搜索树(Self-balancing binary search tree)…
1.web storage和cookie的区别? Web Storage的概念和cookie相似, 区别是它是为了更大容量存储设计的. Cookie的大小是受限的, 并且每次你请求一个新的页面的时候Cookie都会被发送过去, 这样无形中浪费了带宽, 另外cookie还需要指定作用域, 不可以跨域调用 除此之外, WebStorage拥有setItem,getItem,removeItem,clear等方法, 不像cookie需要前端开发者自己封装setCookie,getCookie 但是co…
1.web前端开发,如何提高页面性能优化? 内容方面: .减少 HTTP 请求 (Make Fewer HTTP Requests) .减少 DOM 元素数量 (Reduce the Number of DOM Elements) .使得 Ajax 可缓存 (Make Ajax Cacheable) 针对CSS: .把 CSS 放到代码页上端 (Put Stylesheets at the Top) .从页面中剥离 JavaScript 与 CSS (Make JavaScript and CS…
1. 你能描述一下渐进增强和优雅降级之间的不同吗? 定义: 优雅降级(graceful degradation): 一开始就构建站点的完整功能, 然后针对浏览器测试和修复 渐进增强(progressive enhancement): 一开始只构建站点的最少特性, 然后不断针对各浏览器追加功能. 优雅降级和渐进增强都关注于同一网站 在不同设备里不同浏览器下的表现程度. 区别: “优雅降级”观点认为应该针对那些最高级. 最完善的浏览器来设计网站. 而将那些被认为“过时”或有功能缺失的浏览器下 的测试…
1.什么叫优雅降级和渐进增强? 优雅降级: Web站点在所有新式浏览器中都能正常工作, 如果用户使用的是老式浏览器, 则代码会针对旧版本的IE进行降级处理了, 使之在旧式浏览器上以某种形式降级体验却不至于完全不能用. 如:border-shadow 渐进增强: 从被所有浏览器支持的基本功能开始, 逐步地添加那些只有新版本浏览器才支持的功能, 向页面增加不影响基础浏览器的额外样式和功能的. 当浏览器支持时,它们会自动地呈现出来并发挥作用. 如:默认使用flash上传, 但如果浏览器支持 HTML5…
1.为什么用Nodejs,它有哪些优缺点? 优点: 事件驱动,通过闭包很容易实现客户端的生命活期. 不用担心多线程,锁,并行计算的问题 V8引擎速度非常快 对于游戏来说,写一遍游戏逻辑代码,前端后端通用 缺点: nodejs更新很快,可能会出现版本兼容 nodejs还不算成熟,还没有大制作 nodejs不像其他的服务器,对于不同的链接,不支持进程和线程操作 2.什么是错误优先的回调函数? 错误优先(Error-first)的回调函数(Error-First Callback)用于同时返回错误和数…
1.for循环中的作用域问题? 写出以下代码输出值,尝试用es5和es6的方式进行改进输出循环中的i值. ; i<=; i++) { setTimeout(function timer() { console.log(i); }, i*); } 输出5个6,因为回调函数在for循环之后执行,所有函数共享一个i的引用. es5: ; i<=; i++) { (function(j) { setTimeout(function timer() { console.log(j); }, j*); }…
1.前端需要注意哪些SEO? 合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同:description把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description有所不同:keywords列举出重要关键词即可语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页重要内容HTML代码放在最前:搜索引擎抓取HTML顺序是从上到下,有…
1.介绍一下你对浏览器内核的理解? 主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎. 渲染引擎:负责取得网页的内容(HTML.XML.图像等等). 整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机. 浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同. 所有网页浏览器.电子邮件客户端以及其它需要编辑.显示网络内容的应用程序都需要内核. JS引擎则:解析和执行javascript来实现网页的动…
1.module.export.import是什么,有什么作用? module.export.import是ES6用来统一前端模块化方案的设计思路和实现方案. export.import的出现统一了前端模块化的实现方案, 整合规范了浏览器/服务端的模块化方法, 用来取代传统的AMD/CMD.requireJS.seaJS.commondJS 等等一系列前端模块不同的实现方案,使前端模块化更加统一规范, JS也能更加能实现大型的应用程序开发. import引入的模块是静态加载(编译阶段加载)而不是…
1.https协议的优点? 使用HTTPS协议可认证用户和服务器, 确保数据发送到正确的客户机和服务器: HTTPS协议是由SSL+HTTP协议构建的可进行加密传输. 身份认证的网络协议,要比http协议安全, 可防止数据在传输过程中不被窃取.改变,确保数据的完整性. HTTPS是现行架构下最安全的解决方案, 虽然不是绝对安全,但它大幅增加了中间人攻击的成本. 谷歌曾在2014年8月份调整搜索引擎算法, 并称“比起同等HTTP网站,采用HTTPS加密的网站在搜索结果中的排名将会更高”. 2.ht…
1.用setTimeout()方法来模拟setInterval()与setInterval()之间的什么区别? 首先来看setInterval的缺陷,使用setInterval()创建的定时器确保了定时器代码规则地插入队列中. 这个问题在于: 如果定时器代码在代码再次添加到队列之前还没完成执行, 结果就会导致定时器代码连续运行好几次. 而之间没有间隔. 不过幸运的是: javascript引擎足够聪明,能够避免这个问题. 当且仅当没有该定时器的如何代码实例时, 才会将定时器代码添加到队列中. 这…
1.浏览器缓存? 浏览器缓存分为强缓存和协商缓存.当客户端请求某个资源时,获取缓存的流程如下: 先根据这个资源的一些 http header 判断它是否命中强缓存, 如果命中,则直接从本地获取缓存资源,不会发请求到服务器: 当强缓存没有命中时,客户端会发送请求到服务器, 服务器通过另一些request header验证这个资源是否命中协商缓存,称为http再验证, 如果命中,服务器将请求返回,但不返回资源, 而是告诉客户端直接从缓存中获取,客户端收到返回后就会从缓存中获取资源: 强缓存和协商缓存…
1.下面的代码将输出什么? ; i < ; i++) { setTimeout(function() { console.log(i); }, i * ); } 闭包在这里能起什么作用? 上面的代码不会按预期显示值0,,,,和4, 而是会显示5,,,,和5. 原因是,在循环中执行的每个函数将整个循环完成之后被执行, 因此,将会引用存储在 i中的最后一个值,那就是5. 闭包可以通过为每次迭代创建一个唯一的范围, 存储范围内变量的每个唯一的值, 来防止这个问题, 如下: ; i < ; i++)…
1.对async.await的理解,内部原理? ①async---声明一个异步函数: 自动将常规函数转换成promise,返回值也是一个promise对象, 只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数,内部可以使用await: ②await--暂停异步的功能执行: 放在promise调用之前,await强制其他代码等待,直到promise完成并返回结果, 只能与promise一起使用,不适用于回调,只能在async函数内部使用. 下面介绍下使用场景: a.同时发出…
1.如何判断一个变量是对象还是数组? 判断数组和对象分别都有好几种方法,其中用prototype.toString.call()兼容性最好. function isObjArr(variable){ if (Object.prototype.toString.call(value) === "[object Array]") { console.log('value是数组'); }else if(Object.prototype.toString.call(value)==='[obj…
1.请说明ECMAScript, JavaScript, Jscript之间的关系? ECMAScript提供脚本语言必须遵守的规则. 细节和准则,是脚本语言的规范. 比如:ES5,ES6就是具体的一js版本. JavaScript是ECMAScript的一个分支版本, JavaScript 实现了多数 ECMA- 中 描述的 ECMAScript 规范,但存在少数差异. JScript是微软公司对ECMA-262语言规范的 一种实现,除了少数例外(这是为了保持向后兼容 ), 微软公司宣称JSc…
1.请描述一下 cookies,sessionStorage 和 localStorage 的区别? cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密). cookie数据始终在同源的http请求中携带(即使不需要), 记会在浏览器和服务器间来回传递. sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存. 存储大小: cookie数据大小不能超过4k. sessionStorage和localStor…
1. 请写出至少5个html5新增的标签,并说明其语义和应用场景? section:定义文档中的一个章节; nav:定义只包含导航链接的章节; header:定义页面或章节的头部; 它经常包含 logo.页面标题和导航性的目录. footer:定义页面或章节的尾部; 它经常包含版权信息.法律信息链接和反馈建议用的地址. aside:定义和页面内容关联度较低的内容, 如果被删除,剩下的内容仍然很合理. 2. get和post请求在缓存方面的区别? get请求类似于查找的过程,用户获取数据, 可以不…
1. 说说你对作用域链的理解? 作用域链的作用是保证执行环境里 有权访问的变量和函数是有序的, 作用域链的变量只能向上访问, 变量访问到window对象即被终止, 作用域链向下访问变量是不被允许的; 作用域就是变量与函数的可访问范围, 即作用域控制着变量与函数的可见性 和生命周期. 2. 请说说JavaScript原型,原型链 ? 原型: 当我们访问一个对象的属性时, 每个对象都会在其内部初始化一个属性, 就是prototype(原型); 原型链: 如果这个对象内部不存在这个属性, 那么他就会去…
1.React 中 refs 的作用是什么? Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄. 我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄, 该值会作为回调函数的第一个参数返回: class CustomForm extends Component { handleSubmit = () => { console.log("Input Value: ", this.input.value) } render…
1.React 中 keys 的作用是什么? Keys 是 React 用于追踪哪些列表中元素被修改.被添加或者被移除的辅助标识. render () { return ( <ul> {this.state.todoItems.map(({item, key}) => { return <li key={key}>{item}</li> })} </ul> ) } 在开发过程中,我们需要保证某个元素的 key 在其同级元素中具有唯一性. 在 React…
1.CommonJS 中的 require/exports 和 ES6 中的 import/export 区别? CommonJS 模块的重要特性是加载时执行, 即脚本代码在 require 的时候,就会全部执行. 一旦出现某个模块被”循环加载”, 就只输出已经执行的部分, 还未执行的部分不会输出. ES6 模块是动态引用, 如果使用 import 从一个模块加载变量, 那些变量不会被缓存, 而是成为一个指向被加载模块的引用, 需要开发者自己保证, 真正取值的时候能够取到值. import/ex…
1.vuejs与angularjs以及react的区别? .与AngularJS的区别 相同点: 都支持指令:内置指令和自定义指令. 都支持过滤器:内置过滤器和自定义过滤器. 都支持双向数据绑定. 都不支持低端浏览器. 不同点: .AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单.直观. .在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢. Vue.js使用基于依赖追踪的观察并且使用异步队列…
1.mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合? mvc和mvvm其实区别并不大. 都是一种设计思想. 主要就是mvc中Controller演变成mvvm中的viewModel. mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低, 加载速度变慢,影响用户体验. 区别: vue数据驱动, 通过数据来显示视图层而不是节点操作. 场景: 数据操作比较多的场景,更加便捷 2.vue的优点是什么? 低耦合. 视图(View)可以独立于Model变化和修改,…
1.vue生命周期的作用是什么? 它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑. 2. Vue实现数据双向绑定的原理:Object.defineProperty()? vue实现数据双向绑定主要是: 采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty() 来劫持各个属性的setter,getter, 在数据变动时发布消息给订阅者,触发相应监听回调. 当把一个普通 Javascript 对象传给 Vue 实例来作为它的 d…