前端一些面试题

作者: 陆阿狸 | 来源:发表于2019-06-12 13:17 被阅读56次

HTML 和 CSS 面试题

盒子模型

CSS 中盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。
W3C 盒子模型： width = content （box-sizing: content-box）
IE 盒子模型中： width = content + padding + border （box-sizing: border-box）

块元素和行内元素

块元素	行内元素
块元素会独占一行，默认情况下，其宽度会自动填满父元素宽度，即使设置了宽度也会独占一行	行内元素不会独占一行，没有宽度和和高度属性。
块级元素：div p form ul li h1-h6	行内元素：span img input a i

前端需要注意哪些SEO

合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
重要内容不要用js输出：爬虫不会执行js获取内容
少用iframe：搜索引擎不会抓取iframe中的内容
非装饰性图片必须加alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标

从浏览器地址栏输入url到显示页面的步骤

浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。

HTTP状态码及其含义

1XX：信息状态码
- 100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
2XX：成功状态码
- 200 OK 正常返回信息
- 201 Created 请求成功并且服务器创建了新的资源
- 202 Accepted 服务器已接受请求，但尚未处理
3XX：重定向
- 301 Moved Permanently 请求的网页已永久移动到新位置。
- 302 Found 临时性重定向。
- 303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
- 304 Not Modified 自从上次请求后，请求的网页未修改过。
4XX：客户端错误
- 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
- 401 Unauthorized 请求未授权。
- 403 Forbidden 禁止访问。
- 404 Not Found 找不到如何与 URI 相匹配的资源。
5XX: 服务器错误
- 500 Internal Server Error 最常见的服务器端错误。
- 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

Canvas和SVG有什么区别？

svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布
svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是失真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿

CSS 选择器分类

基本选择器：

id选择器：id = name
类选择器：class = "name"
标签选择器：body, div, ul
全局选择器：*

复杂选择器：

组合选择器：.head .head_logo
后代选择器：ul li 从父集到子集
群组选择器：div span {color: red} 具有相同样式的标签分组显示
继承选择器：
为类选择器：链接样式 a:hover
子选择器：div > p
css 相邻兄弟选择器： h1 + p

优先级：

属性后面加 !import 会覆盖页面内任何位置定义的元素样式
作为 style 属性写在元素内的样式
id 选择器
类选择器
标签选择器
通配符选择器（*）
浏览器自定义或继承

为什么 CSS 放在顶部而 JS 写在后面

浏览器预先加载 CSS 后，可以不必等待 HTML 加载完毕就可以渲染页面了。
HTML 渲染并不会等到完全加载完在渲染页面，而是一边解析 DOM 一边渲染。
JS 写在尾部，主要是因为 JS主要扮演事件处理的功能，一方面很多操作是在页面渲染后才执行的。另一方面，可以节省加载时间，是页面能够更好的加载，提高用户的良好体验。

position 的值有哪些， relative 和 absolute 分别是相对于谁进行定位的？

relative：相对定位，相对于自己本身在正常文档流中的位置进行定位。
absolute：生成绝对定位，相对于最近一级定位不为 static 的父元素进行定位。
fixed：生成绝对定位，相对于浏览器窗口或者 iframe 进行定位。
static：默认值，没有定位，元素出现在正常文档流中。
stricky：生成粘性定位元素，容器的位置根据正常文档流计算得出。

css sprite是什么,有什么优缺点

概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
优点：
- 减少HTTP请求数，极大地提高页面加载速度
- 增加图片信息重复度，提高压缩比，减少图片大小
- 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
缺点：
- 图片合并麻烦
- 维护麻烦，修改一个图片可能需要从新布局整个图片，样式

display:inline-block 什么时候不会显示间隙？

移除空格
使用margin负值
使用font-size:0
letter-spacing
word-spacing

PNG,GIF,JPG的区别及如何选

GIF
- 8位像素，256色
- 无损压缩
- 支持简单动画
- 支持boolean透明
- 适合简单动画
JPEG
- 颜色限于256
- 有损压缩
- 可控制压缩质量
- 不支持透明
- 适合照片
PNG
- 有PNG8和truecolor PNG
- PNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画
- 适合图标、背景、按钮

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

CSS不同选择器的权重

!important规则最重要，大于其它规则
行内样式规则，加1000
对于选择器中给定的各个ID属性值，加100
对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加10
对于选择其中给定的各个元素标签选择器，加1
如果权值一样，则按照样式规则的先后顺序来应用，顺序靠后的覆盖靠前的规则

JS 面试题

setTimeout和setInterval的机制

因为js是单线程的。浏览器遇到etTimeout和setInterval会先执行完当前的代码块，在此之前会把定时器推入浏览器的待执行时间队列里面，等到浏览器执行完当前代码之后会看下事件队列里有没有任务，有的话才执行定时器里的代码。

一些检验数据类型的方法

千万不要使用typeof来判断对象和数组，因为这种类型都会返回object。

typeOf()是判断基本类型的Boolean,Number，symbol, undefined, String。对于引用类型：除function，都返回object null返回object。
installOf() 用来判断A是否是B的实例，installof检查的是原型。
toString() 是Object的原型方法，对于 Object 对象，直接调用 toString() 就能返回 [Object Object] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息。
hasOwnProperty()方法返回一个布尔值，指示对象自身属性中是否具有指定的属性，该方法会忽略掉那些从原型链上继承到的属性。
isProperty()方法测试一个对象是否存在另一个对象的原型链上。
valueof：所有对象都有valueof，如果存在任意原始值，他就默认将对象转化为表示它的原始值。如果对象是复合值，而却大部分对象无法真正表示一个原始值，因此默认的valueof()方法简单的返回对象本身，而不是返回原始值。

GET 和 POST 的区别，什么时候使用 POST ？

GET 和 POST 的区别如下：

GET：一般用于查询数据，使用 URL 传递参数，由于浏览器对地址栏长度有限制，所以使用 GET 方式所发送信息的数量有限制，同时浏览器记录（历史记录，缓存）会保留请求地址的信息，包括地址后面的数据。GET 只能发送普通格式（URL 编码格式）的数据。
POST：一般用于向服务器发送数据，对所发送的数据的大小理论上是没有限制，浏览器会缓存记录地址，但不会记录 POST 提交的数据。POST 可以发送纯文本、URL 编码格式、二进制格式的字符串，形式多样。

以下情况中，请使用 POST：

以提交为目的的请求（类似语义化，get 表示请求，post 表示提交）；
发送私密类数据（用户名、密码）（因为浏览器缓存记录特性）；
向服务器发送大量数据（数据大小限制区别）；
上传文件图片时（数据类型区别）

AJAX 的局限性

AJAX 不支持浏览器 back 按钮。
安全问题 AJAX 暴露了与服务器交互的细节。
对搜索引擎的支持比较弱。不会执行你的 JS 脚本，只会操作你的网页源代码；
跨域请求有一定限制。解决方式：jsonp；

cookie 和 session 有什么区别和联系

cookie 数据存放在客户的浏览器上， session 数据存放在服务器上
session 比 cookie 更安全
单个 cookie 保存的数据不能超多 4k ，很多浏览器限制一个站点最多保存20个 cookie
一般用 cookie 来存放 sessionId

那些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

说几条写JavaScript的基本规范？

不要在同一行声明多个变量
请使用===/!==来比较true/false或者数值
使用对象字面量替代new Array这种形式
不要使用全局函数
Switch语句必须带有default分支
If语句必须使用大括号
for-in循环中的变量应该使用var关键字明确限定作用域，从而避免作用域污

null，undefined 的区别？

undefined 表示不存在这个值。
undefined :是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回 undefined
例如变量被声明了，但没有赋值时，就等于undefined
null 表示一个对象被定义了，值为“空值”
null : 是一个对象(空对象, 没有任何属性和方法)
例如作为函数的参数，表示该函数的参数不是对象；
在验证null时，一定要使用　=== ，因为 ==无法分别null 和　undefined

框架（vue/react）

MVVM （Model-View-ViewModel）优点：

低耦合：视图(View)可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性：你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

MVC 与 MVVM 的区别

MVC 是指 Model View Controller（模型-视图-控制器），是一种 Web 架构的模式。
MVVM 是指 Model-View-ViewModel，是一种基于前端开发的架构模式。
在MVC里，View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变，所以，在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的。
MVVM在概念上是真正将页面与数据逻辑分离的模式，它把数据绑定工作放到一个JS里去实现，而这个JS文件的主要功能是完成数据的绑定，即把model绑定到UI的元素上。

react 和 vue 有哪些不同？谈谈你的看法

两者都采用了 virtual dom 的方式，性能都很好
ui 上都采用组件化的写法，开发效率很高。
vue 采用双向数据绑定， react 是单项数据绑定。当工程规模比较大时，双向数据绑定会很难维护
vue 适合不会持续的，小型的 web 应用，使用 vue.js 能带来短期内较高的开发效率，否则采用 react。

Vue 指令

Vue 指令一般是带有 v- 前缀的特殊属性，当表达式的值改变是，将其产生的连带影响，响应式地作用于 DOM

v-text: 更新 DOM 对象的 textContent
v-html: 更新 DOM 对象的 innerHTML
v-bind: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
v-on: 绑定事件，绑定的事件定义在 methods 中
事件修饰符
- .stop 阻止冒泡，调用 event.stopPropagation()
- .prevent 阻止默认行为，调用 event.preventDefault()
- .capture 添加事件侦听器时使用事件捕获模式
- .self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
- .once 事件只触发一次
v-model: 在表单元素上创建双向数据绑定，监听用户的输入事件以更新数据
v-for: 基于源数据多次渲染元素或模板块
key属性: 使用 v-for 的时候提供 key 属性，以获得性能提升。使用 key，Vue 会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

样式处理 -class 和 style

使用方式：v-bind:class="expression" or :class="expression"，表达式的类型：字符串、数组、对象（重点）

v-if 和 v-show
- v-if: 根据表达式的值的真假条件，销毁或重建元素
- v-show: 根据表达式之真假值，切换元素的 display CSS 属性
提升性能: v-pre
vue会跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译
提升性能：v-once
vue只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

Vue 生命周期

生命周期函数就是组件在初始化或者数据更新时会触发的钩子函数。

beforeCreate()
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
注意：此时，无法获取 data中的数据、methods中的方法
created()
注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据
beforeMounted()
在挂载开始之前被调用
mounted()
此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作
beforeUpdated()
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
注意：此处获取的数据是更新后的数据，但是获取页面中的DOM元素是更新之前的
updated()
组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
beforeDestroy()
实例销毁之前调用。在这一步，实例仍然完全可用。
使用场景：实例销毁之前，执行清理任务，比如：清除定时器等
destroyed()
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

SPA -单页应用程序

SPA： Single Page Application

单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。

单页面应用程序：只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
传统多页面应用程序：对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
优势:
减少了请求体积，加快页面响应速度，降低了对服务器的压力
更好的用户体验，让用户在web app感受native app的流畅
实现思路和技术点

ajax
锚点的使用（window.location.hash #）
hashchange 事件 window.addEventListener("hashchange",function () {})
监听锚点值变化的事件，根据不同的锚点值，请求相应的数据
原本用作页面内部进行跳转，定位并展示相应的内容