2.23 Web前端note
前端学习：
1，规划好每日学习时间
2，基础打扎实
3，课堂认真听讲，整理总结
4，平时多关注前端相关博客和资料
CSDN： CSDN - 专业开发者社区 最大的中文技术博客社区
思否：SegmentFault 思否 问答技术社区
稀土掘金：稀土掘金 (juejin.cn) 互联网技术风向平台
开源中国：OSCHINA - 中文开源技术交流社区 技术论坛
知乎：知乎 - 有问题，就会有答案 问答平台
前端五大浏览器
1，IE浏览器
微软旗下的一款产品，于1995年诞生。与网景公司navigator浏览器争夺市场，最终ie浏览器取胜。
2022年6月微软宣布不再对其技术支持，最新版本为ie11。
网景公司，livescript(在浏览器进行表单验证),即JavaScript。98年被AOL（美国在线）收购，将JavaScript捐赠给ECMA机构。ECMA机构对其进行了一系列的规范和标准，ECMASCRIPT.
JavaScript=js——一种实现（按照说明写代码）
ECMASCRIPT=es——一种标准（说明书）
2，safari浏览器
苹果公司旗下的产品，于2003年诞生。希望利用苹果手机的市场来占据浏览器市场。
3，firfox（火狐浏览器）
网景公司部分员工成立Mozilla机构，于2004年开发了火狐浏览器，navigator内核。
4，chrome（谷歌浏览器）
Google公司旗下产品，于2008年诞生。使用safari内核，以简洁，快速，安全著称。
5，Opera（欧朋浏览器）
95年欧普拉软件公司（挪威）推出，后被奇虎360收购。
6，Edge浏览器
微软公司于2015年推出的一款浏览器，将代替ie浏览器，使用谷歌浏览器的一款内核。
浏览器的内核
浏览器的内核分为两块，分别是渲染引擎和js引擎，对网页语法的解析工作。不同浏览器内核的解析工作是不一样的。
Trident内核：ie
最初使用在ie4上，trident是修改mosaic（马赛克）浏览器内核而产生的，直至ie1.
Blink内核：Chrome, Opera
欧普拉软件公司与谷歌联合开发的一款内核，13年推出。
Gecko内核：firfox
最早用在navigator浏览器的一款内核，代码开源。
Webkit内核：safai
苹果公司自主研发的一款内核，代码开源。
chromium内核：Edge
Google推出的一款内核，之前使用在Chromiun浏览器上。
！！！浏览器从输入URL按下回车键以后发生了什么
1，DNS域名解析
DNS服务器——一张映射表，将对应域名解析成相关IP网址。
Ping指令可以用来诊断与服务器之间连接是否正常。
2，建立TCP（传输控制协议）连接
TCP（Transmission Control Protocol传输控制协议）：两台设备连接的一种规则（达成协议)
“三次握手”：
客户端发送一个带有SYN标志的数据包给服务器，服务器收到以后回回传一个带有SYN/ACK的标志的数据包给客户端,最后客户端再回传一个带有ACK标识的数据包给服务器，握手结束，连接成功
SYN表示 请求连接(synchronous 建立联机)
ACK表示 确认连接 (acknowledgement 确认)
大白话理解：
1）.client说：hello server，我是client我想要连你可以吗？
2）.server说: 好的 你连我吧，我也想连你可以吗？
3）.client说：我也同意了，那我们就可以传输数据了.
3，发送HTTP请求
HTTP：超文本传输协议，建立在tcp连接之上的
HTTP（ HyperText Transfer Protocol）： 客户端和服务器之间传输内容的一些规则，包含了很多请求相关的信息。
4，服务器处理请求
服务器收到请求以后，根据相关参数或者请求方式等请求信息来处理数据。解析用户请求，服务器得知要从数据库调用哪些数据或者资源，然后准备返回给客户端
5，返回响应结果
服务器将准备好的数据或者资源 返回给客户端可能包含了（文件资源,数据，http状态码）
常见HTTP状态码：
200：服务器响应成功，即找到了客户端请求内容，并且返回给了客户端。
301: 永久重定向，表示（由于某特殊原因，服务器地址改变）访问的www.baidu.com 但是最终跳转到了 www.baidu.cn这个地址。
302：临时重定向，类似于（临时性的）301。
304：告诉客户端请求成功，但是此资源不是由服务器提供的，而是客户端本地缓存中的资源，节省传输开销，性能优化
403：表示访问服务器的资源权限不够或者说IP被封掉了
404：表示服务器上没有该资源，也可以理解为找不到这些资源
500：表示服务器有问题了，服务器关闭了，服务器代码出错了
6，关闭TCP连接
为了避免服务器与客户端双方资源占用和消耗，当双方没有数据继续传递任何一方都可发起关闭的请求。
关闭连接 需要经过4次挥手
FIN：请求关闭 (finish结束)
第一次挥手：client发送一个FIN标识的数据包给server 请求关闭
第二次挥手：server收到FIN后 发送一个ACK标识的数据包给client 确认关闭
第三次挥手：server发送一个FIN标识的数据包给client 表示请求关闭
第四次挥手：client 收到 FIN以后 发送一个ACK标识的数据包给server 确认关闭
大白话理解：
Client :server 我这边没有数据给你了，我们之间关闭连接吧
Server：好的，那我看看我这边还有没有数据给你
Server：我这边也没数据给你了，那我和你之间也关闭吧
Client：好的 那就关吧
！！！浏览器显示页面 注意这个过程并不是在关闭连接以后才发生
假设有一个html接收到，会从上往下进行加载解析，并在过程中进行渲染。
渲染过程主要由浏览器内核来完成，不同内核渲染方式也不同。
例如，Webkit内核
内核大致分为两个引擎：渲染引擎和引擎
渲染引擎解析(解析可以理解为是浏览器不认识代码，就是将浏览器不认识的东西转换成浏览器能认识的东西)html文件，构建DOM tree(DOM树 我们可以理解一种树结构数据)
然后解析CSS文件构建CSSOM tree（渲染树 我们可以理解一种树结构数据）
结合DOM tree 和 CSSOM tree生render tree(渲染树)
进行layout（布局）处理阶段，就是将render tree 分配到屏幕上的坐标，只是分配了坐标并没有展示出来
绘制阶段，渲染引擎遍历循环render tree将每一个节点绘制到屏幕上，需要知道这个这个绘制过程是渐进式的
最终js引擎解析js相关代码和执行
如果在过程碰到一些需要请求的资源如图片、视频外部链接的css js等资源那么又会重新连接去请求，但是这一个过程是异步（非同步）。
总结：
DNS服务解析域名 – 建立TCP连接 – http请求 – 服务器处理请求 – 服务器返回请求 – 关闭TCP连接 – 解析文件渲染页面
计算机相关知识：
1946年冯.诺依曼提出计算机概念。
计算机应该由5大部分组成，分别是，运算器， 存储器，控制器，输入设备和输出设备。
计算内部采用二进制来保存数据。
将编号的程序和原始数据事先存到存储器中，然后启动计算机以后自动开始执行。
输入设备：鼠标，键盘，麦克风
输出设备：扬声器，显示器......
运算器：处理算术逻辑，运算
存储器：内存和外存（硬盘）
控制器：计算机指挥中心，功能是从内存中读取数据然后交给运算器进行运算。
内存
内存中最小的单位bit,内存中基本的管理单位是字节（byte）
1024byte = 1kb(千字节)
1024kb = 1mb（兆字节）
1024mb = 1gb （吉字节）
1024gb = 1tb (太字节)
进制转换
十进制：满十进一
0 1 2 3 4 5 6 7 8 9 10 11 12 .. 99 100
二进制：满二进一
0 1 10 11 100 101 110 111 1000 1001 1010
十六进制：满十六进一位
0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 13 14 15 16 17 18 19 1a 1b 1c 1d 1e 1f 20 21 ..
各进制中的10
10B：二进制(Binary system)里面10
10D：十进制(Decimal system)里面10
10H：十六进制(hex)里面的10
2.23 Web前端note相关推荐
- date javascript 时区_第23节 Datejs 日期库-Web前端开发之Javascript-零点程序员-王唯
Datejs 是一个开源的JavaScript库,用来解析.格式化和处理日期数据,支持多种语言的日期格式处理:官网:www.datejs.com/ Moment.js 是一个简单易用的轻量级JavaS ...
- HTML5期末大作业：甜品奶茶网站设计——大气的甜品奶茶(23页) web前端设计与开发期末作品/期末大作业
HTML5期末大作业:甜品奶茶网站设计--大气的甜品奶茶(23页) web前端设计与开发期末作品/期末大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶 ...
- Web前端中级认证php,1+x 证书 Web 前端开发中级理论考试 (试卷 6 )
1+x 证书 Web 前端开发中级理论考试 (试卷 6 ) 1+x 证书 web 前端开发中级理论考试(试卷 6 ) 官方 QQ 群 1+x 证书 Web 前端开发初级对应课程分析 http://bl ...
- Web前端开发面试考点指南
Web 前端面试指南与高频考题解析指南 第一章 面试准备:简历编写和面试前准备 一般来说,跳槽找工作要经历投递简历.准备面试.面试和谈 offer 四个阶段.其中面试题目会因你的等级和职位而异,从入门 ...
- HTML编码规范 - (WEB前端命名规范)
HTML编码规范 1 (一)命名规则: 2 3 头:header 4 内容:content/container 5 尾:footer 6 导航:nav 7 侧栏:sidebar 8 栏目:column ...
- web前端基础html,css,js,jquery
目录 1 前端技术: 1.1 学习方法 1.1.1 前端要怎么学? 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2. ...
- Web前端的学习与应用
1. 简介 1.1 Web前端 前端位于整个项目首要要开发的内容,直接和用户打交道,实现页面的展现和交互功能,所以在分类上俗称为前端.随着软件技术的日趋成熟,前端内容也呈现爆炸式的增长,和革命性的变革 ...
- 从零学web前端_从零到前端英雄（第2部分）
从零学web前端 This article is part two of the "From Zero to Front-end Hero" series. In part one ...
- 小猿圈web前端之jQuery抽奖系统
你有没有想过有一天可以成为千万富翁呢?你是通过自己的努力和奋斗还是其他手段获得的呢?前端程序员是通过jQuery获得的,他自己写了一个抽奖系统,下面就小猿圈前端讲师分享给大家. 效果图: <!D ...
最新文章
- 【Android 逆向】Android 进程注入工具开发 ( 注入代码分析 | 远程调用 目标进程中 libc.so 动态库中的 mmap 函数 三 | 等待远程函数执行完毕 | 寄存器获取返回值 )
- CentOS搭建Redis-cluster。corrupte cluster config file；redis requires Ruby version；can‘t connect to node
- 因子和（类素数筛选法）
- MySQL升级后 MySQL 5.7 时间不兼容问题
- Spring-Cloud中各个组件的职责
- bzoj 2908. 又是nand（树链剖分+区间NAND+单点修改）
- 如何获取ezui tree 所有子节点
- 解决升级PHP7后 微信公众号收不到消息
- 【支持4G插卡上网】京东云1代完美固件
- JavaScript与浏览器
- 通俗易懂地理解傅里叶变换
- 冰墩墩向你投来了一份花里胡哨的CSS知识手册，快来签收
- 半透明旋转魔方特效的实现
- 启动Jenkins时报错，localhost拒绝了我们的连接请求
- 好玩的横版射击游戏介绍：Broforce武装原型 for mac
- css实现1px的几种办法
- 服务器上网站缓存,什么是缓存服务器 缓存服务器怎么搭建
- 睡眠周期检测与吸引力法则
- python安装及模块安装
- OSR(on-stack replacement) IN V8