Front-end development often uses four browser kernels
- Google Chrome (
chrome
) :Webkit
The kernel (v8
Engine) :-webkit-
Safari, most domestic browsers (360, Sogou, QQ, UC, Cheetah, Baidu…)
WebView and Node are V8 engines
- Firefox (
Firefox
) :Gecko
The kernel-moz-
- Openg Browser (
Opera
) :Presto
The kernel-o-
- Internet Explorer:
Trident
The 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,JS
Many 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: