【每日十分钟前端】基础篇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的操作。
阻塞:简单来说就是,我们调用了一个函数之后,在等待这个函数返回结果之前,如果当前的线程是处于挂起状态,那么就叫阻塞。
非阻塞:与阻塞相反,如果执行一个函数后,当前线程仍处于运行状态,就意味当前线程是可以的继续处理其他任务,但要时不时的去看下是否有结果了,这就是非阻塞。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值