前端面试题04

1 get、post的区别

① get传参方式是通过地址栏URL传递,是可以直接看到get传递的参数,post传参方式参数URL不可见,get把请求的数据在URL后通过?连接,通过&进行参数分割。psot将参数存放在HTTP的包体内

② get传递数据是通过URL进行传递,对传递的数据长度是受到URL大小的限制,URL最大长度是2048个字符。post没有长度限制

③ get后退不会有影响,post后退会重新进行提交

④ get请求可以被缓存,post不可以被缓存

⑤ get请求只URL编码,post支持多种编码方式

⑥ get请求的记录会留在历史记录中,post请求不会留在历史记录

⑦ get只支持ASCII字符,post没有字符类型限制

2 说一下宏任务和微任务

① 宏任务:当前调用栈中执行的任务称为宏任务。(主代码快,定时器等等)。

② 微任务: 当前(此次事件循环中)宏任务执行完,在下一个宏任务开始之前需要执行的任务为微任务。(可以理解为回调事件,promise.then,proness.nextTick等等)。

③ 宏任务中的事件放在callback queue中,由事件触发线程维护;微任务的事件放在微任务队列中,由js引擎线程维护。

3 如何中断ajax请求?

一种是设置超时时间让ajax自动断开,另一种是手动停止ajax请求,其核心是调用XML对象的abort方法,ajax.abort()

4 指令v-el的作用是什么?

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器,也可以是一个 HTMLElement 实例

5 dom 树和 render 树之间的关系?

① dom 树,css树合并成成渲染树(render 树)

② DOM 树与HTML 标签一一对应,包括 head 和隐藏元素

③ 渲染树不包括 head 和隐藏元素,大段文本的每一个行都是独立节点,每一个节点都有对应的 css 属性

6 vuex是一个专为vue.js应用程序开发的状态管理器,它采用集中式存储管理应用的所有组件的状态,并且以相应的规则保证状态以一种可以预测的方式发生变化。

state: vuex使用单一状态树,用一个对象就包含来全部的应用层级状态

mutation: 更改vuex中state的状态的唯一方法就是提交mutation

action: action提交的是mutation,而不是直接变更状态,action可以包含任意异步操作

getter: 相当于vue中的computed计算属性

7 vue-route

vue-router是vuex.js官方的路由管理器,它和vue.js的核心深度集成,让构建但页面应用变得易如反掌

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址

<router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件。

<keep-alive> 组件是一个用来缓存组件

router.beforeEach

router.afterEach

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

介绍了路由守卫及用法,在项目中路由守卫起到的作用等等

8 webpack配置入口出口

module.exports={

    //入口文件的配置项

    entry:{},

    //出口文件的配置项

    output:{},

    //模块:例如解读CSS,图片如何转换,压缩

    module:{},

    //插件,用于生产模版和各项功能

    plugins:[],

    //配置webpack开发服务功能

    devServer:{}

}

9 陈述输入URL回车后的过程

① 读取缓存:

        搜索自身的 DNS 缓存。(如果 DNS 缓存中找到IP 地址就跳过了接下来查找 IP 地址步骤,直接访问该 IP 地址。)

② DNS 解析:将域名解析成 IP 地址

③ TCP 连接:TCP 三次握手,简易描述三次握手

          客户端:服务端你在么?

          服务端:客户端我在,你要连接我么?

          客户端:是的服务端,我要链接。

          连接打通,可以开始请求来

④ 发送 HTTP 请求

⑤ 服务器处理请求并返回 HTTP 报文

⑥ 浏览器解析渲染页面

⑦ 断开连接:TCP 四次挥手

关于第六步浏览器解析渲染页面又可以聊聊如果返回的是html页面

根据 HTML 解析出 DOM 树

根据 CSS 解析生成 CSS 规则树

结合 DOM 树和 CSS 规则树,生成渲染树

根据渲染树计算每一个节点的信息

根据计算好的信息绘制页面

10 陈述http

① 读取缓存:

        搜索自身的 DNS 缓存。(如果 DNS 缓存中找到IP 地址就跳过了接下来查找 IP 地址步骤,直接访问该 IP 地址。)

2.DNS 解析:将域名解析成 IP 地址

3.TCP 连接:TCP 三次握手,简易描述三次握手

          客户端:服务端你在么?

          服务端:客户端我在,你要连接我么?

          客户端:是的服务端,我要链接。

          连接打通,可以开始请求来

4.发送 HTTP 请求

5.服务器处理请求并返回 HTTP 报文

6.浏览器解析渲染页面

7.断开连接:TCP 四次挥手

关于第六步浏览器解析渲染页面又可以聊聊如果返回的是html页面

根据 HTML 解析出 DOM 树

根据 CSS 解析生成 CSS 规则树

结合 DOM 树和 CSS 规则树,生成渲染树

根据渲染树计算每一个节点的信息

根据计算好的信息绘制页面

11 弹性盒子   

① 容器默认存在两根轴:横轴和纵轴 

② 采用flex布局的元素,称为flex容器,简称”容器”。它的所有子元素称为flex项目

③ 要设为flex布局,必须先设置display:flex

④ 容器的属性

1)flex-direction

flex-direction属性决定主轴的方向,及子容器(项目)的排列方向。

row(默认值):主轴为水平方向,起点在左端。          row-reverse:主轴为水平方向,起点在右端。                column:主轴为垂直方向,起点在上沿。                column-reverse:主轴为垂直方向,起点在下沿。

2) flex-wrap

默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

nowrap(默认):不换行

wrap:换行,第一行在上方

wrap-reverse: 换行,第一行在下方

3) flex-flow

flex-flow属性是flex-direction和flex-wrap属性的简写形式,默认为:row nowrap

4) justify-content

justify-content定义了项目在主轴上的对齐方式。

flex-start(默认值):左对齐

flex-end:右对齐

center: 居中

space-between:两端对齐,项目之间的间隔都相等。

space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

5) align-items

align-items属性定义了项目在侧轴上的对齐方式:

flex-start:侧轴的起点对齐。

flex-end:侧轴的终点对齐。

center:侧轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

6) align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

flex-start:与侧轴的起点对齐。

flex-end:与侧轴的终点对齐。

center:与侧轴的中点对齐。

space-between:与侧轴两端对齐,轴线之间的间隔平均分布。

space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

stretch(默认值):轴线占满整个交叉轴。

7) align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

12 双飞翼(圣杯)布局

① 利用定位

② flex布局

③ 利用BFC


13 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容