前端知识框架

ybby
139 阅读6分钟

前端知识框架

html

1. html语义化

  • h5出现后，新增了很多语义化标签，比如header，footer，nav，article等，能够清楚的向浏览器或者开发者解释当前内容的意义。

    • 便于开发者阅读代码，清晰代码结构
    • 利于Seo蜘蛛爬取数据时对数据的理解

2. meta标签

  • meta标签由name和content两个属性来定义，来描述一个HTML网页文档的元信息，例如作者、日期和时间、网页描述、关键词、页面刷新等，除了一些http标准规定了一些name作为大家使用的共识，开发者也可以自定义name

3. 前端数据存储的方式

面试官：前端有哪几种数据存储方式？（基础题）

主要的存储方式有Cookie、LocalStorage、SessionStorage、IndexedDB、WebSQL，它们的优缺点如下：

  • Cookie：在HTML5标准前本地储存的主要方式

    • 优点是兼容性好，请求头自带cookie方便可以和服务端进行交互
    • 缺点是大小只有4k，请求头携带cookie浪费流量，每个domain限制20个cookie，JS无法直接操作，需要自行封装

  • LocalStorage：以键值对为标准的数据存储方式

    • 优点是操作方便，永久性储存（除非手动删除），大小为5M
    • 缺点是兼容IE8+

  • SessionStorage：与localStorage基本类似，区别是**sessionStorage当页面关闭后会被清理

    • 优点是会话级随存随取，不占用本地空间，操作方便
    • 缺点是不能在所有同源窗口中共享，是会话级别的储存方式，兼容IE8+

  • IndexedDB：是被正式纳入HTML5标准的数据库储存方案，它是NoSQL数据库，用键值对进行储存，可以进行快速读取操作

    • 优点是存储量更大，非常适合web场景，同时支持JS进行操作，非常方便
    • 缺点是兼容性IE8+

  • WebSQL：类似SQLite，是真正意义上的关系型数据库，用sql进行操作

    • 优点是关系型数据库，适合大型的离线web应用
    • 缺点是JS需要通过transaction操作sql，火狐浏览器不支持

4. script的async与defer区别

浏览器在解析html时遇到script标签会停止解析，先去下载执行js文件，再继续解析，所以如果该标签至于html前面会影响html解析给用户带来不好体验，而async与defer就是处理这个事情。

  • defer：defer加载完成时会等到dom解析完毕执行 （当dom加载完会执行DOMContentLoaded事件，defer标签未加载或未执行完，将推迟该事件执行，直到defer标签加载执行完才会触发该事件 ），这就相当于将script标签放在html文档底部，且defer按原本script标签出现顺序执行

  • async：async加载完毕立即执行，所以js执行顺序与标签出现顺训很有可能不一样（js创建的脚本默认都是以async加载的）

  • ps：

    • 二者都是使得script标签异步加载，加载时不阻塞dom解析
    • 且对内联js脚本不起作用（）
    • 脚本内不可是用document.write
    • 二者都会阻塞onload事件（onload意味着所有依赖资源加载完成执行）
    • defer阻塞DOMContentLoaded事件，async不阻塞（DOMContentLoaded：当dom资源下载解析完执行该事件，此时css图片等资源可能未加载完成）
    • defer与async同时出现，async优先级更高，除非浏览器不兼容async，则以defer为准。

5. 块级元素和行内元素

块级元素

每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。 常见的块级元素有：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li> 等

  • 块级元素的特点：

    • 块级元素会独占一行
    • 高度，行高，外边距和内边距都可以单独设置
    • 宽度默认是容器的100%
    • 可以容纳内联元素和其他的块级元素

行内元素

行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度，高度以及对齐等属性。 常见的行内元素有：<a>,<strong>,<b>,<em>,<del>,<span>等

  • 行内元素的特点：

    • 和相邻的行内元素在一行上
    • 高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效
    • 默认的宽度就是它本身的宽度
    • 行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）

行内块级元素

在行内元素中有几个特殊的标签，<img/>,<input/>,<td/>,可以设置它们的宽高度以及对齐属性

  • 行内块级元素的特点：

    • 和相邻的行内元素（行内块）在一行上，但是中间会有空白的间隙
    • 默认的宽度就是本身内容的宽度
    • 高度，行高，内边距和外边距都可以设置

相互转换

  • 块转行内：display-inline；
  • 行内转块：display：block；
  • 块，行内元素转换为行内块：display：inline-block

css

1. css选择器优先级

onClick

2. flex布局

阮一峰

3. 经典css问题

两栏布局和三栏布局

CSS-水平居中、垂直居中、水平垂直居中

4. bfc

bfc

5.浏览器重绘（Repaint）和回流（Reflow）

回流必将引起重绘，重绘不一定会引起回流。

重绘（Repaint） 当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility 等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

回流（Reflow） 当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。 会导致回流的操作：

  • 页面首次渲染
  • 浏览器窗口大小发生改变
  • 元素尺寸或位置发生改变元素内容变化（文字数量或图片大小等等）
  • 元素字体大小变化
  • 添加或者删除可见的 DOM 元素
  • 激活 CSS 伪类（例如:hover）
  • 查询某些属性或调用某些方法

js

1. 时间循环，宏任务，微任务

react

请简单谈一下react的事件机制

  • 当用户在为onClick添加函数时，React并没有将Click时间绑定在DOM上面。

  • 而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React将事件内容封装交给中间层SyntheticEvent（负责所有事件合成）

  • 所以当事件触发的时候，对使用统一的分发函数dispatchEvent将指定函数执行。

vue

浏览器

avatar
文章
阅读
粉丝