发表更新前端进阶系列6 分钟读完 (大约833个字)

前端进阶系列—JS执行机制


一直以来，对JS的执行机制都是模棱两可，知道今天看了文章—《这一次，彻底弄懂JavaScript执行机制》和《Event Loop的规范和实现》，才对JS的执行机制有了深入的理解，下面是我的学习总结。

2个要点

  • JS是单线程语言
  • Event Loop是JS的执行机制，为了实现主线程的不阻塞，Event Loop就这么诞生了。

2个概念(结合Browser环境和Node环境)

  • task queue(宏任务队列)：setTimeout、setInterval、setImmediate、I/O、UI交互事件
  • microtask queue(微任务队列)：Promise、process.nextTick、MutaionObserver

看下图：

阅读更多
发表更新前端进阶系列17 分钟读完 (大约2486个字)

前端进阶系列—什么是执行上下文？什么是调用栈？

1
2
原文作者：Valentino
原文链接：https://www.valentinog.com/blog/js-execution-context-call-stack

什么是Javascript中的执行上下文？

我打赌你不知道答案。

编程语言中最基础的组成部分是什么？

变量和函数对吗？每个人都可以学习这些板块。

但除了基础知识之外还有什么？

阅读更多
发表更新前端进阶系列1 分钟读完 (大约174个字)

前端进阶系列—盒模型

盒模型是界面布局需要掌握的基本功。

盒模型基本概念

盒模型四要素：margin、border、padding、content。

盒模型分为：标准盒模型（W3C盒模型） 、 怪异盒模型（IE盒模型）

盒模型区别

怪异盒模型总宽度 = content + padding

阅读更多
发表更新前端进阶系列12 分钟读完 (大约1845个字)

前端进阶系列—flex布局

以下内容主要摘抄自阮一峰老师的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

背景

Flexbox布局（Flexible Box）模块（目前是W3C Last Call Working Draft）旨在提供更有效的布局方式，即使容器中的项目之间对齐和分配空间的大小未知或动态（因此单词“flex”）。

flex布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序），以最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。Flex容器扩展项目以填充可用空间，或缩小它们以防止溢出。

最重要的是，flexbox布局与方向无关，而不是常规布局（基于垂直的块和基于水平的内联块）。虽然那些适用于页面，但它们缺乏灵活性来支持大型或复杂的应用程序（特别是在方向更改，调整大小，拉伸，缩小等方面）。

注意： Flexbox布局最适合应用程序的组件和小规模布局，而Grid布局则适用于更大规模的布局。

阅读更多
发表更新前端进阶系列14 分钟读完 (大约2078个字)

前端进阶系列—css3新特性

什么是CSS?

层叠样式表（CSS）是一种向Web文档添加样式（例如，字体，颜色，间距）的简单机制。

什么是CSS3?

CSS3是CSS语言的最新发展，旨在扩展CSS2.1。它带来了许多新功能和附加功能，如圆角，阴影，渐变，过渡或动画，以及多列，灵活的框或网格布局等新布局。

现在让我们看看有哪些新东西？

CSS3选择器

阅读更多
发表更新前端进阶系列10 分钟读完 (大约1532个字)

前端进阶系列—HTML5新特性

HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。现在国内普遍说的 H5 是包括了 CSS3，JavaScript 的说法（严格意义上说，这么叫并不合适，但是已经这么叫开了，就将错就错了）。

语义特性

HTML5 赋予网页更好的意义和结构

  • 文件类型声明（<!DOCTYPE>）仅有一型：<!DOCTYPE HTML>。
  • 新的解析顺序：不再基于 SGML。
  • 新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。
  • input 元素的新类型：date, email, url 等等。
  • 新的属性：ping（用于 a 与 area）, charset（用于 meta）, async（用于 script）。
  • 全域属性：id, tabindex, repeat。
  • 新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
  • 移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。

本地存储特性

HTML5 离线存储包含：应用程序缓存（Application Cache）、本地存储、索引数据库、文件接口

阅读更多
发表更新 流口水流 前端进阶系列7 分钟读完 (大约1015个字)

前端进阶系列—常见布局及居中

水平居中布局

margin+定宽

1
2
3
4
5
6
7
8
9
10
<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .child {
    width: 100px;
    margin: 0 auto;
  }
</style>
  • 想必是个前端都见过，这定宽的水平居中，我们还可以用下面这种来实现不定宽

table+margin

1
2
3
4
5
6
7
8
9
10
<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .child {
    display: table;
    margin: 0 auto;
  }
</style>
阅读更多
发表更新前端进阶系列8 分钟读完 (大约1148个字)

前端进阶系列—SEO 和语义化

基本概念

SEO：(Search Engine Optimization)意为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目的网站的自然排名的方式。说白了就是对品牌的自我宣传，从而获取收益。

HTML 语义化：根据内容的结构的语义化，选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时利于 SEO 优化。

使用 SEO 和语义化的目的

前面也做了基本的阐述：

  • SEO 就是为了对品牌的自我宣传，从而获得收益；
  • 语义化的目的:
    • 在没有 css 的情况下，页面也能呈现出很好的内容结构，代码结构；
    • 提升用户体验：例如 title、alt 用于解释名词和解释图片信息；
    • 有利于 SEO 优化：和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重；
    • 方便其他设备解析如屏幕阅读器、盲人阅读器、移动设备；
    • 语义化更据有可读性，便于团队开发和维护。
阅读更多
发表更新前端进阶系列3 分钟读完 (大约487个字)

前端进阶系列

HTML/CSS 篇

  1. SEO 和语义化
  2. 常见布局及居中
  3. HTML5 新特性
  4. CSS3 新特性
  5. flex 布局
  6. 盒模型

JS 篇

  1. 什么是执行上下文
  2. JS 执行机制
  3. 从原型到原型链
  4. 词法作用域和动态作用域
  5. 变量对象
  6. 作用域链
  7. 从 ECMAScript 规范解读 this
  8. 闭包
  9. 参数按值传递
  10. call 和 apply 的模拟实现
  11. bind 的模拟实现
  12. new 的模拟实现
  13. 类数组对象与 arguments
  14. 创建对象的多种方式以及优缺点
  15. 继承的多种方式及优缺点

算法篇

  1. 各种排序，重点是块排
  2. 动态规划，参见背包问题
  3. 二叉树
阅读更多
关注我

标签

IoT1
SEO1
angular3
api1
css9
debug1
devtools1
docker1
git1
html9
html56
http1
javascript25
jenkins1
nginx1
react2
react native2
restful1
rxjs2
ubuntu1
vue2
前端3
布局1
算法1

归档

订阅更新

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.

最新文章

分类

链接

×