Front-end development often uses four browser kernels

  1. Google Chrome (chrome) :WebkitThe kernel (v8Engine) :-webkit-

Safari, most domestic browsers (360, Sogou, QQ, UC, Cheetah, Baidu…)

WebView and Node are V8 engines

  1. Firefox (Firefox) :GeckoThe kernel -moz-
  2. Openg Browser (Opera) :PrestoThe kernel-o-
  3. Internet Explorer:TridentThe kernel-ms-

What is a browser kernel and what does a browser kernel do?

Front-end development uses HTML/CSS/JS to write code that follows some specifications (W3C)

Browser A browser developed by a developer, whose purpose is to recognize the code written by the developer according to W3C specifications, and draw the page and effect that the developer expects (with GPU rendering). We call the recognition of the page drawn by the code in the browser the browser kernel or rendering engine

Browser compatibility:

1, W3C published specifications are the product of developers trying to sum up: -webkit-border-radius, -moz-border-radius => border-radius

2, each browser in order to reveal their different, not according to standard, the standard stipulated in the effect of using another way to achieve the: get all the elements of style, specification: window. GetComputedStyle, IE: currentStyle

Import the js

Inline: Writes JS directly to a script tag in a page

Outer chain: introduced by the SRC attribute of the script tag

Inline and exchaining imports cannot be combined, and if the current exchaining import is performed, the code written in the script block will not be executed

Css Import Mode

CSS imports are usually placed at the beginning of the style tag

CSS import and external chain:

Similarities:

Both reference a separate CSS style file to a web page file

Difference:

1, using link CSS is: when the client browses your web page, the external CSS file is loaded into the web page first, and then compiled and displayed, so in this case, the page displayed is the same as we expect, even if the network speed is the same effect. The CSS imported by @import is different. When browsing a web page, the client first presents the HTML structure, and then loads the external CSS file into the web page. Of course, the final effect is the same as the former, but when the network speed is slow, the HTML page without CSS unified layout will be displayed first. This will give the reader a bad feeling. This is the main reason why most sites use linked CSS;

Import styles to avoid multiple pages pointing to a SINGLE CSS file. When a website to use the same CSS file page is not very long, both in terms of the effect is almost no different, but the number of pages to a certain degree when the site (such as sina portal), if adopt the way of links can be made due to multiple page calls the same CSS files and cause the loss of speed, However, the average site with this level of pages will also have the capital to use the best hard disk, so this aspect of the factor is not too much to worry about.

In real projects we would put CSS above the BODY and JS below it

The element can only be retrieved in JS after rendering

JS output mode

Pop-up way

1, alert(): pop up an alert box in the browser (only confirm);

Content that uses alert (regardless of type) is converted toString output, which is implemented by calling toString;

Alert (1+1) => ‘2’ string 2; Alert ({name:’aaa’}) => “[object object]”; Alert ([12, 13]) = > “12, 13.” “

2. Confirm: on the basis of Alert, the operation for users to select is added (two buttons are provided: confirm cancel);

Var Bok=confirm(‘ Sure to delete? ‘) get user to confirm or cancel (confirm true cancel false)

3. Prompt: Add effect for user input on the basis of confirm

Var Bok=prompt(‘ Are you sure to delete? ‘) 1, the user clicks the cancel button is (null) 2, if the user clicks OK will return the input content, if no input content will return an empty string

In real projects, they are generally not used because the style is too ugly and they will use native JS to encapsulate the modal frame

Console output (developer friendly debugging)

Console.log () does not convert data types on the console

Console. dir is more detailed than log output, especially when exporting object data

3, console.table displays JSON data as a table

4. Document.write () prints output content in the page

JavaScript: ECMAScript + DOM + BOM

1. ECMAScript (ES) specifies the core knowledge of JS (variables, data types, syntax, operation statements)

2, DOM: Document Object model; It provides properties and methods that let you manipulate elements on the page

BOM: The Browser object Model, which provides properties and methods that allow you to manipulate the browser

JavaScript is an implementation of the ECMAScript specification.

Naming conventions in JS

2, follow the international naming rules camel name: the first letter of the word must be lowercase, the first letter of the word must be uppercase

Info: information init: initializing add/insert/create: adding, inserting, and creating remove /rm /clear/del/delete: Delete update: modify get/query/select The query is obtainedCopy the code

3. You can use $, _, digits, and letters when naming. But numbers don’t come first

var$XXX: generally represents the value obtained by jqueryvar_XXX: indicates that the variable is global or publicCopy the code

4,JSMany of these words have special meanings, which we callThe keyword; Now there is no special meaning, the future may be as a key word we callReserved words; Neither keyword nor reserved word can be named arbitrarily; Key words:Reserved words:

Js method comments