【每日十分钟前端】基础篇17，HTML全局属性、CSS工程化的理解、JS中的同步和异步

1、[HTML] HTML 全局属性（Global Attribute）有哪些？
2、[CSS] CSS工程化的理解
3、[JS] JS中的同步和异步

---

1、HTML 全局属性（Global Attribute）有哪些？

html5新属性：
contenteditable，指定元素内容是否可编辑。
contextmenu，规定了元素的上下文菜单。当用户右击元素时将显示上下文菜单（Firefox 浏览器支持）。
data-*，存储私有页面后应用的自定义数据。
draggable，规定元素是否拖动。
hidden，对属性进行隐藏。
spellcheck，<element spellcheck="true|false">规定是否对元素内容进行拼写检查。
accesskey，规定激活元素的快捷键（不同操作系统中访问方式不同）。
class，元素的类别。
dir，规定元素内容的文本方向。
id，元素的唯一id。

旧元素：
lang，<html lang="en"></html>元素内容的语言代码。
style，规定元素的行内样式。
tabindex，规定当使用 “tab” 键进行导航时元素的顺序。
title，规定关于元素的额外信息。

2、CSS 工程化的理解

工程化指遵循一定的标准和规范，提高开发效率、降低成本、保证质量的一种手段。

Web开发有模块化的趋势，组件化是前端开发的主流之选和发展方向，以组件为单位开发有着可在这种组件化趋势的背景下，css模块化也渐渐有着各种尝试。

css存在的问题：

（1）、类名存在冲突，命名难
过深的层级不利于编写、阅读、压缩、复用。
过浅的层级容易导致类名冲突。
当css部分越发庞大的时候，这个问题越发突出。

（2）、选择器的全局污染问题
改了一个地方，影响到别的地方。

（3）、重复样式难以复用
一些重复的样式不断地出现在css代码当中，维护受阻，比如要修改整个网站的色调。

（4）、css文件细分问题
大型项目中，css的拆分有利于代码的维护，但是实际情况中需要css文件越少越好。

解决：

（1）、css in js
通过一个函数返回一个样式对象。
用js对象表示css，然后把样式直接应用在元素的style中。
比如react中的应用，react是组件化的，强行把html、css、js写在了一起。

（2）、css module
css模块化方案，编写简单绝不重名

（3）、预编译器和后处理
预处理：sass、less、stylus
后处理：是对原生css进行处理并最终生成css的处理器，广义上还是一个预处理器，与上面不同的是，它处理的对象是标准的css，经典的有：clean-css压缩css、AutoPrefixer自动添加CSS3属性各浏览器的前缀、Rework取代Stylus的插件化框架、Postcss

（4）、css细分问题解决
依靠构建工具，比如webpack

3、JS中的同步和异步

同步

按顺序执行。
发出一个操作，在没有得到结果之前，不返回或继续执行下一个操作，即一个一个来，上一个完成了才能继续下一个。
所有操作都做完，才能返回结果。
（微信聊天，我给你发消息，你不回我我就发不了下一条）

异步

不完全按顺序执行，不连续的执行。
发出一个操作A后，在没有得到结果前，可以继续进行后面的操作，等A返回结果后通知操作者。
不用等所有操作都做完，就响应用户请求。
（微信聊天，我可以给你同时发很多消息，等你什么时候看到了什么时候回我）

js是单线程

js是单线程的，他是浏览器的脚本语言，主要用于负责与页面的交互，以及操作dom，在同一段时间内，只能处理一个任务，干一件事，然后再去处理下一个任务，浏览器解析网页中的js是逐行进行，从上往下的。

异步、阻塞与非阻塞

在解析一些任务是需要耗费时间的（上传、下载等）如果按照普通的同步方式，就会阻塞代码，主线程任务没有做完，下面的任务不会执行。

浏览器解析js代码，当遇到异步任务时，不会僵持在哪里不懂，会继续执行主线程的任务，并会在服务器处理完时通知你。

常见得异步操作

1、普通事件/事件绑定：click、resize等；
2、资源加载：load、error等；
3、定时器：setTimeout、setInterval等；
4、Ajax；
5、回调函数：promise、async/await、generator；

同步js的实现

js只有一个调用栈，具有LIFO结构，先进后出。

异步js的实现

通过事件循环/事件轮询实现异步。
不断的重复获得任务、执行任务、再获取任务、再执行。

js执行机制

1、先执行执行栈中的同步任务；
2、当遇到异步任务，将其放入回调函数队列中，继续执行下面的同步任务；
2、异步任务（回调函数），异步进程处理，将其放入回调函数队列中；
3、一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取回调函数队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
当将放入执行栈的异步任务也执行完后，主线程还会去任务队列查看是否还有任务可执行。

补充：

进程

它是系统程序在执行过程中进行资源分配和调度的一个基本单位，具有一定独立功能的程序关于某个数据集合上的一次运行活动，可以粗俗的理解为主任务，简单来说就是电脑每运行一次程序就是一个进程。

线程

进程的一个执行单元，它的子集，是操作系统能够进行运算调度的最小单位。

一个程序有一个进程，一个进程可以有多个线程并发执行（至少一个线程）

进程与线程的区别：

进程和线程的主要差别在于，他们是不同的操作系统资源管理方式，进程有独立的地址空间，一个进程崩溃后，在保护模式下不会对其他进行产生影响。
线程有自己的栈堆和局部变量，但线程之间没有单独的地址空间，一个线程死掉就等于整个进程死掉，所以多进程的程序要比多线程的程序健壮。但进程切换时，耗费资源较大，效率要差一些。
对于一些要求同时进行，且要共享某些变量的并发操作，只能用线程，不能用进程。

为什么需要异步

同步容易阻塞，只能等待上一次任务完成了，才能接着做下一个任务。如果上一步时间太长，对于用户来讲就意味着“卡死”。

阻塞和非阻塞

阻塞和非阻塞，通常指的是针对IO的操作。
阻塞：简单来说就是，我们调用了一个函数之后，在等待这个函数返回结果之前，如果当前的线程是处于挂起状态，那么就叫阻塞。
非阻塞：与阻塞相反，如果执行一个函数后，当前线程仍处于运行状态，就意味当前线程是可以的继续处理其他任务，但要时不时的去看下是否有结果了，这就是非阻塞。