web前端面试题

是生气啵啵吖
184 阅读5分钟

自己面试遇见的题目，记录知识点，可以自己具体去查答案，仅提供部分答案

css面试题

1.flex的介绍：flex也称‘弹性布局’，可以随着页面的大小自适应页面布局。

  • 注意：设置了弹性布局后，子元素的float，clear和vertical-alain属性都将会失效
  • flex的主要属性：
    1. flex-direction：指定flex的主轴方向，有row（默认，水平方向是主轴方向）| column（垂直方向是主轴方向）
    2. justify-content：当水平方向是主轴方向时的对齐方式 space-between | space-around | flex-start | flex-end | center
    3. align-item: 当垂直方向是主轴方向时的对齐方式 stretch（默认是） | flex-start | flex-end | center | baseline
    4. flex-wrap:是否换行属性 nowrap（默认不换行） | wrap | wrap-reverse
  • flex的应用：

    1. 内容宽度等分

    2. 一侧固定宽，另一侧占满剩余宽度

    3. 未知宽高，左右垂直居中

2.css的选择器

  • 通配符选择器，标签选择器，类选择器，id选择器，群组选择器，子代选择器（标签1>标签2），后代选择器（标签1 选择器2），伪类选择器（选择器：hover），属性选择器，结构性伪类选择器，状态类选择器
  • 属性选择器：
    1. element[attr]{}：表示指定了属性名，但是不知道属性值的element
    2. element[attr = value]{}:表示指定了属性名并且属性值等于value的element
    3. element[attr ~= value]{}:表示指定了属性名，且属性值词列表中包含value属性值的element
    4. 以下是css3中的选择器 element[attr ^= value]{}：表示属性值名字以value开头的element
    5. element[attr $= value]{}：表示属性值名字以value结尾的element
    6. element[attr *= value]{}：表示属性值名字包含value开头的element
  • 结构性伪类选择器：element：first-child{} element：nth-child（n）{}
  • 状态类选择器：element：checked{} element：disabled{}
  • 优先级：行间样式优先级最高1000

3.简述src和href的区别：

  • href指向网络资源所在的位置，建立和当前元素或当前文档之间的链接，用于超链接
  • src指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，图片，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到该资源加载，编译，执行完毕。

4.z-index只能在absolute中起作用

5.固定定位不可以在移动端使用

网络

1.减少网络请求时间的方法： * 优化图片 * 图像格式的选择：GIF提供的颜色较少，可以用在一些对颜色要求不高的地方 * 优化css：比如压缩css代码 * 标明宽度和高度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。 当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。） * 减少http请求（合并文件，合并图片） 2.http定义的与服务器交互的不同方式 url叫资源描述符，一个url地址，用于描述一个网络资源，而一个http中对应的get，post，put，delete就对应着对这个资源的查，改，增，删 1. get：请求指定的页面，并返回实体主体，将传递的数据放在请求头中， 2. head：只请求页面的首部 3. post：请求服务器接受所指定的文档作为对所标识的url的新的从属实体，将提交的数据放在请求体中 4. put：从客户端向服务器传送的数据取代了指定文档的内容 5. delete：请求服务器删除指定页面 3.简述Local Storage，Session Storage和cookie image 4.前端性能优化

js原生

1.冒泡和捕获 * 冒泡：事件从特定的text到div标签到body，到document最后到window * 捕获：事件从window，到document到body到div标签到特定的text 2.关于ES5和ES6：参考文章 www.cnblogs.com/liyuanhong/…

以下是自己方便阅读摘录的：

  • javascript包括：ECMAscript（是javascript所基于的脚本语言），DOM（文档对象模型），BOM（浏览器对象模型）
  • ** es5知识点**：

    • 严格模式：在全局或函数的第一条语句使用"use script"

      目的： 1.消除javascript语法中的一些不合理，不规范的，不严谨之处，避免一些怪异行为 2.消除代码运行的一些不安全之处，保证代码的安全运行 3.提高编译器效率，增加运行速度 4.为未来版本的javascript做好铺垫 注意： 1.严格模式下变量必须声明（var，let，const） 2.严格模式下不能使用with（） 3.为只读变量和不可扩展对象赋值会报错, 而不是静默失败 4.this默认是undefined 5.只能在脚本顶级或者函数内部使用，if，for语句中声明会报语法错误 6.在严格模式下，不能使用delete操作符

    • JSON对象

      JSON.stringify(obj/arr)将js对象（数组）转换成json对象（数组）
  JSON.parse（JSON）将json转换成js对象或数组
    • 对象方法 
      1.Object.create(prototype,description):以指定对象为原型创建新的对象description包括value指定值，writable是否可改，configurable是否可删除，enumerable是否可用for in 枚举
2.Object.getPrototypeOf（obj）：获取对象的原型
3.Object.defineProperty（obj，key，description）：在obj上添加key属性或者修改key属性的现有属性，返回这个对象
4.Object.defineProperties（obj，propse）：为obj对象设置多个属性值
	举个栗子
    var obj = new Object();
      Object.defineProperties(obj, {
          name: {
              value: '张三',
              configurable: false,
              writable: true,
              enumerable: true
          },
          age: {
              value: 18,
              configurable: true
          }
      })
		console.log(obj.name, obj.age) // 张三, 18 
5.Array.isArray():判断传入的是否是一个数组，例子：Array.isArray（{age：23}）//false

*** es6知识点** 原文出处 www.jianshu.com/p/0120580f3… 记一下只是自己方便记忆 * let和const ``` let:let定义的变量不可以再次被定义，但是可以改变值；必须先定义后使用，没有变量提升；具有块级作用域；let声明不会挂载到windows上 const：const定义的变量不可以再次定义，不可以被改变值，用来定义常量，所以一般变量名用大写的；初始化常量时必须要赋初值；必须先定义后使用，没有变量提升；具有块级作用域；不会挂载到windoes上；

  • 解构赋值

      * 数组解构
  * 对象解构

  • 箭头函数：简化函数的定义，this指向外层作用域，自己没有this，不能处理成员，所以不能做构造函数；没有arguments

  • es6可以给函数的参数设置默认值

  • 剩余参数：只能做最后一个参数，可以代替arguments // 参数很多，不确定多少个，可以使用剩余参数

      function fn(...values) {
      console.log(values); // [6, 1, 100, 9, 10]
  }
  // 调用
  console.log(fn(6, 1, 100, 9, 10)); //undefined

  • 扩展运算符：可以将数组的每一项展开，实现数组的合并，取代了apply；求最大值

  • Array.from():将伪数组转换成数组，伪数组必须要有length属性

      let person = {
      name:'晓李',
      sex:'女',
      age:18,
      length:3
  }
  let arr = Array.from(person)

  • find()和findIndex（）

  • includes（）：判断是否包含，两个参数，第一个要查找的值，第二个可选，是从何处查找

  • Set数据结构：本身是一个构造函数，类似于数组，表示不重复

    	 size：属性，获取 set 中成员的个数，相当于数组中的 length
    add(value)：添加某个值，返回 Set 结构本身。
    delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
    has(value)：返回一个布尔值，表示该值是否为Set的成员。
    clear()：清除所有成员，没有返回值。
    创建一个空set： let set = new Set();
    初始化Set的时候，也可以为其传入数组或字符串，得到的Set对象中的成员不会有重			复。根据这个特点可以完成数组或字符串去重。

3.改变this指向的方法：call(),apply(),bind()。

	注意：
     1.let声明不会挂载到window上，当let声明的函数的this指向window时时undefined
     2.apply()和call一样，只是参数传递方式不同，apply（）是参数数组，call()是数组。
     3.bind()会返回一个函数，所以需要加一对小括号进行调用，如：person.bind(obj)()

4.promise的本身是同步的，但是他的then和catch是异步的

5.js中处理异步操作的方法：

  • 由于js是单线程的语言，当处理耗时较长的任务时，异步操作就很重要，比如ajax请求数据是异步的
  • 回调函数：先执行完函数本身再执行回调的函数，容易理解和部署，但是不利于阅读和维护，流程很乱，一个任务只能执行一个回调函数。
  • 事件监听：事件驱动，监听的事件有on，bind，listen，addEventListener。可以绑定多个事件，但是整个程序都要变成事件驱动型，运行流程会变得不清晰。elment.addEvenListener("click",handler1,false);第三个参数是否冒泡处理，true由外向里
  • promise对象：异步操作的管理者，将异步操作转化成同步流程，他有三个状态，pending（等待），resolved（成功） ，rejected（失败）。使用then和catch处理promise的结果，并且可以随时调用。
  • async和await结合promise

6.继承

  • 原型：在函数都有一个特殊的属性prototype（原型），prototype属性是一个指针，指向原型对象，原型对象的方法和属性都可以被函数的实例所共享。
  • 原型链继承：子类型的原型是父类型的一个实例对象
子.prototype= new 父（）所以子类的实例通过_proto_访问到父类的实例，然后通过_proto_指向父类的prototype就可以获得父类原型上的方法,这样就实现了父类的继承
优点：操作简单，父类的共有和私有属性方法子类都可以访问到
缺点：无法实现多继承；子类创建实例时无法向父类传参
  • 构造函数继承：子类型构造函数中通用call来调用父类型的构造函数。
在子类型的构造函数内部,使用person.call（this，name，age）
优点：可以实现多继承，call多个父类对象；创建子类实例时可以向父类传递参数
缺点：只能实现部分继承，拿不到父类型原型上的东西
  • 原型链和构造函数混合继承：调用父类的构造实现继承父类的属性和方法，通过将父类实例作为子类原型实现函数的复用
优点：可以实现实例和原型的继承；可以给父类传参；不存在引用属性共享问题；
缺点：调用了两次父类构造函数，生成了两份实例，第一个是创建子类原型的时候，第二个是子类型构造函数的内部
  • 原型式继承：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了一个可以随意添加属性的实例或对象
	function content (obj) {
    	function F (){};
        F.prototype = obj;
        return new F();
    }
    var sup = new Person();//拿到父类的实例
    var sup1 = content(sup);//继承了父类函数的属性
    缺点：所有的实例都会继承原型上的属性，无法实现复用
  • 寄生式继承：给原型继承外面套了一个函数用来传递参数，这样就可以增添属性了 image
缺点：无法实现复用
  • 寄生组合式继承： image

小程序

1.小程序的语法：

  • wxml是属于微信视图层的一套标签语言，他和vue的语法很相似

    1. 数据绑定

    2. 列表渲染 <view wx:for="{{arr}}" wx:key="{{index}}">{{item}}</view>

    3. 条件渲染<view wx:if="{{judge}}">

    4. 模板：小程序也可以使用模板template，需要给模板加上name属性，在调用时通过is属性选择对应名称的模板，使用data属性传入相关参数

      //index.wxml

    <template name="yourname">

      <view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template>

<template is="yourname" data="{{...names}}"></template>

   ```
   ```
// index.js
Page({
  data: {
    names: {firstName: 'Hulk', lastName: 'Hu'}
  }
})
```

    5. 引用：wxml提供两种引用方式，import和include * import有作用域的概念，只能import目标文件的template，不会import目标文件import的template<import src="b.wxml"/> * include可以将目标文件除了 template, wxs 外的整个代码引入，相当于是拷贝到 include 位置 5. 滚动视图：scroll-view，scroll-y="{{true}}"开启对应的滚动,并且需要设置高，超出设置的高，发生滚动 <scroll-view scroll-y="{{true}}" style="height: 100rpx;"> <view wx:for="{{arr}}" wx:key="{{index}}">{{item}}</view> </scroll-view>

    1. icon用来创建一个图标，type属性来使用微信内部提供的图标类型，color设置颜色，size设置大小
    2. picker创建一个选择器

  • wxs语法：wxs是小程序的一套脚本语言

    1. 模块：每个.wxs文件和wxs标签都是一个模块，通过module.exports暴露出去，对外共享；在其他wxs中使用require引入

2.微信小程序的相关文件类型

  • project.config.js：项目配置文件，做一些个性化的设置，比如界面设置，编译设置
  • app.json：程序的全局配置，包括小程序的所有页面路径，界面表现形式，底部tab等
  • app.js：小程序的逻辑
  • app.wxss：全局样式，会作用域小程序的全部页面
  • sitmap：配置小程序及其页面是否允许被微信索引
  • pages：包含小程序的所有页面
  • js：页面逻辑
  • wxss：页面样式
  • wxml：页面结构
  • json：页面配置

3.有哪些属性传值的方式

  • 给标签添加data-*的属性传递我们需要的值，然后通过e.currentTarget.dataset或者onload的param参数获取，但是data-*不能有大写字母并且不可以传递对象
  • 设置id：e.currentTarget.dataset.id来获取
  • 在navigator中添加参数来传值，在onload中获取参数，可以传递对象，通过json传参
  • 存储到app对象上，全局数据存储var app = getApp（）；app.globalData.name = {a:1}
  • form表单input输入框：绑定事件，e.detail.value
  • 本地存储，storage中

4.提高小程序的响应速度

  • 提高页面的 加载速度
  • 用户行为预测
  • 减少默认data的大小
  • 组件化方案

5.小程序和原生APP开发哪个好？

小程序除了拥有公众号的低开发成本，低获客成本以及无需下载等优势，在服务请求延时和用户使用体验都得到了较大幅度的提高，使其能够承受跟复杂的服务功能以及使用用户获得更好的用户体验

6.微信小程序和H5的区别

  • 运行环境不同
传统的H5运行的环境是浏览器，包括webview，而微信小程序的运行环境并不是完整的浏览器，而是微信团队基于浏览器完全重构了一个内置的解析器，运行在微信APP上，针对小程序专门做优化，提升了小程序的性能。
  • 开发成本不同
只在微信中运行，所以不用去顾虑浏览器的兼容性，不用担心生产环境中出现不可预测的BUG
  • 获取系统的权限不同
系统级权限都可以和微信小程序无缝衔接
  • 生产环境的运行流畅度
当HTMLe5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体验总是不尽人意，需要不断对项目优化来提升用户体验。但是由于微信小程序运行环境独立，省去了通过浏览器渲染的步骤，提升了性能，运行流畅。H5面对复杂的业务逻辑和丰富的页面交互时会发生卡顿，但是各个页面的切换已经和APP相媲美，非常流畅

vue

vue是构建数据驱动的web界面的mvvm框架

1.信息传递

  • 父传子：父用属性绑定传值，子用props接受或者使用ref获取子组件然后直接调用子组件的方法修改值
  • 子传父：父组件个子组件传递数据，如果子组件想要改变父组件的值，通过父组件自定义事件，然后子组件通过$emit来触发这个事件改变数据
  • 非父子组件之间就可以使用一个公共容器，在vue实例化之前定义一个公共容器，使用emit和emit和on传递事件
  • 使用vuex传递信息
  • 可以路由传参，用this.$route.query来接收参数

2.vue的生命周期
生命周期指vue实例从创建，初始化数据，编译模板，挂载，更新，销毁等一系列过程 生命周期的钩子函数：

  • beforeCreate：实例刚被创建，date和属性没有初始化
  • created：dom不存在，$el属性还不可以操作，属性已经绑定，可以操作，但是还是没有编译模板
  • beforeMount：完成了模板编译，把dom里面的数据和模板生成html。还没有挂载到页面，dom不可以操作
  • Mounted：虚拟dom已经渲染到真实的dom上，实例已经完全被创建好了，可以操作dom，请求数据。将编译好的html内容替换dom对象，完成模板的html渲染到html页面中，在此过程中进行ajax交互。
  • beforeUpdate：
  • updated：不可以在里面直接修改属性，会陷入死循环
  • beforeDestroy：实例仍然可用
  • destroyed：所有的事件监听会被移除，所有的实例也会被销毁
  • 生命周期的作用：在声明周期有多个钩子函数，让我们在控制整个vue实例的过程中更容易形成好的逻辑
  • 第一次页面加载会触发4个钩子函数，mounted之前的四个 3.vue的优缺点：
  • 优点：单页面应用体验好，性能好，速度快，简单易用，前后端分离，采用虚拟dom，数据双向绑定，指令系统
  • 缺点：不易于seo优化，报错简单不明显，兼容性不好，不支持ie8及以下的浏览器

4.mvvm是model-view-viewmodel的缩写

  • model代表数据模型，也可以在model中可以定义数据修改和操作的业务逻辑
  • view是视图层，代表UI组件，将数据模型转化成UI展现出来
  • view-model：监听数据模型的改变和控制视图行为、处理用户交互，就是同步view和model的对象，连接model和view。
  • 在mvvm的框架下，view和model之间并没有直接的联系，而是通过viewmodel进行双向交互。
  • ViewModel通过双向绑定把view层和Model层连接起来，而View和Model之间同步工作是完全自动的，开发者只需关注业务逻辑，不需要手动操作dom，复杂的数据状态维护完全由mvvm来统一管理。

5.seo优化

6.vue的双向绑定原理：object.defineProperty（）

  • vue实现数据双向绑定采用数据劫持结合发布者-订阅者模式的方式，通过object.defineProperty（）来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应的监听回调。当把一个普通的javascript对象传给vue实例来作为它的data选项时，vue将遍历他的属性，用object.defineProperty将他们转化为getter/setter。用户看不到getter/setter，但是在内部他们让vue追踪依赖，在属性访问和修改时通知变化

7.vue的路由实现

  • hash模式：在浏览器中符号#，#以及后面的字符串称之为hash，用window.location.hash读取；hash虽然在url中但是不被包括在http请求中，用来指导浏览器动作，对服务器安全无用，hash不会重加载页面。hash模式下，仅hash符号之前的内容会被包含在请求中，如http：//www.xxx.com,因此对后端来说，即使没有做到对路由的完全覆盖，也不会报错。
  • history模式：history采用HTML5的新特性提供了两个方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更，history模式下，前端的url必须和实际向后端发起请求url一致，如果缺少对com后的路由的处理，将返回404错误。

8.vuex

  • vuex是用来读取的状态集中放在store中；改变状态的方式是提交mutations，同步；异步逻辑封装在options中。在main.js中引入store，注入，新建一个目录store，..export。
  • 场景：单页面应用中，组件之间的状态，音乐播放，登录状态，加入购物车
  • state：存放数据状态，不可以直接修改里面的数据
  • mutations：定义的方法可以动态修改store中的状态或数据
  • getters：类似于vue中的计算属性，主要用于过滤一些数据。
  • actions：将mutations中的方法变成异步的处理数据的方式，就是异步操作数据，view层通过store.dispath来分发actions
  • modules：项目特别复杂的时候，可以让每一个模块拥有自己的state，mutations，actions，getters使得结构清晰，方便管理
const moduleA = {
	state:{},
    mutations:{},
}
const moduleB = {
	state:{},
    getters:{}
}
const store = new Vuex.Store({
	modules:{
    	a:moduleA,
        b:moduleB
    }
})

其他

1.面向对象

  • 看了这个文章很通俗易懂 zhuanlan.zhihu.com/p/75265007
  • 特性：封装，继承，多态
  • 优点：易维护，易扩展，易复用，更加灵活
avatar
文章
阅读
粉丝