Browser kernel

Webkit kernel (V8 engine)

  • Google Chrome
  • Safari
  • Opera >= V14
  • Domestic browser
  • Mobile browser

Geoko

  • Mozilla Firefox

Trident

  • IE
  • IE DEGE starts with dual cores (including Chrome Mini)

Presto

  • Opera < V14

Why use Google Chrome: Android is bundled with the WebKit kernel. Browser vendors choose to use the WebKit kernel for easy maintenance of PC + mobile. Chrome is the first practitioner of the WebKit kernel, and provides good debugging support for developers.

Google Console (F12/Fn+F12)

Elements

You can modify these by looking at the structure style

Console

View data results and error information, is JS debugging sharp tool, may also be your career stepping stone

Sources

View project source code, JS debugging debugger

Network

View all the request information of the current website (including the HTTP packet information transmitted by the server) and load time (optimize the project according to the load time)

Application

View all data stores and resource files of the current site (images can be copied)

  • Manifest offline caching technology
  • Storage Local information Storage
    • LocalStorage Level 2 offline cache does not need to interact with the server (performance optimization)
    • sessionStorage
  • Cookies Login information
  • Cache Cache
  • Frames Resource Browsing

The underlying mechanisms of the browser are EC, STACK, VO, AO, and GO

  • The browser provides a code Execution environment, executes JS code, and the ECStack Execution Context Stack => Stack memory.

  • EC (lexical Content). In a programming language, in order to distinguish between different scopes in which code is executed globally and in which a function is executed

  • VO (Varibale Object) creates variables for each context code execution, and there is a space for storing variables in each context (global + private).

  • AO (Active Object) Variable Object, holding variables in the current context (private)

  • GO (Golbal Object) Global Object,; The browser puts all the properties and methods (built-in) that JS needs to retrieve later in GO, and creates a global variable called Window to point to it. Document, for example, should be window.document,

Common output mode of the browser

Include console series, popover series Alert/Confirm/Prompt, document.write

The console series

Log (a) // 10 console.log(,b) // {c:1} console.dir(b) // see the following figure console.table(b) // see the following figureCopy the code
  • console.dir(b)Output detailed key/value pair information of the object

You can use this method to quickly view the properties of an object, for example, view the properties of Console

  • console.table(b)Display a multidimensional JSON array as a table on the console

Popup window series

Alert /confirm/promp: All output results must be converted to a string through toString. Block the execution of the code, close the window and continue to run the following JS

var obj = {a:1.b:2.c:3}
alert(obj)
confirm(obj)
prompt(obj)
Copy the code
  • Alert only certain

  • Confirm + cancel

  • Prompt confirm + cancel + input box

document.write

As with the popover method, the output is a string

Script label position difference

In the heard

If you manipulate the page, you may not be able to get the elements you want to manipulate, and your code may fail

JQ:$(document).ready(function(){})

Put it at the end of the body

Don’t do this until the page structure is loaded