前端技术基础（一）：浏览器相关
浏览器访问网站过程
- 用户在浏览器地址栏中输入网址
- 浏览器解析网址构建HTTP请求
HTTP请求报文包括：请求行、请求头和请求体 - 浏览器发起DNS解析请求，将域名转化为IP地址
网址映射到服务器IP地址，指定了访问的服务器 - 浏览器发送请求报文给到服务器
- 服务器接收并解析报文
- 服务器处理请求，并封装成HTTP响应报文
- 服务器将响应报文发送给浏览器
- 浏览器解析响应报文，重新渲染，在遇到新的需求时再次发送HTTP请求
- 最终生成页面
浏览器渲染过程
Google Chrome Blink 引擎
- 解析HTML构建DOM树
- 解析CSS构建CSS规则树
- 从DOM树中筛选出需要渲染出的结点，剔除掉不用渲染的结点（如：、display: none的结点），构建render树
- 将CSS规则树与render树相结合，定位坐标和大小，确定是否换行、position、overflow、z-index等等……此过程称为reflow或layout
- 调用操作系统底层API进行绘图
Firefox Gecko 引擎
- 解析HTML构建内容槽（Content Sink）
- 解析内容槽构成内容模型（Content Model），一个类似DOM树的东西
- 解析CSS构建CSS规则树
- 将CSS规则树与DOM树相结合，生成帧树（Frame Tree），一种类似render树的东西
- reflow
- 调用操作系统底层API进行绘图
IE Trident 引擎 不开源不可知
Reflow / Layout
浏览器reflow或layout操作可以在Google Chrome开发者工具中点击右上角的三个点 -> More tools -> Rendering 中勾选Painting flashing，刷新网页后观看整个过程。由此可见，渲染的操作是非常复杂的，因此DOM树的操作次数务必要尽量地少，在一次重新渲染中执行多个DOM结点的更新会比频繁进行DOM结点的更新性能高出许多。
HTTP Request & Response
Web程序中的HTTP通讯一般分请求报文和响应报文，两种报文各有三个部分：
- 请求（响应）报文行
请求行中一般包含请求方法（GET || POST）和通讯协议（HTTP / 版本号）
响应行中一般包含HTTP状态码（200、302、404等）和通讯协议（HTTP / 版本号） - 请求（响应）报文头
请求头中一般有：主机IP及端口号、Content-Type、浏览器版本等等
响应头中一般有：服务器类型、Content-Type、时间、Cookies等等 - 请求（响应）报文体
GET方法由于内容被包含在URL中，一般没有报文体
POST方法一般都需要有报文体
前端技术基础（一）：浏览器相关相关推荐
- Web前端技术基础实验报告三之超链接与多媒体文件应用
目录 Web前端技术基础实验报告 实验题目:超链接与多媒体文件应用 实验目的:熟悉超链接与多媒体文件的插入的相关标签 实验内容 : 实验过程及结果 Web前端技术基础实验报告 实验题目:超链接与多媒体 ...
- 现代前端技术解析：Web前端技术基础
最近几年,越来越多的人投入到前端大军中:时至至今,前端工程师的数量仍然不能满足企业的发展需求:与此同时,互联网应用场景的复杂化提高了对前端工程师能力的要求,一部分初期前端工程师并不能胜任企业的工作 ...
- 前端技术基础--笔记
目录 一 一,改造登录案例 –1,概述 –2,改造 二,HTML –1,概述 –2,入门案例 –3,使用Hbuilder 三,常用标签 –1,概述 –2,常用标签 –3,表格标签 –4,表单标签for ...
- Web前端技术基础实验报告二之格式化文本、段落与列表
目录 实验题目:格式化文本.段落与列表 实验目的:熟悉格式化文本与段落.列表的相关标签 实验内容: 项目1 文本与段落标记的应用 项目2 设计新闻访问列表 项目3 设计制度宣传展板 项目4 制作饭 ...
- 分布式数据库技术基础：分布透明性相关知识
1.分布透明性介绍 数据分布独立性:主要是指用户或用户程序使用分布式数据库如同使用集中式数据库那样,不必关系全局数据的分布情况. 也就是说全局数据的逻辑分片.片段的物理位置分配.各场地数据库的数据模型 ...
- 数据库技术基础：查询优化相关知识笔记
1.查询优化的基本概念 1.1 查询处理 查询处理是指从数据库中提取数据的一系列活动.主要包括:将高级数据库查询语句翻译成文件系统这一物理 层次的表达式,为优化查询进行各种转换以及查询的实际执行. 1 ...
- web前端技术基础课程讲解之浅谈对soket的理解
浅谈对soket的理解 定义: 网络上的两个程序通过一个双向的通信链实现数据的交换,这个链接的一端就成为Socket 它是进程通信的一种,即调用这个网络库的api函数实现分布在不同主机相关进程之间的数 ...
- 软件测试第一阶段：web前端技术基础-13- linux系统中的基础命令和文件管理命令
一.常用的系统 windows 个人系统:windows xp.7.8.10.11 服务器系统:windows server 2003.windows server 2008.windows serv ...
- 现代前端技术解析读书笔记
思维导图链接:http://v3.processon.com/view/link/5f7ec592762131119546c899 取材自<现代前端技术解析> 本文只是个人读书笔记,更多详 ...
最新文章
- mixin network_基于Mixin Network的Ruby比特币开发教程
- 心态很容易受别人影响_阳光心态的句子，句句动人心弦，送给追梦路上的你
- 什么是 gRPC ？
- Java 并发编程 --- ThreadPoolExecutor（五）
- MVC Remote属性验证
- Atitit path query 路径查询语言 数据检索语言 目录 1.1. List map spel 1 1.2. Html数据 》》Css选择符 1 1.3. Json 》map》
- mplfinance画k线图_华尔街交易王：真正短线高手是寻找60分钟K线中的“牛股”
- Web实训项目--网页设计（附源码）
- digester java_在Digester中定位特定属性 - Java
- Qt动画入门QPropertyAnimation
- 解决windows7“您可能没有权限使用网络资源”的方法
- Latex之大小写罗马数字
- 038--想和权证恋个爱
- 基于PG与PostGIS搭建实时矢量瓦片服务
- 使用 *号在分别在控制台输出一个平行四边形、等腰三角形、菱形
- PID积分饱和 和 积分分离
- TF-IDF文本表示方法与词云图
- ヾ(⌐ ■_■)— CSS简介篇
- 四、小程序必备API
- Java Web基础面试问题——Cookie和Session