面试题整理-3

156 阅读5分钟

W3C标准:

万维网联盟 专门负责统一web相关的各项标准

  • w3c标准由结构表现 和行为三部分组成。
标签嵌套规则:
  1. 块元素可以包含内联元素或某些块元素,但内联元素不能包含块元素,而是只能包含其他内联元素。
  2. 块级元素不能放在p标签里面
  3. 几个特殊的块级元素只能包含内联元素,不能再包含块级元素,这几个特殊的块级标签是:h1 h2 h3 h4 h5 p dt
  4. 块级标签与块级标签并列,内联元素与内联元素并列。
  • 常见的块级元素:div p from ul li hr h1-h6 table
  • 常见的行内元素:a span srtong em br img input button select label i textarea
什么是web语义化?

web语义化是指,通过html标记表示页面包含的信息,包含了HTML标签的语义化和Css命名的语义化。 其中,html标签语义化是指,包含语义的标签恰当的表示文档结构,例如h1-h6 总结起来就是:

正确的标签做正确的事情 页面内容结构化 无CSS样子时也容易阅读,便于阅读维护和理解 便于浏览器、搜索引擎解析。 利于爬虫标记、利于SEO

前端性能优化方案(大全)

  • 使用精灵图减少图片存储()
  • 图片懒加载
  • 提取公共组件 组件拆分
  • 如果 CSS 可以实现某些 JS 功能,那就用 CSS。如果 HTML 可以实现某些 JS 功能,那就用 HTML。

前端浏览器兼容问题

  1. 不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同。解决方案: css 里增加通配符 * { margin: 0; padding: 0; }
  2. IE6双边距问题;在 IE6中设置了float , 同时又设置margin , 就会出现边距问题解决方案:设置display:inline
  3. 当标签的高度设置小于10px 在IE6 IE7中会超出自己设置的高度 解决方案:超出高度的标签设置overflow:hidden (或设置行高小于我设置的高度)
  4. 图片默认有间距 解决方案:使用float浮动为img布局
  5. IE9以下浏览器不能使用opacity
  6. 边距重叠问题,当相邻的两个元素都设置了margin边距时,margin将取最大值舍弃最小值解决方案:为了不让边重叠,可以给子元素增加父元素,并在父元素身上设overflow:hidden
  7. 两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative ;且高度大于父元素,在IE6、IE7会被隐藏而不是溢出解决方案:父级元素设置position:relative

promise的返回值怎么接受

  1. .then .catch
  2. async await配合try catch
1.获取数据在哪个生命周期?---created
2.获取dom节点需要在哪个生命周期?---mounted获取dom节点(挂载后)
3.获取变更后的dom节点?---updated或使用this.$nextTick

双向数据绑定原理:

双向数据绑定通常是指我们使用的v-model指令的实现,是Vue的一个特性,也可以说是input事件和value的语法糖,vue通过v-model指令为组件添加上input事件处理和value属性赋值。

当我们修改input输入框中的值时,我们通过v-model绑定的值也会同步修改,基于上述原理,我们可以很容易的实现一个数据双向绑定的组件。

响应式原理

vue的核心特性之一,数据驱动视图,我们修改数据->视图随之响应更新

Vue2.x是借助Object.defineProperty()实现的,而Vue3.x是借助Proxy实现的 Proxy相比Object.defineProperty在处理数组和新增属性的响应式处理上更加方便

ES6 和ES5的继承有什么区别?

  • ES5的继承是通过prototype或构造函数机制来实现,实质上是先创建子类的实例对象,然后将父类的方法添加到this上
  • ES6实质上是先创建父类的实例对象this 然后再用子类的构造函数修改this ES6通过class关键字定义类,类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法

css3新增属性有哪些?

边框属性,边框颜色,rgba和透明度,text-shadow属性,border-radius属性 box-shadow 媒体查询 font face 如果改css中字体小字:transform: scale(0.9); /* 用缩放来解决 */

标准盒模型和怪异盒模型
  • 标准:宽,高+padding+border+margin
  • 怪异:宽度width(content+border+padding)+margin

### 谈谈你对匿名函数的了解(与普通函数的区别)

匿名函数没有名字,不能通过一个函数名引用他,所以不能像构造函数和普通函数那样多次被调用,如果将函数赋值给变量可以实现多次调用。 匿名函数通常用在将函数作为参数传递,将函数作为返回值返回,由于匿名函数没有函数名,只能将整个函数体当作参数或返回值。匿名函数通常用于事件绑定,匿名函数的返回值可以手动return任意类型的值

image.png 这是匿名函数

  • 立即执行函数:声明后立即执行的函数