前端知识图谱open in new window

客户端

浏览器

浏览器内核

google和Opera拥抱的blink
苹果的webkit，webkit的鼻祖其实是Safari，而现在chrome的内核已经是blink了
微软的edgehtml，早期微软的IE采用的trident
火狐的servo，早期火狐采用的gecko
浏览器内核只负责渲染，GUI及网络连接等跨平台工作则是浏览器实现的

渲染引擎工作原理

解析HTML构建的Dom树
构建渲染树
对渲染树进行布局
绘制渲染树

浏览器访问网站的全过程

输入网址
浏览器根据网址构建http请求报文
浏览器发起DNS解析请求,将域名转换成IP地址
浏览器发送请求报文给服务器
服务器接收报文并解析
服务器处理用户请求，将结果封装成http响应报文
服务器发送响应报文给浏览器
浏览器接收响应报文并解析
浏览器解析HTML页面并展示，在解析HTML页面时遇到新的资源需要再次发起请求
最终展示页面

APP

小程序

webview

WebView | Android Developersopen in new window

WebView

A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.

native

public class WebView
extends AbsoluteLayout implements ViewTreeObserver.OnGlobalFocusChangeListener
ViewGroup.OnHieranchyChageListener

1
2
3

uni-app

<template>
    <view>
        <web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                webviewStyles: {
                    progress: {
                        color: '#FF3333'
                    }
                }
            }
        }
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Hybrid App

Hybrid App的本质，其实是在原生的 App 中，使用 WebView 作为容器直接承载 Web页面。因此，最核心的点就是 Native端与 H5端之间的双向通讯层，其实这里也可以理解为我们需要一套跨语言通讯方案，来完成 Native(Java/Objective-c/...) 与 JavaScript 的通讯。这个方案就是我们所说的 JSBridge，而实现的关键便是作为容器的 WebView，一切的原理都是基于 WebView 的机制。

ionic

网络

同步和异步请求

在控制台输出页面源文件

点击查看

File not found

创建一个标准的方法来读取外部文件

点击查看

function xhrSuccess() {
    this.callback.apply(this, this.arguments)
}

function xhrError() {
    console.error(this.statusText)
}

function loadFile(url, callback /*,opt_arg1,opt_arg2,...*/
) {
    var xhr = new XMLHttpRequest();
    xhr.callback = callback;
    xhr.arguments = Array.prototype.slice.call(arguments, 2)
    xhr.onload = xhrSuccess;
    xhr.onerror = xhrSuccess;
    xhr.open("GET", url, true);
    xhr.send(null)
}
// 用法

function showMessage(message) {
    console.log(message + this.responseText)
}

使用超时

点击查看

// 使用超时
// timeout属性添加于Gecko12.0(很多年前)
function loadFile(url, timeout, callback) {
    var args = Array.prototype.slice.call(arguments, 3)
    console.log(args);
    var xhr = new XMLHttpRequest();
    xhr.ontimeout = function () {
        console.error("The request for " + url + "timed out");
    }

    xhr.onload = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                callback.apply(xhr, args);
            } else {
                console.error(xhr.statusText)
            }
        }
    };
    xhr.ope("GET", url, true);
    xhr.timeout = timeout;
    xhr.send()
}
function showMessage(message) {
    console.log(message + this.responseText)
}

loadFile("message.txt", 2000, showMessage, "New message!\n\n")

同步请求

点击查看

// 同步请求
var request = new XMLHttpRequest();
request.open('GET','http://www.mozilla.org',false);
request.send(null);
if(request.status===200){
    console.log(request.responseText)
}

Domain

TCP/IP

DNS

HTTP

服务端

WebServer

Nginx

Apache HTTP Server

CDN

服务端语言

PHP

Java

Golang

数据库

操作系统

行业标准

示例

css-multicolopen in new window

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多列</title>
    <style>
        body {
            font: 14px/1.5 georgia, serif, sans-serif;
        }

        p {
            margin: 0;
            padding: 5px 10px;
            background: #eee;
        }

        h1 {
            margin: 10px 0;
            font-size: 16px;
        }

        .test {
            width: 628px;
            border: 10px solid #000;
            -moz-columns: 200px 3;
            -webkit-columns: 200px 3;
            columns: 200px 3;
        }

        .test2 {
            border: 10px solid #000;
            -moz-columns: 200px;
            -webkit-columns: 200px;
            columns: 200px;
        }
    </style>
</head>
<body>
<h1>列数及列宽固定:</h1>
<div class="test">
    <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets
        can declare that the content of an element is to be laid out in multiple columns. </p>
    <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based
        columns is flexibility; content can flow from one column to another, and the number of columns can vary
        depending on the size of the viewport. Removing presentation table markup from documents allows them to more
        easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
</div>
<h1>列宽固定，根据容器宽度液态分布列数:</h1>
<div class="test2">
    <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets
        can declare that the content of an element is to be laid out in multiple columns. </p>
    <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based
        columns is flexibility; content can flow from one column to another, and the number of columns can vary
        depending on the size of the viewport. Removing presentation table markup from documents allows them to more
        easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
</div>
</body>
</html>

flexboxopen in new window

# 目录

# 前端知识图谱open in new window

# 客户端

# 浏览器

# 浏览器内核

# 渲染引擎工作原理

# 浏览器访问网站的全过程

# APP

# 小程序

# webview

# native

# uni-app

# Hybrid App

# ionic

# 网络

# 同步和异步请求

# 在控制台输出页面源文件

# 创建一个标准的方法来读取外部文件

# 使用超时

# 同步请求

# Domain

# TCP/IP

# DNS

# HTTP

# 服务端

# WebServer

# Nginx

# Apache HTTP Server

# CDN

# 服务端语言

# PHP

# Java

# Golang

# 数据库

# 操作系统

# 行业标准

目录

前端知识图谱open in new window

客户端

浏览器

浏览器内核

渲染引擎工作原理

浏览器访问网站的全过程

APP

小程序

webview

native

uni-app

Hybrid App

ionic

网络

同步和异步请求

在控制台输出页面源文件

创建一个标准的方法来读取外部文件

使用超时

同步请求

Domain

TCP/IP

DNS

HTTP

服务端

WebServer

Nginx

Apache HTTP Server

CDN

服务端语言

PHP

Java

Golang

数据库

操作系统

行业标准