您的位置: 首页  >  文章  >  前端面试知识简单学习

前端面试知识简单学习

分类: 文章 • 2025-03-26 23:21:09

HTML 属于结构层，负责描绘出内容的结构。

CSS 属于表示层，负责如何显示有关内容。

JavaScript 属于行为层，负责内容应如何对事件做出反应。

HTML5 新标签

HTML5 中新增标签大致有：<header>、<footer>、<aside>、<nav>、<video>、<audio>、<canvas>等等。

常见浏览器及其内核

 前端面试知识简单学习 

国内一些浏览器使用较多的是 Webkit 内核。

针对不同浏览器内核，HTML 辨别：

  • IE 内核浏览器识别：<!--[if IE]><![endif]-->
  • 非 IE 内核浏览器识别：<!--[if !IE]><![endif]-->

针对不同浏览器内核，CSS 辨别：

/* 设置文字不可选取 */ * { -moz-user-select: none; /* 火狐 浏览器 */ -webkit-user-select: none; /* Webkit 浏览器 */ -o-user-select: none; /* Opera 浏览器 */ -ms-user-select: none; /* IE10 浏览器 */ -khtml-user-select: none; /* 早期浏览器 */ user-select: none; /* 默认 */ }

 cookies、session、sessionStorage、localStorage

  • cookies：存储于浏览器端的数据。可以设置 cookies 的到期时间，如果不设置时间，则在浏览器关闭窗口的时候会消失。
  • session：存储于服务器端的数据。session 存储特定用户会话所需的属性和配置信息。
  • cookies 和 session 的区别在于：
  1. cookies 数据存放在客户的浏览器上，session 数据存放在服务器上。
  2. 前端都是裸君子，没有安全可言，cookies 可能会被黑客利用作数据欺骗。所以重要信息记得存 session。
  3. session 如果在生效期内量过大，会占用服务器性能。
  4. 单个 cookies 保存的数据不能超过 4 K，很多浏览器限制一个站点保存最多 20 个 cookies。
  • sessionStorage：生命周期存在于标签页或窗口，用于本地存储一个会话（session）中的数据，这些数据会随着窗口或者标签页的关闭而被清空。
  • localStorage：生命周期是永久的，除非用户主动清除浏览器上存储的 localStorage 信息，否则它将会永久存在。
  • sessionStorage 和 localStorage 操作方法：setItem、getItem 以及 removeItem。

以 localStorage 为例：

localStorage.getItem('name'); // 获取 name 的值 localStorage.setItem('name', 'jsliang'); // 设置 name 的值为 jsliang localStorage.removeItem('name'); // 删除 name 的值

 

CSS 盒模型

在工作的过程中，也许小伙伴需要 div 块的总宽度为 100px，然后发现总是被 margin 撑高，这是因为盒模型定义的问题：

CSS 中有个属性叫 box-sizing。

box-sizing: border-box box-sizing: content-box

  • border-box 中，整个 div 的宽、高，包括 margin、padding、border。
  • content-box 中，整个 div 的宽、高，则不包括上面元素。

前端面试知识简单学习如上图，如果一个 div ，你的代码如下：

div { box-sizing: border-box; margin: 10px; width: 100px; height: 100px; padding: 10px; }

那么，你的整个宽高还是 100px。

但是，如果你的代码如下：

div { box-sizing: content-box; margin: 10px; width: 100px; height: 100px; padding: 10px; }

那么，你的整个盒子宽高是 120px。

如果你在设计页面中，发现内容区被撑爆了，那么，请检查下现在的 border-box 是什么，最好在引用 reset.css 的时候，就对 border-box 进行统一设置，方便管理。

CSS 单位

在 CSS 中，除了我们常用的 px，还有其他单位小伙伴们可以了解一下：

前端面试知识简单学习

CSS 选择器

选择器是匹配元素的一种模式。

  • 关于 CSS 解析器：

HTML 经过解析生成 DOM Tree；而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。

Render Tree 中的元素与 DOM 元素相对应，但非一一对应：一个 DOM 元素可能会对应多个 renderer，如文本折行后，不同的「行」会成为 render tree 种不同的 renderer。也有的 DOM 元素被 Render Tree 完全无视，比如 display:none 的元素。

在建立 Render Tree 时，浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果来确定生成怎样的 renderer。对于每个 DOM 元素，必须在所有 Style Rules 中找到符合的 selector 并将对应的规则进行合并。选择器的「解析」实际是在这里执行的，在遍历 DOM Tree 时，从 Style Rules 中去寻找对应的 selector。

  • CSS 解析顺序

在 CSS 的选择器中，它会按照优先级 从右向左解析，因为这样匹配元素的时候，能尽量少地查找，所以选择器最好写地简洁一点。

  • CSS 常用选择器
  1. 通配符：*
  2. ID 选择器：#ID
  3. 类选择器：.class
  4. 元素选择器：p、a 等……
  5. 后代选择器：p span、div a 等……
  6. 伪类选择器：a:hover 等……
  7. 属性选择器：input[type="text"] 等……
  8. 子元素选择器：li:firth-child、p:nth-child(1) 等……
  • CSS 选择器权重

!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认

CSS3 新特性

经典：CSS3 相关属性你了解吗，说说都有哪些？能说说你工作中常用的一些 CSS3 属性吗？

那么，CSS3 新特性都有哪些呢？

  • transition：过渡
  • transform：旋转、缩放、移动或者倾斜
  • animation：动画
  • gradient：渐变
  • shadow：阴影
  • border-radius：圆角

行内元素和块级元素

行内元素：宽度和高度由内容决定，与其他元素共占一行的元素，我们将其叫行内元素。例如：<span>、<i>、<a> 等……

块级元素：默认宽度由父容器决定，默认高度由内容决定，独占一行并且可以设置宽高的元素，我们将其叫做块级元素。例如：<p>、<div>、<ul> 等……

在日常开发中，我们经常使用 CSS 的 display 属性来打破两者的壁垒：display: inline-block，使它们拥有更多的状态。

水平居中：

  • 行内元素：display: inline-block; text-align: center;
  • 块级元素：margin: 0 auto;
  • Flex：display: flex; justify-content: center;

垂直居中：

  • 行高 = 元素高：line-height: height
  • Flex：display: flex; align-items: center;

前端三座大山

原型与原型链

作用域和闭包

异步和同步

  • 首先我们尝试使用递归去解决深拷贝：
  • 使用 JSON 对象的 parse 和 stringify
  • 防抖与节流
  • 重绘与回流
  • 浏览器解析 URL
  • DNS 域名解析
  • TCP 三次握手与四次挥手
  • 浏览器渲染页面
  • ES6
    • 说说 let、var、const 区别
    • 讲讲 Promise 及其使

数组操作

在 JavaScript 中，用得较多的之一无疑是数组操作，这里过一遍数组的一些用法：

  • map: 遍历数组，返回回调返回值组成的新数组
  • forEach: 无法break，可以用try/catch中throw new Error来停止
  • filter: 过滤
  • some: 有一项返回true，则整体为true
  • every: 有一项返回false，则整体为false
  • join: 通过指定连接符生成字符串
  • push / pop: 末尾推入和弹出，改变原数组， 返回推入/弹出项
  • unshift / shift: 头部推入和弹出，改变原数组，返回操作项
  • sort(fn) / reverse: 排序与反转，改变原数组
  • concat: 连接数组，不影响原数组， 浅拷贝
  • slice(start, end): 返回截断后的新数组，不改变原数组
  • splice(start, number, value...): 返回删除元素组成的数组，value 为插入项，改变原数组
  • indexOf / lastIndexOf(value, fromIndex): 查找数组项，返回对应的下标
  • reduce / reduceRight(fn(prev, cur)， defaultPrev): 两两执行，prev 为上次化简函数的return值，cur 为当前值(从第二项开始)

 

 

原文链接：https://juejin.im/post/5c8e4cd3f265da67c87454a0

相关推荐