前端经典面试题

1.css中link的@import的区别是:

link属于HTML标签,而@import是css提供的
页面被加载时,link会被同时加载,而@import引用的css会等页面加载完再加载
@import只在IE5以上才能识别,而link是HTML标签,无兼容问题

2.Doctype的作用,严格模式与混杂模式如何区分,它们有何意义

声明位于文档的最前面,告知浏览器以何种模式来渲染文档

严格模式是指浏览器按照W3C标准来解析执行代码
混杂模式则是指使用浏览器自己的方式来解析执行代码
DOCTYPE不存在或格式不正确会导致文档以复杂模式呈现

3.语义化的理解

去掉或者丢失的样式的时候可以让页面呈现出清晰的结构
方便其他的设备解析
语义化的HTML文档有助于提升你的网站对访客的易用性,有利于SEO,对于搜索引擎或爬虫软件来说,有助于它们建立索引
便于团队开发和维护

4.行内元素有哪些,块级元素有哪些,空元素有哪些

行内元素:a b span img input strong select label button em textarea
块级元素:div p table ul li h1-h6 dl dt dd
空元素:br hr link meta input img

5.HTML5有哪些新特性,移除了那些元素 ,如何处理HTML5新标签的兼容问题,如何区分HTML和HTML5

拖拽释放API(drag and drop)
画布API(canvas)
音频视频API(andio,video)
地理API
语义化更好的内容标签(header,nav,footer,aside,article,section)
本地离线存储,localStorage长期存储数据,浏览器关闭后数据不丢失
sessionstorage的数据关机自动删除
表单控件(calendar,date,time,email,url,search)
新的技术(webworker,websocket,geolocation)
移除的元素:
纯表现型的元素(basefont,big,center,font,s,strike,tt,u)
对可用性产生负面影响的元素(frame,frameset,noframes)
如何处理兼容问题:
IE8/IE7/IE6支持通过document.createElement方法产生标签,可以利用这一特性让浏览器支持HTML新标签
可以使用html5shim框架
如何区分:
DOCTYPE声明新增的结构元素和功能元素

6.CSS盒子模型

包括W3C盒子模型和IE盒子模型两种
内容(content),边界(margin),填充(padding),边框(border)组成

7.CSS的选择符有哪些,哪些属性可以继承,优先级的算法,CSS3新增伪类

Id选择器
相邻选择器
子选择器
类选择器
标签选择器
后代选择器
通配符选择器
伪类选择器
属性选择器
可以继承的属性:font-size/font-family/color/text-indent
优先级的算法:
就近原则,同权重情况下样式最近者为准
载入样式以最后载入定位为准
!Important > 内联 > id > class > 元素
新增伪类:
first-of-type
last-of-type
only-of-type
only-child
nth-child(2)
:enabled :disable 表单控件禁用
:checked 单选框和复选框被选中

8.如何居中div元素,如何居中浮动的元素,如何让绝对定位的div居中

给div设置一个宽度,设置margin{0 auto}
居中浮动的元素:
可以把浮动的元素包在一个div里面
精确计算左外边距进行设置
绝对定位的div居中:
给子元素设置margin-left

9.display的值有哪些,它们的作用

inline:象行内元素一样显示
block:象块级元素一样显示
inline-block:象行内元素一样显示,但其内容象块级元素一样显示
list-item:象块类型一样显示,并添加样式列表标记。

10.position的值,absolute和relative定位原点是

Absolute:绝对定位,相对于static定位以外的第一个祖先元素进行定位
Relative:相对定位,相对于其在普通流位置的元素进行定位
Fixed:固定定位,相对于浏览器窗口进行定位
Static:默认值,没有定位
Inherit:规定从父元素继承position属性的值

11.CSS3新特性

实现圆角,阴影,对文字加特效,线性渐变,旋转,缩放,定位,倾斜,增加了更多CSS选择器,多背景(rgba),媒体查询,多栏布局,border-image
在CSS3中唯一引入的伪类是::selection

12.请解释一下CSS3的Flexbox,以及使用场景

弹性盒子模型是W3C规范的新的布局方式,目的是提供一种更高效的方式来对容器的条目进行布局,对齐,分配空间,操作比较自由
容器默认存在两根轴,水平的主轴,垂直的交叉轴
6个属性:
flex-direction/flex-wrap/flex-flow/justify-content/align-items/align-content
适用于移动端,在Android和IOS上也支持

13.CSS实现三角形的原理

均分原理,保证元素是块级元素,设置元素边框,不需要显示的边框设置为透明色

14.JavaScript中的this这是如何工作的

JS中的this指向是不确定的,call/apply用于改变this的指向
This一般情况下,都是指向函数的拥有者
在函数自执行里,this指向的是Windows对象

15.call和apply的区别

Call()的参数需要单个传入
Apply()的参数需要传入一个数组,该方法会自动将参数打散为单个数值

16.原型继承的原理

在js中,对象A如果要继承对象B的属性和方法。那么只有将对象B放到对象A的原型链上即可。而某个对象的原型链,就是由该对象开始,通过__proto__
属性连接起来的一串对象__proto__属性是js对对象的内部属性,任何js对象,包括我们自己构建的对象,js的built-in对象,任何函数都具有这个属性

17.闭包

外层函数调用后,作用于对象无法释放,被内层函数的作用域链引用着——形成了闭包
优点:避免全局污染
缺点:造成内存泄漏,比普通的全局函数多占用一块空间
使用:
①用外层函数包裹要保护的变量和内层函数
②外层函数把内层函数返回出去,让外层的人能使用内层函数
③外部的使用者要调用外层函数,返回的内部函数变量保存在变量中,可反复使用
只要希望重用一个变量,有保护变量不被修改时,都有闭包
特点:
①函数嵌套函数
②函数内部可以引用外部的参数和变量
③参数和变量不会被垃圾回收机制回收
只要给保存闭包的函数变量赋值为null就会释放闭包

18.声明提前

函数里的所有声明都被提前到函数体的顶部,而变量赋值会留在原处

19.严格模式(use strict)的好处和坏处

①消除JS语法的一些不合理,不严谨之处,
②提高编译器效率,增加运行速度
③消除代码运行的一些不安全之处
④为未来新版本的JS做好铺垫
IE6/IE7/IE8/IE9均不支持严格模式
缺点:现在的网站都会对代码进行压缩,一些用了严格模式,一些没有用,这时这些严格模式的文件被合并后,这个串就到了文件中间,不仅没有指示严格 模式,反而在压缩后浪费了字节

20.异步(promise和async)

Promise接收一个函数作为参数,用来处理异步操作,函数有resolve和reject两个参数
Resolve:将异步的执行从pending变成了resolve,是个函数执行返回
Reject:从请求变成失败,是个函数可以执行返回一个结果
Async也是处理异步对象的,返回的是promise对象

21.async和generator的区别

async函数是generator函数的语法糖
Generator执行必须靠执行器,需要调用next()方法,而async自带执行器
Async语义更清楚
Async有更广的适用性
Async的返回值是promise,可以用.then执行下一步操作,比generator的返回值方便

22.同步和异步的区别

同步指的是在主线程上排队执行的任务,只有前一个任务完成才会执行下一个任务
异步指的是不进入主线程而进入任务队列的任务,只有等主线程任务执行完毕,任务队列才会通知执行主线程,请求执行任务,给任务才会进入主线程执行

23.三种减少页面加载时间的方法

优化图片
图像格式的选择
优化CSS
减少http请求

24.WEB攻击技术

SQL注入
跨站脚本攻击(XSS):通过存在安全漏洞的Web网站注册用户的浏览器运行非法的HTML标签或者Js进行的一种攻击
跨站点请求伪造(CSRF):值攻击者通弄过设置好的陷阱,强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新

25.性能优化的方法

减少HTTP请求
减少DOM操作,优化JS性能
少用全局变量
避免使用CSS表达式
图片预加载,样式放在顶部,脚本放在底部

26.浏览器是如何渲染页面的

解析文档构建DOM树
构建渲染树
布局与绘制渲染树

27.怎样重构页面

编写CSS
让页面结构更合理化,提升用户体验
实现良好的页面效果和提升性能

28.什么叫优雅降级和渐进增强

优雅降级:一开始就构建完整的功能,然后再针对低版本的浏览器进行兼容
渐进增强:针对低版本的浏览器进行构建页面,保证最基本的功能,然后再针对更高级的浏览器进行效果交互等改进和追加功能达到更好的用户体验

29.平时如何管理你的项目

先期团队必须确定好全局样式,编码模式
编写习惯必须一致
页面进行标注
CSS和HTML文件夹并行存放,命名必须统一
JS份文件夹存放,命名以该JS功能为准的英文翻译
图片尽量整合在一起,便于管理

30.浮动的原理,引起的问题,怎样清除浮动

原理:
使文档脱离文档流,不占据页面空间,浮动元素碰到包含它的边框或者浮动元素的边框停留
问题:
父元素的高度无法被撑开,影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
解决:
增加一个空标签,设置clear:both
使用after伪元素
浮动外部元素
设置overflow:hidden/auto

31.对JSON的了解

json是JS对象格式的字符串,是一种轻量级的数据交换格式,它是基于js的一个子集,数据格式简单,易于读写,占用带宽小

32.ajax请求

创建异步对象
创建HTTP请求
发送HTTP请求

接收响应数据 33.GET和POST的区别,何时使用POST

GET:通过地址栏传值,一般用于信息获取,使用URL传递参数,对所发送的信息量也有限制,一般在2KB个字符
POST:通过提交表单来传值,一般用于修改服务器上的资源,对所发送的信息量没有限制
使用:
无法使用缓存文件
向服务器发送大量数据
发送包含未知字符的用户输入时

34.JS原型和原型链,有什么特点?

原型对象也是普通的对象,是对象一个自带的__proto__属性,原型也有可能有自己的原型,如果一个原型对象的原型不为null的话,就称为原型链
原型链是有一些用来继承和共享属性的对象组成的对象链

35.JS中数组去重

…new Set/indexOf/for循环splice()/递归

36.MVC,MVVM

MVC:model、view、controller
MVVM:model、view、viewModel
都是一种设计思想,MVC所有通信都是单向的,MVVM主要解决了MVC中大量的DOM操作使页面渲染性能降低,加载速度慢,影响用户体验,

37.JS中的数据类型

基本数据类型:string,number,boolear
复合数据类型:array object
特殊数据类型:null undefined

38.数组的方法

Push/pop/shift/unshift/splice/split/concat/sort/reverse/slice/forEach/map/indexOf

39.判断一个对象是不是数组类型

typeOf/instanceof/class属性/arrary.isArray

40.用promise解决回调地狱

1.创建一个promise对象包裹原异步函数的内容
2.promise已经赠送了我们一个门,我们只需要决定何时开这个门,通知下一项任务可以继续
3.调用异步函数,获得promise对象用每个promise对象的.then函数链接下一个promise对象

41.vue的绑定原理

访问器属性/构建虚拟DOM树

42.虚拟DOM树

1.小,仅包含可能变化的元素对象
2.提前封装了原生DOM函数,可自动修改更新到页面指定元素上

43.当v-for遍历的数组中某一个元素被修改时,v-for被迫要重新生成所有元素,而不是只更新其中一个。——效率低

因为: 这一组反复生成的元素,除了内容之外,没有任何差别,v-for无法区分某一个元素。
解决:

为要反复生成的元素添加:key=“i” 一个绑定
:key一定要绑定在一个不重复的变量上,通常:key都会绑定下标那个变量

44.vue中如何修改数组中一个元素

用arr.splice(i,1,新值)

45.观察者模式

当一个变量值被修改时,可以自动通知所有关注这个变量的其他对象,让他们自动重新获得这个变量的新值。

46.小程序的双向绑定和vue的异同?

小程序直接this.data属性,不能直接同步到视图,必须使用this.setData()方法
vue: v-model

47.微信小程序组件的生命周期

onLoad: 页面加载
一个页面只会调用一次,可以在onLoad中获取当前页面调用的query参数
onShow: 页面显示
每次打开页面会调用一次
onReady: 页面初次渲染完成
一个页面调用一次,代表页面准备完毕,可以和视图进行交互
onHide: 页面隐藏
当tab切换或者navigateTo会调用
onUnload: 页面卸载

48.vue的生命周期

共有8个阶段
创建前/后: 创建模型数据和响应系统
beforeCreate:未初始化自定义数据,也没有挂载到元素
created:初始化自定义数据,没有挂载到元素
挂载前/后: 创建虚拟DOM,并生成真实的DOM,可以发送ajax请求,也可以进行DOM操作
beforeMount: 不能进行DOM操作
mounted: 可以进行DOM操作
更新前/后: 模型数据发生变化
beforeUpdate
updated
销毁前/后: 销毁组件/实例
beforeDestroy
destroy

49.v-show和v-if指令的共同点和不同点?

v-show通过修改元素的display属性实现显示隐藏
v-if 通过销毁和重建DOM达到元素的显示和隐藏

50.深拷贝与浅拷贝

浅拷贝:只复制指向某个对象的指针,而不复制对象本身,新旧对象共享一块内存; 改变一个对象,另一个会随之改变;
实现:Object.assign/直接赋值
深拷贝:复制并创建一个一模一样的对象,不共享内存,修改新对象,旧对象保持不变。
实现:json.stringfy()/递归

51.vue 的 router(hash和history,区别及原理)

hash有‘#’,改变hash不会重新加载页面
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法

52.Vue 的路由导航守卫

执行顺序(beforeRouteLeave < beforeEach < beforeRouteUpdate < beforeEnter < beforeRouteEnter < beforeResolve < afterEach)

53.computed watch 的区别

computed 是计算属性,依赖缓存,只有在相关依赖发生变化时才会进行重新求值
watch 是监听属性,页面重新渲染时也会执行

54.vue父组件向子组件传递数据?

通过props

55.子组件像父组件传递事件?

$emit方法

56.v-if与v-for的优先级

v-for 比 v-if 更高的优先级

57.route 和 router 的区别

router是VueRouter的实例,在script标签中想要导航到不同的URL,使用$router.push方法。返回上一个历史history用$router.to(-1)
route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。

58.vue的请求配置

Axios拦截

59.vuex

vuex是一个专为vue.js应用程序开发的管理模式
场景有:
单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车
Vuex五大核心:
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex
当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法。actions里面的每个方法中都会有一个commit方法,当方法执行的时候会通 过commit来触发mutations里面的方法进行数据的修改。mutations里面的每个函数都会有一个state参数,这样就可以在mutations里面进行state的数 据修改,当数据修改完毕后,会传导给页面。页面的数据也会发生改变。

60.双向数据绑定

原理:默认绑定的对象的value或checked属性,初次绑定的时候,会触发getter和watcher,watcher通知Vue生成新的VDOM树,通过reder函数渲 染生成真实DOM,此时视图 就会发生改变,相当于value发生了改变,就会触发setter,watcher 监听机制就会执行,循环直到再次生成真实的DOM

61.diff算法

同级比较

62.请说下封装 vue 组件的过程?

·建立组件的模板,先把架子搭起来,写写样式,考虑好组件的基本逻辑。(os:思考1小时,码码10分钟,程序猿的准则。)
·准备好组件的数据输入。即分析好逻辑,定好 props 里面的数据、类型。
·准备好组件的数据输出。即根据组件逻辑,做好要暴露出来的方法。
·封装完毕了,直接调用即可

63.SPA首屏加载慢如何解决

安装动态懒加载所需插件;使用CDN资源。

64.HTTP状态码

1** :信息,服务器收到请求,需要请求者继续执行操作
2** :成功,操作被成功接收并处理
3** :重定向,需要进一步的操作以完成请求
4** :客户端错误,请求包含语法错误或者无法完成请求
5** :服务器错误,服务器在处理请求的过程中发生了错误
404 (未找到) 服务器找不到请求的网页
405 (方法禁用) 禁用请求中指定的方法。
501 (尚未实施) 服务器不具备完成请求的功能。 例如,服务器无法识别请求方法时可能会返回此代码。
504 (网关超时) 服务器作为网关或代理,但是没有及时从上游服务器收到请求。

65.继承

1.原型链继承
2. 构造函数继承
3. 组合继承(原型链继承+构造函数继承)
4. Object.create(原型式继承)
5. 寄生式继承
6. 寄生组合式继承
66.DOM事件模型
捕获阶段/目标触发阶段/冒泡执行阶段

展开阅读全文

Git 实用技巧

11-24
这几年越来越多的开发团队使用了Git,掌握Git的使用已经越来越重要,已经是一个开发者必备的一项技能;但很多人在刚开始学习Git的时候会遇到很多疑问,比如之前使用过SVN的开发者想不通Git提交代码为什么需要先commit然后再去push,而不是一条命令一次性搞定; 更多的开发者对Git已经入门,不过在遇到一些代码冲突、需要恢复Git代码时候就不知所措,这个时候哪些对 Git掌握得比较好的少数人,就像团队中的神一样,在队友遇到 Git 相关的问题的时候用各种流利的操作来帮助队友于水火。 我去年刚加入新团队,发现一些同事对Git的常规操作没太大问题,但对Git的理解还是比较生疏,比如说分支和分支之间的关联关系、合并代码时候的冲突解决、提交代码前未拉取新代码导致冲突问题的处理等,我在协助处理这些问题的时候也记录各种问题的解决办法,希望整理后通过教程帮助到更多对Git操作进阶的开发者。 本期教程学习方法分为“掌握基础——稳步进阶——熟悉协作”三个层次。从掌握基础的 Git的推送和拉取开始,以案例进行演示,分析每一个步骤的操作方式和原理,从理解Git 工具的操作到学会代码存储结构、演示不同场景下Git遇到问题的不同处理方案。循序渐进让同学们掌握Git工具在团队协作中的整体协作流程。 在教程中会通过大量案例进行分析,案例会模拟在工作中遇到的问题,从最基础的代码提交和拉取、代码冲突解决、代码仓库的数据维护、Git服务端搭建等。为了让同学们容易理解,对Git简单易懂,文章中详细记录了详细的操作步骤,提供大量演示截图和解析。在教程的最后部分,会从提升团队整体效率的角度对Git工具进行讲解,包括规范操作、Gitlab的搭建、钩子事件的应用等。 为了让同学们可以利用碎片化时间来灵活学习,在教程文章中大程度降低了上下文的依赖,让大家可以在工作之余进行学习与实战,并同时掌握里面涉及的Git不常见操作的相关知识,理解Git工具在工作遇到的问题解决思路和方法,相信一定会对大家的前端技能进阶大有帮助。
©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值