前端基础回顾-2-简单知识点

这是前端基础回顾的第二篇，记录一下一些简单的知识点，仅仅用于速记，详细的还是查看具体的一些文章吧。

开始

HTML

从浏览器地址栏输入 url 到请求返回发生了什么
url解析、缓存、dns解析、tcp链接、http请求、响应、渲染。
三次握手、四次挥手
- 三次握手
  客户端：我要发送
  服务端：接收到客户端信息
  客户端：接收到服务端信息
- 四次挥手
  客户端：我要关闭
  服务端：接收到客户端信息
  服务端：发送关闭信息
  客户端：接收到关闭信息
浏览器内容解析
dom树
css树
render树
布局计算
渲染
http缓存
- 强缓存
  - cache-control: max-age=xxx(最大时间s)
- 协商缓存
  - last-modified -> if-modified-since
  - etag -> if-none-match
get和post的区别
- get可以缓存
- get在url上
- get明文传输，不安全
- get一次性传输，post需要两次
跨域
- 同源策略
  域名(baidu.com) 协议(http) 端口(80)
- 简单请求
  - get post head
  - headers只有Accept、Accept-Language、Content-Language、Content-Type(application/x-www-form-urlencoded或者multipart/form-data或者text/plain)
  - 请求中直接带Origin: 192.168.x.x
    响应带
    Access-Control-Allow-Origin: 192.168.x.x 允许的域名
    Access-Control-Allow-Credential: true 允许携带cookie
    Access-Control-Allow-Headers 允许携带的headers
    Access-Control-Allow-Method 允许请求的方法
- 非简单请求
  - options请求预查
  - 响应带
    Access-Control-Max-Age: xxx options缓存有效时间，时间内允许直接发送正式请求
- 解决办法
  - 代理服务器，同源服务器代理客户端请求
  - nginx
    正向代理
    配置Access-Control-Allow-Origin: xxx
  - webpack
常用meta

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

<!DOCTYPE html>  H5标准声明，使用 HTML5 doctype，不区分大小写
<head lang="en"> 标准的 lang 属性写法
<meta charset="utf-8">    声明文档使用的字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>   优先使用 IE 最新版本和 Chrome
<meta name="description" content="不超过150个字符"/>       页面描述
<meta name="keywords" content=""/>      页面关键词者
<meta name="author" content="name, email@gmail.com"/>    网页作
<meta name="robots" content="index,follow"/>      搜索引擎抓取
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> 为移动设备添加 viewport
<meta name="apple-mobile-web-app-title" content="标题"> iOS 设备 begin
<meta name="apple-mobile-web-app-capable" content="yes"/>  添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telphone=no, email=no"/>  设置苹果工具栏颜色
<meta name="renderer" content="webkit">  启用360浏览器的极速模式(webkit)
<meta http-equiv="X-UA-Compatible" content="IE=edge">     避免IE使用兼容模式
<meta http-equiv="Cache-Control" content="no-siteapp" />    不让百度转码
<meta name="HandheldFriendly" content="true">     针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
<meta name="MobileOptimized" content="320">   微软的老式浏览器
<meta name="screen-orientation" content="portrait">   uc强制竖屏
<meta name="x5-orientation" content="portrait">    QQ强制竖屏
<meta name="full-screen" content="yes">              UC强制全屏
<meta name="x5-fullscreen" content="true">       QQ强制全屏
<meta name="browsermode" content="application">   UC应用模式
<meta name="x5-page-mode" content="app">    QQ应用模式
<meta name="msapplication-tap-highlight" content="no">    windows phone 点击无高光
设置页面不缓存
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

CSS

盒模型
box = content + padding + border + margin
- 标准盒模型(box-sizing: content-box)
  width = content
- 怪异盒模型(box-sizing: border-box)
  width = content + padding + border
优先级
!important > 内联 > id > class > tag
优先级 = (A, B, C, D)
- A
  内联，!important
- B
  #id
- C
  .class a[href=“http://”] :after
- D
  div ::after
样式属性继承
样式可被继承到子元素，比如font-size、font-weight、color等
margin重叠
垂直方向发生重叠
1. 相邻兄弟元素margin-top[bottom]重叠
  解决：设置BFC
2. 父margin-top和子margin-top重叠
  解决：设置父padding或border
3. 父高度auto的margin-bottom和子margin-bottom重叠
  解决：设置父高度
4. 本身无高度，上下margin重叠
  解决：设置padding或border
计算：
1. Math.max(+, +)
2. Math.abs(+ - Math.abs(-))
3. -Math.abs(Math.abs(-) - Math.abs(-))
设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别
- 设备像素
  物理像素，不可变
- css像素
  css像素=设备独立像素，相对单位，相对于设备像素
- dpr
  dpr = 设备像素 / 设备独立像素
  缩放会改变dpr
- ppi
  每英寸的物理像素密度，密度越大，分辨率越大
精灵图
合并图片，利用background-加载各个位置的小图
优点：
- 减少http请求
- 提高压缩比
  缺点：
- 动一图改全图

rem优缺点
优点：

屏幕适配
缺点：
有些不同dpr设备显示错误
iframe显示错误
ps:

!function() {
  function resize(){
    document.documentElement.style.fontSize = window.innerWidth / 540 /*设计稿的宽度*/ * 10 /*1rem = 10px*/ + "px"
  };
  resize()
  window.addEventListener("resize", resize)
}()

margin 无效
- 内联元素无效
- 内联替换元素垂直有效，无合并问题
- dispaly的table-row和table-cell无效
- 定高容器的子元素的margin-bottom和定宽容器的子元素的margin-right无效
min-width、max-width、width关系
min-width > max-width > width
line-height
数值、百分比、长度
继承：
数值直接继承
百分比和长度为计算后继承
text-indent
inline和替换元素无效
百分比相对包含块宽度
letter-spacing
字符间距
不支持百分比
支持负值
默认值normal

hello world
word-spacing
文件间空格间距

hello world
文本省略

单行行文本省略单行行文本省略单行行文本省略单行行文本省略单行行文本省略单行行文本省略单行行文本省略

多行行文本省略多行行文本省略多行行文本省略多行行文本省略多行行文本省略多行行文本省略多行行文本省略多行行文本省略多行行文本省略多行行文本省略多行行文本省略多行行文本省略

元素隐藏
- display: none
- opacity: 0
- visibility: hidden
- z-index: -1
重排和重绘
- 重排
  页面元素重新计算排列布局
- 重绘
  页面元素重新渲染
重排比重绘更消耗性能
- 避免
  - 统一修改样式
  - 临时存储需要计算的尺寸位置属性
  - 统一增删改dom元素
  - position脱离文档流
  - transform GPU 加速
BFC
用于绝对块极盒子的布局以及浮动相互影响的区域。
1. 块极盒子垂直方向排列
2. BFC内元素的上下margin会重叠
3. BFC计算高度时，浮动元素也会参与计算
4. BFC不会与浮动元素发生重叠
5. BFC外部元素不会影响到内部
6. BFC内部元素的左margin和border接触
创建BFC
- position: absolute fixed
- display: inline-block
- overflow: 不为visible

Javascript

基本数据类型
null、undefined、number、boolean、string、object、bigint、symbol
数据类型判断
1. typeof
  只能判断普通类型，引用类型无法判断
2. instanceof
  只能判断引用类型，无法区分继承的原型属性
3. Object.prototype.toString.call
  可以判断所有类型
作用域和作用域链
规定如何查找变量
从当前作用域不断向上寻找变量，直至到全局。
执行上下文
执行一段代码都会创建一个执行上下文，当中包括：
1. 变量
2. this
3. 作用域链
闭包
函数的内部的函数可以访问其外部的作用域。
- 作用
  1. 私有变量
  2. 全局变量污染
- 影响
  - 内存泄漏（无法GC）
event loop 事件流
javascript代码执行分为两个队列，宏任务和微任务，先执行一个宏任务，接着执行完所有的微任务，循环。
- 宏任务
  setTimeout、setInterval、DOM、request
- 微任务
  Promise、async/await、nextTick、Observer

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

点击查看答案

1 7 6 8 2 4 3 5 9 11 10 12

Promise
- all
  全部成功才是成功
- any
  有一个成功就是成功
- race
  最先完成的算完成
- allSettled
  全部处理完才结束
垃圾回收
- 引用次数清除
  计算对象引用次数，为0的清除。
- 标记清除
  活动对象打标，未标记的清除。
模块化
将多个不同的文件，按照一定规范进行划分，得到的一个个块。
- 规范
  - CommonJS
    同步加载
    可缓存
    值的拷贝，内部值改变不会影响到外部
    module.exports、exports.xxx = xxx、require
  - AMD
    异步加载
    define([module], callback)、require([module], callback)
  - CMD
    可同步(require)也可异步(require.async)加载
    使用时才加载(和AMD的区别)
    define(function(require, exports, module) {})
  - ESM
    ES6新规范
    静态化，编译时就确定依赖关系
    值的引用
    export default、 export const xxx = xx、import xx from xx
  - UMD
    通用模块规范，可以在任何环境运行
    立即执行函数内实现前面各个规范的兼容
性能优化
- 代码优化
  - 防抖节流
  - cssText
  - 重绘重排
  - 懒加载
  - 事件委托
- 构建优化
  - 代码压缩
  - gzip
  - cdn
- 其他
  - http2
  - 图片压缩
  - 减少请求
  - 缓存
this指向
- 普通函数
  不作为对象属性时，this指向全局
- 方法函数
  作为对象方法，this执行对象
- 构造函数
  作为构造函数，执行new前创建对象，this指向该对象
- call、apply、bind
  指向传入对象
json
function、undefined会被忽略
NaN变为null
offsetWidth、clientWidth、scrollWidth
clientWidth = width + padding
offsetWidth = width + padding + borderWidth + scrollBarWidth
scrollWidth = width + padding + scrollWidth
一道奇怪的题目

function Foo() {
  getName = function() {
    alert(1);
  };
  return this;
}
function getName() {
  alert(5);
}
Foo.getName = function() {
  alert(2);
};
Foo.prototype.getName = function() {
  alert(3);
};
var getName = function() {
  alert(4);
};

//请写出以下输出结果：
Foo.getName();
getName(); 
Foo().getName(); 
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

点击查看代码1

2 4 1 1 2 3 3

结束

结束🔚。

参考资料
从URL输入到页面展现到底发生什么？
做了一份前端面试复习计划，保熟～
这一次，彻底弄懂 JavaScript 执行机制
 聊聊跨域的原理与解决方法
 一道常被人轻视的前端JS面试题

面试

basic

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

前端基础回顾-3-手写源码上一篇

前端基础回顾-1-原型和原型链下一篇