前端（html、css、js）综合笔记（3）

2.重排，哪些属性会导致重排

js计算dom结构样式->计算style->layout->paint->composite

1.重排是DOM元素的几何属性变化，2.DOM树的结构变化，导致渲染树需要重新计算。
重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制。
1.重绘和重排的关系
重绘不会引起重排，但重排一定会引起重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。
Layout、composit
2.什么情况下会触发重排？

1)页面渲染初始化时；（这个无法避免）
2)浏览器窗口改变尺寸；
3)元素尺寸、位置、内容改变时；
6)添加或删除可见的DOM 元素时。

3.重排优化有如下五种方法（思路是减少dom修改次数或者让需要频繁操作的元素独立出来脱离文档）
1)将多次改变样式属性的操作合并成一次操作，减少DOM访问。
2)如果要批量添加DOM，可以先让元素脱离文档流，操作完后再带入文档流，这样只会触发一次重排。（fragment元素的应用）
3)将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
4)由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发两次重排。
5)在内存中多次操作节点，完成后再添加到文档中去。例如要异步获取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的html片段，再一次性添加到文档中去，而不是循环添加每一行。

5.预处理器sass的优点

sass可以进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。
他的优点在于他是一门编程语言，从而可以使用变量，逻辑和函数来对页面进行设计，更利于编程者的开发和维护。

6.事件捕获和冒泡

捕获，就是从触发节点所在的最外层元素起到触发节点所在的最内层元素都将节点上的捕获事件触发。
冒泡，就是从触发节点的最内层节点起到触发节点最外层节点触发冒泡事件。
中间状态，存在的意义是为了无差别触发捕获和冒泡事件。
dom事件级别：

0.直接为元素绑定单一事件
2.添加addEventListener
3.更多事件，鼠标、键盘、UI、焦点等等

应用：
事件委托。
``

7.require和import的区别

import和require都是被模块化所使用。
require多用于node,import则在浏览器和node都可以使用。
require/exports 是运行时动态加载,并且可以读取缓存避免多次加载，import/export 是静态编译。
import/export 不能对引入模块重新赋值/定义。
ES6 模块可以在 import 引用语句前使用模块，CommonJS 则需要先引用后使用。

require的核心概念：在导出的文件中定义module.exports，导出的对象类型不予限定（可为任意类型）。在导入的文件中使用require()引入即可使用。本质上，是将要导出的对象，赋值给module这个对象的exports属性，在其他文件中通过require这个方法来访问exports这个属性。

1.import的写法灵活，可以使用解构赋值
2.区别在于一个是值的拷贝，一个是值的引用
3.require是同步的，但是如果参数是数组就是异步的

import除了default内容不需要加{}，其他都要加，不管export一整个对象还是多次export

9.Eventloop

浏览器的内核是多线程的

• GUI 渲染线程
• JavaScript引擎线程
• 定时触发器线程
• 事件触发线程
• 异步http请求线程

…

• JS分为同步任务和异步任务
• 同步任务都在主线程上执行，形成一个执行栈
• 主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。
• 一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。

12.promise、console.log、setTimeout、执行顺序

promise和console.log按顺序执行。
setTimeout是异步任务，先放在队列中，等主线程空闲了才执行。

14.实现一个弹窗组件要注意什么

先搭建组件的html和css样式，遮罩层和内容层。
定制弹窗内容：弹窗组件通过slot插槽接受从父组件那里传过来弹窗内容。
定制弹窗样式：弹窗组件通过props接收从父组件传过来的弹窗宽度，上下左右的位置。
组件开关：通过父组件传进来的props控制组件的显示与隐藏，子组件关闭时通过事件**$emit触发父组件改变值**。

15.框架的好处和坏处

• 1.项目中存在一些没有必要的组件或模块，使得代码冗余，项目大小无形中变大了；
• 2.对不熟悉的框架代码调试难度大；
• 3.容易让人遗忘基础知识；
• 4.学习成本高；

16.单页面应用（SPA）与多页面应用（MPA）

概念：
SPA：只有一张Web页面的应用，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次。
MPA：多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载。

	SPA	MPA
组成	单个web页面和组件	多个完整页面
资源刷新	css、js等公用资源只加载一次，页面局部刷新	每个页面都要整页刷新和加载资源
用户体验	页面切换较为流畅，可以添加转场动画	切换不流畅，难以添加转场动画
传参	传参简单	传参依赖url、cookie、localstorage

17.pc端上传文件方式

1.form

<form action="/test/" method="POST" enctype="multipart/form-data">
    <p>名称：<input type="text" name="user"></p>
    <p>文件：<input type="file" name="testfile"></p>
    <p><input type="submit" value="提交"></p>
</form>

在后端要注意上传过来的文件是通过req.FILES.get() 方法接收的。
2.ajax或者jqury里的ajax

18.es6中class的底层实现

class的底层依然是构造函数。
首先执行构造函数，然后把构造函数之外的内容添加到对象的原型上。

类的实现

1.调用_classCallCheck方法判断当前函数调用前是否有new关键字。

function _classCallCheck(instance, Constructor) {
　// instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

2.将class内部的变量和函数赋给this。

3.执行constuctor内部的逻辑。

4.return this (构造函数默认在最后我们做了)。

19.clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

clientHeight：包括padding的height
offsetHeight：包括border的height
scrollHeight：包括padding的全文height
scrollTop：滚动条离顶部的距离
offsetTop：content离父元素顶部的距离

20.js异步加载的方法

JavaScript默认同步加载会影响页面渲染。另外，有些js文件是按需加载的。所以需要使用异步加载js的方法。
1.创建script，插入到DOM中，加载完毕后callBack

function loadScript(url, callback){
    var s = document.createElement('script');
    s.onload = function(){  //safari chrome opera firefox
        callback();
    } 
    s.src = url;
    document.head.appendChild(s);
}

2.async，异步加载，只能用于外部脚本，立即下载但不影响页面加载。
3.defer和async的区别
相同：与文档解析并行，不会阻塞页面
区别：
1.defer按顺序执行，async不保证按序
2.defer在html解析完之后，页面加载之前执行

21.setTimeout和setInterval,requestAnimationFrame的特点

requestAnimationFrame的回调执行时间确定，与屏幕刷新率相同

提升性能，防止掉帧

1. setTimeout 的执行时间并不是确定的。

2. 刷新频率受屏幕分辨率和屏幕尺寸影响，不同设备的屏幕刷新率可能不同， setTimeout 只能设置固定的时间间隔，这个时间和屏幕刷新间隔可能不同
   节约资源，节省电源
   当页面处于未激活的状态下，该页面的屏幕刷新任 务会被系统暂停

22.webworker与eventloop区别

webworker创建线程，eventloop创建队列。
webworker可以用来解决一些一些计算密集型或高延迟的任务，减轻主线程负担从而提高主线程的效率

23.RESTFUL

中文含义，表现层状态转化。
RESTful是一种架构方式和设计风格。如果一个架构符合 REST 的约束条件和原则，我们就称它为 RESTful 架构。、
rest的设计就是通过url设计资源、请求方法定义资源操作，通过accept决定资源的表现形式。

RESTful基本概念

• 在 REST 中，一切的内容都被认为是一种资源由 URI 唯一标识，url尽量用名词
• 使用统一的接口处理资源请求（POST/GET/PUT/DELETE），要有合适的返回值或错误信息
• url体现版本，体现api
• url提供参数提供过滤要求
• 尽量用https
• 设置响应码