前端面试题分享(1)

113 阅读10分钟

1.对seo搜索优化的 了解?

SEO(Search Engine Optimization)全称是搜索引擎优化,其目的是为了使网站能够更好的被搜索引擎抓取,提高在搜索引擎内的自然排名,从而带来更多的免费流量,获取收益.

SEO主要有两种方法,站内优化站外优化,其中技术上以站内优化为主

一、站内优化

(1)META标签优化:例如:TITLE,KEYWORDS,DESCRIPTION等的优化;

(2)内部链接的优化,包括相关性链接(Tag标签),锚文本链接,各导航链接,及图片链接;

(3)网站内容更新:每天保持站内的更新(主要是文章的更新等)。



二、站外优化

(1)外部链接类别:友情链接、博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、站群、相关信息网等尽量保持链接的多样性;

  (2)外链运营:每天添加一定数量的外部链接,使关键词排名稳定提升;

  (3)外链选择:与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名。
  

2.img的title和alt的区 别?

相同点:

他们都会飘出一个小浮层,显示文本内容。

区别:

alt 是图片加载失败时,显示在网页上的替代文字;

title是鼠标放在上面时现实的文字,title是对图片的描述与进一步说明;

alt 是 img 必要的属性,而title不是。

Alt(alt text):为不能显示图像、窗体或 applets 的用户代理(UA),alt 属性用来指定替换文字。替换文字的语言由 lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt当成 tool tip 显示)。

Title(tool tip):该属性为设置该属性的元素提供建议性信息

3.行内元素和块级元素?

常见的块级元素: h1~h6 、p、 div、 ul、 ol、 li

块级元素特点:

1) 块级元素会独占一行

2) 高度、行高,外边距和内边距都可以单独设置

3) 宽度默认是容器的100%

4) 可以容纳内联元素和其他块级元素

常见的行内元素:a 、strong 、i、 b 、em 、span 、br 、input

行内元素特点:

1) 和相邻的行内元素在一行上

2) 高度和宽度无效,但是水平方向上的paddingmargin可以设置,垂直方向上的无效

3) 默认的宽度就是它本身的宽度

4) 行内元素只能容纳纯文本或者是其他的行内元素(a标签除外)

  
  

4. 媒体查询的使用方式?

媒体是值得是各种设备(移动设备、pc设备、平板)  css3的新语法

查询是要检测属于那种设备

媒体查询是通过查询当前属于那种设备,让网页能够在不同的设备下正常的预览

使用:

1.  **<style>** 或者 **<link>** 标签上(这种主要针对媒体类型作区分)

image.png

注:通过media属性规定媒体查询的具体内容,对于标签也是同样的道理。
上述代码规定必须是显示器屏幕且视口尺寸小于等于1000px时候,能够将div字体颜色设置为红色。

2. 通过**@media**来使用

image.png

5. src和href之间的区别?

Href 用于建立当前页面与引用资源之间的关系(链接);而src则会替换当前的标签。

遇到href,页面会并行加载后续内容;而src则不同,浏览器需要加载完毕src的内容才会继续往下执行。

6.css让元素看不到的方法?

支持:

- displaynone;    不占空间
- Visibility:hidden;占据空间
- Opacity0 ;    占据空间

其他一些不建议的方法 :

1)设置text-indent、位置等让元素超出用户屏幕可见区域)   

(2font-size: 0;, height: 0; overflow: hidden; 改变元素大小、空间

7.重绘和回流?

重绘是指当一个元素自身的宽高,布局,以及显示或隐藏没有改变而只是改变了元素的外观风格的时候,就产生了重绘。

回流是指当一个元素自身的宽高,布局,显示或隐藏,或元素内部的文字结构发生变化,导致需要重新构建页面的时候,就产生了回流

 

重绘:Dom树没有元素增加或删除,只是样式改变,针对浏览器对某一元素进行单独的渲染,这个过程就叫重绘。

回流:DOM树中的元素被增加或者删除,导致浏览器需要重新的去渲染整个DOM树,回流比重绘更消耗性能,发生回流必定重绘,重回不一定导致回流

  因为重绘和回流的存在导致真实的DOM性能不佳,所以VUE和React还有angular等框架增加了虚拟DOM技术,就是为了减少DOM的重绘和回流从而减少对浏览器性能消耗,这就是虚拟DOM的好处。

8.new操作符具体干了什么?

new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一。

再创建一个新的实例的时候,必须使用new操作符。而使用new操作符会经历以下步骤:

1.创建一个新的空对象,并且this变量引用该对象,同时还继承了该函数的原型。

2.属性和方法被加入到this引用的对象中

3.新创建的对象由this所引用,并且最后隐式的返回this

9. ajax的原理?

Ajax的原理简单来说就是通过 XMLHttpRequest 对象来向服务器发送异步请求,从服务器获取数据,然后用JavaScript来操作DOM从而更新页面。
这其中最关键的一步就是从服务器获得请求数据

10. 常见的设计模式有哪些?

js设计模式有很多,但是我常量有 单例模式 和 观察者模式

  单例模式就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间提供一个唯一的访问点来访问该对象。

观察者模式观察者的适用场合就是:当一个对象的改变需要同时改变其他对象,并且他不知道具体有多少对象需要改变的时候,就应该考虑使用观察者模式。 总的来说,观察者模式所做的工作就是在解耦,让耦合的双发都依赖与抽象,而不是依赖于具体。从而使得各自的变化都不会影响到另一变得变化。

11.对promise的了解?

从语法上面来说,Promise是一个对象,从他可以获取异步操作的消息。

promise为了解决多层的函数,方法的嵌套调用的方法而存在的。简单来说:就是将一层一层的嵌套铺成一串连续调用的方法。

回调地狱,函数作为参数层层嵌套,层级很深,使得代码看起来很混乱。

状态

Penging :初始状态,既不是成功也不是失败状态

Resolve:操作成功

Rejected:操作失败

特点:

Promise的状态一旦发生改变便无法更改

Promise的回调是同步,但是then的回调是异步的

链式调用then,上一个then的返回值,是下一个then接受的参数,如果返回错误,返回一个状态为reject的promise

方法:

then()方法---成功

catch()方法---失败

12.js的数据类型有哪些?

基本数据类型:number、string、boolean、undefined、null、symbol(ES6新增)

复合类型(引用数据类型):Object 、function

13.js的内存存储方式?

在js执行过程中,主要有三种内存空间:代码空间、栈、堆

栈:

存储引用类型:**ObjectFunction/Array/Date/RegExp)**

基本数据类型放在栈内存中。

堆:

存储引用类型:**ObjectFunction/Array/Date/RegExp)**

引用数据类型有一个站位牌在栈内存。真实的数据在堆内存,并且占位牌有一个指针指向对应的内存空间。  

14. js里如何判断是不是一个数组?

1isArray() 数组自带的判断方法1. (es5新增)

image.png

2. instanceof  操作符

image.png

3. Constructor.toString() 方法

image.png

4. Object.prototype.toString.call(a).indexOf(‘Array’)

image.png

15. map 和 forEach 的区别?

forEach方法,是最基本的方法,就是遍历与循环,默认有3个参数:分别是遍历数组内容的item、数组索引的index、和当前遍历数组的Array

Map方法,基本用法与forEach一致,但是不同的是,它会返回一个新的数组,所以callback需要有return值,如果没有,会返回undefined

16.vue2的双向数据绑定原理?

Vue.js是采用数据劫持结合发布者-订阅者模式的方式通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调

17. 数组去重的方法?

1) for循环嵌套,利用splice去重(es5常用)

image.png

2) 新建数组,利用indexof去重

image.png

3) ES6中利用Set去重

image.png

18.节流和防抖

防抖(Debounce)和节流(Throttle)都是用来控制某个函数在一定时间内触发的次数,两者都是为了减少触发频率,以便提高性能或者说避免资源浪费。
应用场景:处理一些频繁触发的事件,例如mousedown、mousemove、keyup、keydown等。

防抖:就是指触发事件后在n秒内函数只能执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间。

节流:就是指连续触发事件但是在n秒中只执行一次函数。节流会稀释函数的执行频率。

19. apply. call. bind的区别?

Apply、call、bind主要作用都是改变this指向的,但是使用策略有区别。

1)call、apply主要是传递参数的不同;
2)call后面传递的参数是以逗号形式分开的;
3)apply传递的参数是数组形式;
4)bind返回的是函数形式,如果要执行,后面要加一个小括号,bind只能以逗号形式分隔,不能是数组形式。

20.this的指向?

(1) 普通函数this指向:

函数的this指向遵循一个基本原则:谁调用的函数,函数的this就指向谁,否则就指向全局。

(2) 箭头函数this指向:

  箭头函数本身是没有this的,箭头函数的this是定义箭头函数时父级作用域的this,也就是说使用箭头函数时,  
箭头函数内部的this,我们只需要看定义该箭头函数时,该箭头函数父级的this即可。

21. 判断js的数据类型?

(一)typeof

typeof可以判断基本的数据类型,但是要注意

1.在用typeof判断null的数据类型的时候,返回的是Object

2.在判断object类型的时候,只能告诉我们这个数据是Object,而不能细致的具体到是哪一种object

(二)instanceof

instanceof只能判断复杂数据类型,对于基本的数据类型判断不出来。

instanceof可以用来判断null的类型不是object,但是instanceof也可能判断不准确,比如一个数组,它可以被instanceof判断为object。

(三)toString.call

是一种最为准确的判断方式,可以准确地判断对象实例的类型。

22.eventloop的理解?

eventloop是指事件循环,是指浏览器或node的一种解决JavaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用的异步的原理

23. 常见的跨域方式?

1. Jsonp原理

2. 通过代理的方式(前端代理和后端代理)

3. CORS(跨域资源共享)

24. 存储方式浏览器?

常见的浏览器储存:

1. 属于文档对象模型:documentcookie(cookie)

2. 属于浏览器对象模型:localstorage、sessionstorage、indexDB