• 关于浏览器的一些知识


           浏览器有很多的功能,可以分为以下几个部分:

    • 1. 人机交互部分(UI)
      2. 网络请求部分(Socket)
      3. JavaScript 引擎部分(解析执行JavaScript)
      4. 渲染引擎部分(渲染HTML、css等)
      5. 数存储部分(cookie、HTML5中的本地存储LocalStorage、SessionStorage)

            在渲染引擎(又叫排版引擎或浏览器内核)部分 

             主流的浏览器引擎有:

             1. Chrome 浏览器 :Blink引擎(WebKit的一个分支)

        2. Safari 浏览器:WebKit引擎

        3. FireFox 浏览器 :Gecko引擎

         浏览器工作原理:

        1. 解析HTML构建DOM树

        2. 构建渲染树

        3. 对渲染树进行布局

        4.  绘制渲染树,调用操作系统底层API进行绘图操作

              下面来两幅图来帮助理解一下:

      


    浏览器访问网站的过程

    1. 在浏览器地址栏中输入网址
    2. 浏览器通过用户在地址栏中输入的URL构建HTTP请求报文
    3. 浏览器发起DNS解析请求,将域名转化为IP地址
    4. 浏览器将请求报文发送给服务器
    5. 服务器接收报文并解析
    6. 服务器处理用户请求,并将处理结果封装成HTTP响应报文
    7. 服务器将HTTP响应报文发送给浏览器
    8. 浏览器接收服务器相应的HTTP报文,并解析
    9. 浏览器解析HTML页面并展示,在解析HTML页面时遇到新的资源需要再次发起请求
    10. 最终浏览器展示出了页面

    WEB开发的本质

    1. 请求:客户端发起请求

    2. 处理:服务器处理请求

    3. 相应:服务器将处理结果发送给客户端

    4. 客户端处理响应:在服务器响应完毕后,客户端继续处理:

    •      浏览器:解析服务器返回的数据
    •    IOS、Android客户端,解析服务器返回的数据,并且通过IOS或Android的UI技术实现界面的展示功能

    C/S: 客户端服务器(如:QQ客户端)

    B/S:  浏览器服务器

    B/S 模式开发:易于维护,但用户体验不佳

    C/S 模式开发:不易于维护,但是与服务器连接稳定,用户体验好

  • 相关阅读:
    移动端拖拽
    原生js增加,移除类名
    js自执行函数
    页面加载初始化方法
    writing-mode,文字竖直书写,字符之间距离,单词之间距离
    滚动鼠标达到一点范围时的跑秒效果,从0开始一直加在规定时间内加到最大值
    haley解决中文字段名称字数不同时两端对齐的问题
    常用的一些css实现的小效果,比如三角形,小三角,阴影等
    html几个比较常用的颜色名称
    Spring--通过注解来配置bean
  • 原文地址:https://www.cnblogs.com/codeofmine/p/9442427.html
Copyright © 2020-2023  润新知