前端笔记

1. cookie，sessionStorage和localStorage

都是用来在客户端存储数据以减小不必要的服务端开销
cookie：最大为4096字节(4KB)，但一般存储不应超过4095字节。会自动向服务端提交，每次与服务端交互都会传输cookie，cookie要指定作用域，不能跨域使用
sessionStorage:临时存储，在浏览器关闭后即清除数据
localStorage：永久存储，用户不主动清除会永久存储在客户端
sessionStorage和localStorage存储空间比cookie大得多，一般都有5M左右，大数据存储还是要靠服务器，云存储，数据库等。

2.HTTP

(1)CGI和MIME Type

CGI：Common Gateway Interface，用来处理客户端和服务器交互的一种工具，如获取客户端提交的表单内容给服务器进行处理或将服务器处理信息返回给客户端，CGI工具负责使网页具有交互功能。
MIMEType：客户端和服务器交互内容的类型，如HTML、GIF、Flash等。

(2)HTTP无连接，媒体独立，无状态

无连接：每次只处理一个客户端请求，处理完毕后立即断开，节省时间
媒体独立：HTTP可发送任何类型内容，并通过MIME Type指定内容类型
无状态：对处理过的请求没有任何记忆能力，若后续处理需要先前处理过的信息，则它必须要重传

(3)请求与响应

请求方式有8种：
OPTIONS，HEAD，GET， POST， PUT， DELETE，Request-URI ，TRACE，CONNECT
实际应用中常用的也就是 get 和 post，其他请求方式也都可以通过这两种方式间接的来实现。

请求与响应都分为4部分
请求：
请求行：|请求方法(GET、POST等)|空格|URL(www.baidu.com)|协议版本(HTTP/1.1)|回车符|换行符|
请求头部：|头部字段名|:|值|回车符|换行符|(User-Agent: curl/7.16.3 libcurl/7.16.3 OpenSSL/0.9.7l zlib/1.2.3)
                    |头部字段名|:|值|回车符|换行符|(Host: www.example.com)
                     ......
                    |头部字段名|:|值|回车符|换行符|(Accept-Language: en, mi)
空行：|回车符|换行符|
请求数据：
响应：
状态行：HTTP/1.1 200 OK
消息报头：date: Mon, 10 Feb 2020 15:32:49 GMT
                     content-type: text/css
                     content-length: 7048
空行：
正文：......

(4)响应状态码

常用状态码
200：请求成功
301：资源(网页等)被永久转移到其他URL
404：请求的资源(网页等)不存在
500：服务器内部错误
状态码分类
1**：信息，服务器接收到请求，需要请求者继续执行操作
2**：成功，操作被成功接收并处理
3**：重定向，需要进一步的操作以完成请求
4**：客户端错误，请求包含语法错误或无法完成请求
5**：服务器错误，服务器在处理请求过程中出现错误

(5)同源和跨域

同源：域名、协议、端口完全相同
跨域：域名/协议/端口有其中的一样不同
不是同源的网络请求会存在跨域问题，这是为了保护用户信息安全。解决跨域问题需要服务器端配合，可用jsonp和cors解决
jsonp：兼容性好，但仅支持GET请求，数据量小。原理是通过创建不受跨域限制的标签( //服务端，服务端我用express搭建的服务器，监听在3030端口 var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); var ws = require('ws'); let wss = new ws.Server({port: 3000}); wss.on("connection", (wss) => { wss.on('message', (message) => { console.log("服务端收到消息：" + message); }); wss.send("Hello Client!"); setTimeout(() => { wss.send("这是5s后的消息！"); }, 5000); }) var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'hbs'); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); // catch 404 and forward to error handler app.use(function(req, res, next) { next(createError(404)); }); // error handler app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get('env') === 'development' ? err : {}; // render the error page res.status(err.status || 500); res.render('error'); }); app.listen(3030, () => { console.log("Server is listening on port 3030!"); })

执行结果

webSocket打开

客户端接收到服务器发来的消息

客户端接收到5s后服务器发来的消息

(24)WEB应用从服务器主动推送Data到客户端的方式

webSocket
Ajax长轮询：向服务器发送一次请求，服务器端得到数据或超时后返回并关闭连接，客户端接收到消息或发生错误后重新向服务器端发送请求
使用iframe实现长连接

4.网站运行相关

(1)进程与线程的区别

简单来说，一个程序至少有一个进程，一个进程至少有一个线程
线程划分尺度更小，并发性更高
进程具有独立的内存单元，多线程共享内存
线程不能独立执行，必须依存于应用程序控制
多线程的意义在于在一个应用程序中多个可执行部分可同时执行，但系统不会将多线程当作多进程分配资源

(2)如何对网站的文件和资源进行优化

合并文件，减少http请求，如利用css sprites合并小图标，实现一次性请求
使用CDN托管，CDN一般会有缓存，当缓存未过期时，不需要重复请求
文件压缩，gzip压缩，express启用gzip压缩需要用到compression模块
尽量精简js和css文件，并尽量从外部引入
使用缓存，如DNS缓存，浏览器缓存
使用Last-Modified和If-Modified-Since，若检测文件修改时间小于最后修改时间则直接返回，无需重复请求

(3)减少页面加载时间的方法

优化图片
合理选择图片格式
合并小图片，小文件
优化js代码和css样式，使之最简化
表明宽度和高度，否则浏览器会一边加载一边计算，影响速度与体验

(4)测试代码性能工具

Profiler
JSPerf(http://jsperf.com/ckcktest)
Dromaeo

(5)FOUC(无样式内容闪烁)

FOUC：Flash of Unstyled Content
产生FOUC原理：CSS样式表比HTML后加载，加载到CSS时会重新渲染，若浏览器是等待html和css全部加载完毕后再渲染就会产生白屏；若浏览器(如IE)先加载html，加载到css后再重新渲染，就会导致闪烁。
可能产生FOUC的原因：
CSS文件被放到最后
使用@import引入CSS，因为@import引入的CSS文件会最后加载
多个样式文件处于不同位置，加载到当前CSS时就会重新渲染
解决办法：
使用link标签在head中引入样式表
在head中添加link或script标签(暂时不知道具体原理)

(6)JS延迟加载方法

利用defer和async
defer：按正常顺序加载但不执行，等所有元素加载完毕后再执行
async：异步加载，不影响其他元素加载
放到文档最后面，如前
利用DOM操作，动态创建