Web前端开发入门

Posted 2022-12-05 这波lucio来全学了

浏览器工作原理

浏览器的工作原理：新式网络浏览器幕后揭秘

理解浏览器工作原理，包括浏览器的构成和渲染引擎的工作方式等。

这里简单提取了笔记，方便复习的时候快速过一遍。
https://blog.csdn.net/qq_18738333/article/details/87382924

javascript

入门

随便选个傻瓜教程过一遍

智能社:JavaScript-从入门到精通

JavaScript教程-廖雪峰

进阶

学一些可以装逼的名词

JS 函数式编程指南

js版本

兼容浏览器和移动端设备（如ios9.x不支持ES6）需要知道的，以及var和let等等这些面试会问到的基础问题

浅谈JavaScript、ES5、ES6

前端面试题：JS中的let和var的区别

类型工具

JS 静态类型检查工具 Flow

认识 Flow

compile to js语言

主要为了解决js的类型检查等问题，为了更好地支持复杂应用的开发。

TypeScript作为JavaScript的超集，能很好兼容工程中原本的js代码，layabox游戏引擎用TS开发的体验比用JS好很多。

TypeScript 的崛起

TypeScript 入门教程

未来是flutter的！！

Dark有空还是要看一看的。

Dart programming language | Dart

html

几乎不用学

CSS

相对单位em和rem，看下《CSS in Depth》第二章《Working with relative units》的系列译文。

别说你懂CSS相对单位

1. 如何更愉快地使用em
2. 如何更愉快地使用rem
3. 视口相关单位的应用
4. 无单位数字和行高
5. CSS自定义属性

Flex 布局教程：语法篇

Flex 布局，可以简便、完整、响应式地实现各种页面布局。Flex 布局将成为未来布局的首选方案。

前端布局基础概述

1. 前端布局方案主要有三种：

• 传统布局方案（借助浮动、定位等手段）
• flex布局方案
• grid布局方案

2. IE盒模型和W3C盒模型的区别：

IE盒模型宽高计算的是border-box，W3C盒模型计算的是content-box。

盒模型选择：默认(W3C)优于配置，如果非要用IE盒模型，注意引用的外部组件是否发生错误。

在封装组件时，记得强声明box-sizing，哪怕你使用默认的content-box。

3. 元素的分类及其布局特性

block-level（块级）元素、inline-level（行内级）元素和inline-block-level（行内块级）元素。

块级元素：display属性取block、table、flex、grid和list-item等值的独占一行显示的元素。

行内级元素：display属性取inline值的可在同一行内排列显示的元素。

行内块级元素：display属性取inline-block、inline-table、inline-flex和inline-grid等值的兼具块级元素和行内级元素布局特性的元素。（特性为行内级元素+可以设置任何尺寸属性（但width默认为0））

4. 格式化上下文

格式化上下文，它指的是具有某种CSS格式化规则（布局规则）的上下文环境，在这个上下文环境内的所有子元素，都将根据其特定的CSS格式化规则来进行排列。

常见的格式化上下文有BFC（CSS2.1 规范）、IFC（CSS2.1 规范）、 FFC（CSS3规范新增）和GFC（CSS3规范新增）。

BFC, 全称是block formatting context，它是一个独立封闭的渲染区域，在这个区域内的所有元素，从区域的顶部起，一个接一个地根据自身的布局特性进行排列：在这个区域内的块级元素 ，按从上到下的顺序显示，相邻的块级元素可以使用margin隔离，但在垂直方向上相邻的块级元素会发生margin合并；在这个区域内的inline-level或inline-level-block元素，则按从左到右的顺序显示。

触发条件：

只要元素满足下面任一条件即可触发 BFC 特性：

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

IFC, 全称是inline formatting context，其内部的元素，在水平方向上，一个接一个地显示；在垂直方向上，每个元素可以设置不同的对齐方式；IFC内部的元素，被一行行的矩形框所包含，这些虚拟的矩形框，我们称为行框（line box）。

FFC（flex formatting context）和GFC（grid formatting context），分别是flex布局和grid布局的内容。

5. 包含块

我们在设置元素尺寸属性（width、height、padding、margin和border）的百分比值或偏移属性（top、right、bottom和left）的值时，通常会有一个“相对参考系”，这个就是包含块。

• static和relative定位元素的包含块，为其块级祖先元素（通常是块级父元素）的content box；
• absolute定位元素的包含块，为最近的非静态定位祖先元素的padding box，查无非静态定位祖先元素，那么它的包含块是ICB（即根元素的包含块，也称为初始包含块）；
• fix定位元素的包含块，为当前viewport（视窗）；

详细细节看文章，很详细。

HTTP

HTTP cookies

HTTP Cookie（也叫Web Cookie或浏览器Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。

理解OAuth 2.0

OAuth是一个关于授权（authorization）的开放网络标准，在全世界得到广泛应用，目前的版本是2.0版。

HTTP 缓存

每个浏览器都自带了 HTTP 缓存实现功能。 您只需要确保每个服务器响应都提供正确的 HTTP 标头指令，以指示浏览器何时可以缓存响应以及可以缓存多久。

前端模块化

前端模块化详解(完整版)

了解各种模块化规范

个人认为没有历史包袱的话，用webpack实现模块化是最好的选择。

vue.js

Vue.js

完美的编程体验，如果准备开始一个新的前端项目，这是最好的选择。期待vue.js 3.0。

Vue.js 技术揭秘

高质量的源码解读，带教学视频。

前端监控

上报性能数据和错误信息等，用于快速发现和定位问题。

各种平台很多，接入也都比较简单。

工具

Chrome 开发者工具

神器，功能多到学不完。