前端知识点整理

HTML篇

1. 行内元素有哪些？块级元素有哪些？

行内元素：a span img input select
块级元素：div ul ol li dl dt dd h1 p

2. 页面导入样式时，使用link和@import有什么区别？

相同的地方，都是外部引用CSS方式
区别：

1. link是xhtml标签，除了加载css外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
2. link引用CSS时候，页面载入时同时加载；@import需要在页面完全加载以后加载，而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载
3. link是xhtml标签，无兼容问题；@import是在css2.1提出来的，低版本的浏览器不支持
4. link支持使用javascript控制去改变样式，而@import不支持
5. link方式的样式的权重高于@import的权重
6. import在html使用时候需要<style type="text/css">标签

3. 常见的浏览器内核有哪些？

Trident( MSHTML )：IE MaxThon TT The World 360 搜狗浏览器
Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)
Webkit：Safari Chrome

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

新增加了图像、位置、存储、多任务等功能。
新增元素：

1. canvas
2. 用于媒介回放的video和audio元素
3. 本地离线存储: localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
4. 语意化更好的内容元素，比如 article footer header nav section
5. 位置API：Geolocation
6. 表单控件，calendar date time email url search
7. 新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket
8. 拖放API：drag、drop
   移除的元素：
9. 纯表现的元素：basefont big center font s strike tt u
10. 性能较差元素：frame frameset noframes
    区分：
11. DOCTYPE声明的方式是区分重要因素
12. 根据新增加的结构、功能来区分

5. HTML5的文件离线储存怎么使用，工作原理是什么？

在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，如果是第一次访问，那么浏览器就会根据manifest文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，那么就会重新下载文件中的资源，并且进行离线存储。例如，
在页面头部加入manifest属性<htmlmanifest='cache.manifest'>

6.cookies，sessionStorage和localStorage的区别？

共同点：都是保存在浏览器端，且是同源的。
区别：
1.cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。
2.存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。
3.数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。
4.作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享

7. 元素的alt和title有什么异同？

在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。

8. HTML5为什么只需要写<! DOCTYPE HTML>？

HTML5不基于sgml，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。
而HTML4.01基于sgml，所以需要DTD进行引用，才能告知浏览器文档所使用的文档类型。

9. 简述readyonly与disabled的区别

readonly只针对input(text / password)和textarea有效。
而disabled对于所有的表单元素都有效，当表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去。

10. src和href的区别？

href是指网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。

11. iframe的优缺点？

缺点：
1、会阻塞主页面的onload事件（iframe和主页面共享链接池，而浏览器对相同域的链接有限制，所以会影响页面的并行加载）。
解决方法：通过js动态给iframe添加src属性值。
2、会增加http请求。
3、对搜索引擎不友好。
4、在移动端设备不能完全加载，会出现滚动条，影响用户体验。
优点：
1、解决加载缓慢的第三方内容如图标和广告的加载问题。
2、并行加载脚本。
3、程序调入静态页面比较方便。
4、页面和程序分离。

---

CSS篇

1. CSS的两种盒模型

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

image

在标准的盒子模型中, width指的是content部分

image

在IE盒子模型中, width指的是content+padding+border

2. 用纯 CSS 创建一个三角形

把上、左、右三条边隐藏掉（颜色设为transparent）

#demo{
    width:0;
    height:0;
    border-width:20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

3. 怎么让Chrome支持小于12px 的文字？

body{
    -webkit-text-size-adjust:none
}

4. 介绍一下 Sass 和 Less 是什么？它们有何区别？

Sass(SyntacticallyAwesomeStylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。Less一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数.LESS既可以在客户端上运行 (支持IE6+,Webkit,Firefox)，也可一在服务端运行 (借助Node.js)。区别：(1))Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器，也可以在开发环节使用Less，然后编译成Css文件，直接放到项目中，也有Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。(2)变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样，后面会讲到。(3)输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。(4)Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

5. CSS3有哪些新特性？

1. CSS3实现圆角（border-radius），阴影（box-shadow），
2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4. 增加了更多的CSS选择器 多背景 rgba
5. 在CSS3中唯一引入的伪元素是 ::selection.
6. 媒体查询，多栏布局
7. border-image

6. CSS实现水平居中:

1.定宽块级元素 margin: 0 auto
2.行内元素 父元素 text-align: center
3.不定宽块级元素
a.块级元素 <table style="margin: 0 auto">
b.块级元素display:inline，为父元素 text-align:center
c.不定宽块级元素 text-align: center

7. CSS实现垂直居中:

1.单行文本 父元素height与line-height设置为同值
2.多行文本
a.使用<table>标签
b.为块级元素添加display:table-cell;样式并设置vertical-align:middle

8. CSS实现水平垂直居中:(相:相对定位, 绝:绝对定位)

1. 父相子绝，上左50%，magin-top/left:-w/h(或transform:translate(-50%,-50%););
2. 父相子绝，子t/l/r/b = 0,margin:0 auto;
3. flex布局，父display: flex;justify-content: center;align-items: center;（写兼容）
4. table-cell布局，父display: table-cell;vertival-align: middle;text-align: center;

9. px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

10. position的值

absolute:生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位
fixed :生成绝对定位的元素，相对于浏览器窗口进行定位
relative:生成相对定位的元素，相对于其正常位置进行定位
static:默认值。没有定位
inherit:规定从父元素继承 position 属性的值

11. CSS优化、提高性能的方法

1、尽量将样式写在单独的css文件里面，在head元素中引用
2、不使用@import
3、避免使用复杂的选择器，层级越少越好
4、精简页面的样式文件，去掉不用的样式
5、利用CSS继承减少代码量
6、提高代码的可维护性
7、命名与备注
8、提取重复样式
9、统一书写顺序

12. CSS隐藏

opacity:0
display:none
visibility:hidden
position 定位到不可见的位置
width height 为0
z-index 躲在层其他后面

13.z-index层级问题

父元素z-index层级优先于子元素z-index层级

14.sass常见语法

选择器嵌套、属性嵌套、声明变量、插值语句 #{}（通过 #{} 插值语句可以在选择器或属性名中使用变量）、@import导入、@extend继承、@media ..............

15.响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）

---

JavaScript篇

1.创建1～100的数组，并筛选出偶数**

let arr1 = Object.keys(Array.from({length: 100})).map(i=>{
     return parseInt(i) + 1
}).filter(i=> {
     return i % 2 == 0
})

2.vue组件通信

常见使用场景可以分为三类：
父子通信：父向子传递数据是通过 props，子向父是通过 events（parent / attrs/emit、attrs/$listeners；localStorage

3.react常见知识点

4.mvc

Controller是MVC中的数据和视图的协调者，也就是在Controller（通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据）里面把Model（负责在数据库中存取数据）的数据赋值给View来显示
或者是View接收用户输入的数据然后由Controller把这些数据传给Model来保存到本地或者上传到服务器。

5.mvvm

6.vue双向数据绑定原理

vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。重点就是最后的属性描述符。属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。这两种对象只能选择一种使用，不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。

image

7.前端性能优化

在浏览器中输入url会经历域名解析、建立TCP连接、发送http请求、资源解析等步骤
1.CRP（关键渲染路径Critical Rendering Path）优化：
为尽快完成首次渲染，我们需要最大限度减小以下三种可变因素:
*关键资源的数量: 可能阻止网页首次渲染的资源。
*关键路径长度: 获取所有关键资源所需的往返次数或总时间。
*关键字节: 实现网页首次渲染所需的总字节数，等同于所有关键资源传送文件大小的总和。
2.优化 DOM：
*删除不必要的代码和注释包括空格，尽量做到最小化文件。
*可以利用 GZIP 压缩文件。
*结合 HTTP 缓存文件。
3.优化 CSSOM：
*减少关键 CSS 元素数量
*当我们声明样式表时，请密切关注媒体查询的类型，它们极大地影响了 CRP 的性能 。
4.优化 JavaScript：
*async: 当我们在 script 标记添加 async 属性以后，浏览器遇到这个 script 标记时会继续解析 DOM，同时脚本也不会被 CSSOM 阻止，即不会阻止 CRP。
*defer: 与 async 的区别在于，脚本需要等到文档解析后（ DOMContentLoaded 事件前）执行，而 async 允许脚本在文档解析 时位于后台运行（两者下载的过程不会阻塞 DOM，但执行会）。
*当我们的脚本不会修改 DOM 或 CSSOM 时，推荐使用 async 。
*预加载 —— preload & prefetch 。
*DNS 预解析 —— dns-prefetch 。

5.图片懒加载：
原理: 将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。注意，图片要指定宽高。
当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    img {
      display: block;
      margin-bottom: 50px;
      width: 400px;
      height: 400px;
    }
  </style>
</head>
<body>
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <script>
    let num = document.getElementsByTagName('img').length;
    let img = document.getElementsByTagName("img");
    let n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历

    lazyload(); //页面载入完毕加载可是区域内的图片

    window.onscroll = lazyload;

    function lazyload() { //监听页面滚动事件
      let seeHeight = document.documentElement.clientHeight; //可见区域高度
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
      for (let i = n; i < num; i++) {
        if (img[i].offsetTop < seeHeight + scrollTop) {
          if (img[i].getAttribute("src") == "Go.png") {
            img[i].src = img[i].getAttribute("data-src");
          }
          n = i + 1;
        }
      }
    }
  </script>

</body>

</html>

8.防抖节流

9.服务端渲染SSR和预渲染Prerender

10.vue性能优化

*引入生产环境的 Vue 文件
*使用单文件组件预编译模板
*提取组件的 CSS 到单独到文件
*利用Object.freeze()提升性能
*扁平化 Store 数据结构
*合理使用持久化 Store 数据
*组件懒加载
*服务端渲染 / 预渲染

11.类，继承，构造函数，原型链，闭包，add(1)(2)(3)，promise.all如何实现，防抖节流，scss函数写法，vue-router原理，函数式编程，flex:0,1区别，es6的class和之前有什么区别，vue2和vue3的区别, typeScript，自定义指令