资讯专栏INFORMATION COLUMN

前端面试题搞起来

Miracle / 2005人阅读

摘要:和面试题盒子模型中盒子模型包括盒子模型和标准的盒子模型。客户端错误服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。服务器端暂时无法处理请求可能是过载或维护。

学而不思则罔,思而不学则殆。这一篇会将一些看到的面试题做一个总结。以后看到新的面试题也会持续的更新在这个里面。
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来写。

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

两者都采用了 virtual dom 的方式,性能都很好

ui 上都采用组件化的写法,开发效率很高。

vue 采用双向数据绑定, react 是单项数据绑定。当工程规模比较大时,双向数据绑定会很难维护

vue 适合不会持续的,小型的 web 应用,使用 vue.js 能带来短期内较高的开发效率, 否则采用 react。

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 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104390.html

相关文章

  • JavaScript系列(四) - 收藏集 - 掘金

    摘要:函数式编程前端掘金引言面向对象编程一直以来都是中的主导范式。函数式编程是一种强调减少对程序外部状态产生改变的方式。 JavaScript 函数式编程 - 前端 - 掘金引言 面向对象编程一直以来都是JavaScript中的主导范式。JavaScript作为一门多范式编程语言,然而,近几年,函数式编程越来越多得受到开发者的青睐。函数式编程是一种强调减少对程序外部状态产生改变的方式。因此,...

    cfanr 评论0 收藏0
  • 记一次XX前端面试

    摘要:面试官说那我问你一个哲学的问题,为什么有数据结构这种东西哇,这是啥,巴拉巴拉扯了一通,大致就是物以类聚,人以群分,先人积累下来的经验,这些让我们更方便处理数据啥的。 前因,没有比摸鱼有趣的事了 距离自己被外派(俗称外包)出去,已经过了快五个月,工作的话,很闲。人啊,一定保持好的习惯,懒惰是会上瘾,日常摸鱼,怀疑人生,我是谁,我在哪,我要干什么。 中午吃饭的时候,收到了boss直聘的一条...

    Shisui 评论0 收藏0
  • 前端系列——论前端工程师增加知名度的重要性

    摘要:工作最后还是找到了,工作了几个月,我不断思考这个问题前端工程师要不要写博客,拉粉丝,做娱乐圈一样的事情。打开知乎一看,哇塞,这个人头衔是资深前端,粉丝这么多,大家都叫他某大某老。 话题 这篇文章就像是灌水文,扯些非技术的东西,权当话题讨论一下,观点并非绝对正确。 送给那些明明知道自己很渣还很低调潜水的前端新人们,现在的你不努力,以后没有机会给你努力了! 过去 从我步入前端行业开始说起吧...

    justjavac 评论0 收藏0
  • 前端系列——论前端工程师增加知名度的重要性

    摘要:工作最后还是找到了,工作了几个月,我不断思考这个问题前端工程师要不要写博客,拉粉丝,做娱乐圈一样的事情。打开知乎一看,哇塞,这个人头衔是资深前端,粉丝这么多,大家都叫他某大某老。 话题 这篇文章就像是灌水文,扯些非技术的东西,权当话题讨论一下,观点并非绝对正确。 送给那些明明知道自己很渣还很低调潜水的前端新人们,现在的你不努力,以后没有机会给你努力了! 过去 从我步入前端行业开始说起吧...

    liaoyg8023 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<