Personal blog has been online, welcome to visit the comments! No girl for no reason – personal blog of wangchloe
The following content is not my original, is more easily understood after finishing the version, welcome to add.
I. Loading process after entering url
What happens from the time you enter the URL until the page loads
Computer network architecture
- Application layer (HTTP, SMTP, FTP, POP3)
- Transport Layer (TCP, UDP)
- Network layer (IP(router))
- Data link layer (bridge (CSMA/CD, PPP))
- Physical layer (hub)
1. Search for the IP address corresponding to the domain name
This step includes the specific DNS lookup process, including: browser cache -> system cache -> router cache… (1) The browser searches its DNS cache (maintains a mapping table of domain names and IP addresses); (2) Search the DNS cache in the operating system (maintain a corresponding table of domain names and IP addresses); (3) Search for the hosts file of the operating system (in Windows, maintain a mapping table between domain names and IP addresses). (4) The operating system sends the domain name to LDNS (local zone name server), and LDNS queries its DNS cache (generally, the success rate of the search is about 80%). If the search succeeds, the result will be returned, and if the search fails, an iterative DNS resolution request will be initiated:
① LDNS sends a request to the Root Name Server. In this case, the Root Name Server returns the IP address of the TOP-LEVEL domain Server in the COM domain.
② LDNS sends a request to the top-level domain name server of the COM domain and returns the address of the Baidu.com domain name server.
③ LDNS sends a request to the baidu.com domain name server and obtains the IP address of www.baidu.com.
(5) LDNS returns the OBTAINED IP address to the operating system and caches the IP address itself;
(6) The operating system returns the IP address to the browser and caches the IP address itself;
2. Establish a connection (TCP three-way handshake)
(1) The host sends a request to the server to establish a connection;
(2) After receiving the request, the server sends a signal to approve the connection;
(3) The host sends a confirmation signal to the server again after receiving the signal that agrees to connect;
Note: In this three-way handshake, the host sends two acknowledgments to the server, and the second one is to prevent the invalid connection request segment from being sent to the server and causing an error.
3. Build a web page
(1) The browser generates HTTP requests according to the URL content, including the location of the request file, the way of the request file and so on;
(2) After receiving the request, the server will decide how to obtain the corresponding HTML file according to the content in the HTTP request;
(3) The server sends the HTML file to the browser;
(4) Rendering and displaying pages before the browser has fully received the HTML file;
(5) In the execution of HTML code, according to the need, the browser will continue to request images, audio, video, CSS, JS and other files, the process is the same as the request HTML;
Browser rendering displays the web page process
- Converting HTML code to DOM(DOM Tree)
- CSS code to CSSOM (CSS Object Model)
- Combine DOM and CSSOM to generate a Render Tree (containing visual information for each node)
- Generate a layout, which is a plane composition of all nodes of the render tree
- Paint the layout on the screen
4. Disconnect (TCP four waves)
(1) The host sends a disconnection request to the server;
(2) After receiving the request, the server sends a signal to confirm receipt of the request; (At this point, the server may still have data to send to the host)
(3) The server sends a disconnect notification to the host; (At this point the server confirms that there is no data to send to the host)
(4) The host machine disconnects after receiving the disconnection notice and feedback a confirmation signal, and the server disconnects after receiving the confirmation signal;
Note: In the four waves, the server sends two messages to the host. The first is to reply that the host has received the disconnection request, and the second is to confirm the disconnection to the host to ensure that the data transfer is complete.
Do you know common.js?
Found this aspect of the data is very few ah, there is no phase in the better understanding.
A brief analysis of module specifications in JS (CommonJS, AMD, CMD)
Front-end modularization (CommonJs,AMD and CMD)
Front-end modularization
React.js?
React. Js is just an image library
(1) Declarative design
(2) High efficiency: minimize the interaction with DOM through DOM simulation.
(3) Flexibility: it can work well with known frameworks or libraries.
(4) JSX: is an extension of JS syntax, not necessarily used, but recommended.
(5) Components: build components so that the code is easier to reuse and can be well applied in the development of large projects.
6. One-way data flow: React implements one-way data flow, which reduces code duplication, which explains why it’s simpler than traditional data binding.
React communicates through the Prop management component and uses the state-driven view to compare differences for updates
Author: seventh page links: www.zhihu.com/question/39… Copyright belongs to the author, please contact the author for authorization.
Angular is the MV* framework. React is a library that provides tools for building reusable UI components.
React can be compared to Angular’s Directive. React is more powerful than Angular Directive in building uIs.Author: empty links: www.zhihu.com/question/23… Copyright belongs to the author, please contact the author for authorization.
9 Things Newcomers to React. Js should know
React features and common usage
React Example tutorial
What are the advantages and disadvantages of React and Angular, and how do they fit into development scenarios?
The difference between Angular and Vue
Alas, this is really too difficult to sum up, please comment!!
Vue has Angular’s bidirectional data binding and React’s virtual DOM.
Vue.js is good, but is it better than Angular or React?
Vue. Js is compared with Angular, React and other frameworks
Angular, React, vue.js, jQuery
Five. The characteristics of less
Every time I am asked this question, I can only think of the definition variable in less, used too long less forget that CSS can not be nested, drunk drunk.
- variable
- Mixins
- Nested rules
- operation
- function
- The namespace
- scope
- annotation
- Import
Less Language features
sass-vs-less
Difference between Sass and Less
The difference and learning between Sass and less
The principle of less
Essentially, less contains a set of custom syntax and a parser that allows users to define their own style rules based on the syntax. These rules are ultimately compiled by less into CSS styles that the browser can recognize through the parser. Less does not trim or replace CSS, but adds procedural language features to CSS based on existing CSS syntax. Less ultimately needs to be compiled into A CSS file to function as a style. We can call less a CSS style generator.
7. Characteristics of GULP
- With gulp.js, your build scripts are code, not configuration files;
- Use node.js Standard Library to write scripts;
- Plugins are very simple and only do one thing – they’re basically 20-line functions;
- Tasks are executed with the maximum number of concurrent tasks;
- Gulp is a stream-based build system that uses code over configuration. Input/output (I/O) is “streaming” based.
role
- Sass, Less compilation
- Css Js image compression
- Css, Js merger
- Css, Js inline
- Html include function
- Autoprefixer(handles browser CSS prefixes automatically)
- Automatically refresh
- To cache
- Precompilation of Handlebars template files
- Sprite figure
- ESLint
- Rem mobile terminal adaptation scheme
Other supplementary
| gulp | grunt | |
|---|---|---|
| speed | fast | slow |
| format | Similar to node | Json set of json |
| Based on the operation | Binary stream | file |
gulp VS grunt
Build tools for front-end engineering compared to Gulp vs Grunt
The folder to which the distribution is completed is usually named dist.
Dest is destination — destination — for grunt file path-related configuration items, usually paired with SRC. For example, file compression plug-ins: compress source (SRC) files and generate compressed packages into (dest).
Author: feng son link: www.zhihu.com/question/29… Copyright belongs to the author, please contact the author for authorization.
Regular gruntfile.js && gulpfile.js
- GruntFile.js
<script>
module.exports = function(grunt) {
// Import the module
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
// Configure tasks
grunt.initConfig({
// js compression is encrypted by default
uglify: { // Main task name
options: { // [config options]
mangle: false // Whether to encrypt and compress
},
a: { // Subtask name
expand: true.// Whether to compress separately
src: 'js/*.js'./ / the source file
dest: 'build' // Target files automatically create source file folders}},cssmin: {
a: {
expand: true.src: 'css/*.css'.dest: 'build'}},htmlmin: {
options: {
removeComments: true.// Whether to remove comments
collapseWhitespace: false // Whether to remove whitespace
},
a: {
src: '*.html'.dest: 'build'}},// imagemin: {
// a: {
// expand: true, // execute separately
// cwd: 'images',
// src: ['**/*.{png,jpg}'],
// dest: 'build/images'
/ /}
// },
watch: {
a: {
files: ['*.html'.'css/*.css'.'js/*.js'].tasks: ['cssmin'.'htmlmin'.'uglify']}}});// Register a default task
grunt.registerTask('default'['uglify'.'cssmin'.'htmlmin'.'watch']);
}
</script>Copy the code- gulpfile.js
<script>
// Import the module
var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var concat = require('gulp-concat');
var rename = require('gulp-rename'); / / the name
// Configure tasks
gulp.task('uglify:css'.function() {
gulp.src('css/*.css')
.pipe(cssmin()) / / compression
.pipe(concat('all.min.css')) / / merge
.pipe(gulp.dest('build/css')) / / output
});
gulp.task('uglify:js'.function() {
gulp.src('js/*.js')
.pipe(uglify()) / / compression
.pipe(gulp.dest('build/js')) / / output
});
gulp.task('uglify:html'.function() {
gulp.src('*.html')
.pipe(htmlmin({ / / compression
collapseWhitespace: true.removeComments: true
}))
.pipe(gulp.dest('build')) / / output
});
gulp.watch('*. *'['uglify:css'.'uglify:js'.'uglify:html']);
gulp.task('default'['uglify:css'.'uglify:js'.'uglify:html']);
</script>Copy the code<script>
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var clean = require('gulp-clean-css');
var sass = require('gulp-sass');
gulp.task('uglify'.function(){
return(
gulp.src('./src/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'))
)
})
gulp.task('minify-css'.function(){
return (
gulp.src('./src/*.css')
.pipe(clean())
.pipe(gulp.dest('dist'))
)
})
gulp.task('compile-sass'.function(){
return (
gulp.src('./src/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('dist'))
)
})
gulp.task('default'.function(){
gulp.watch('./src/*.js'['uglify']);
gulp.watch('./src/*.css'['minify-css']);
gulp.watch('./src/*.scss'['compile-sass']);
})
</script>Copy the codePrinciple of Ajax
-
In the old interaction, the user triggers an HTTP request to the server, which processes it and returns a new HTHL page to the client. Every time the server processes a request submitted by the client, the client has to wait idle and return a full HTML page for even a small interaction with a simple piece of data from the server, and the user wastes time and bandwidth to re-read the entire page each time. With Ajax, it feels like almost any operation will respond quickly to the wait without page reloading (white screen).
-
Ajax simply puts an intermediate layer (the Ajax engine) between the user and the server, makes an asynchronous request to the server via an XmlHttpRequest object, gets data from the server, and then updates the page by manipulating the DOM with javascript. Asynchronize user actions and server responses. One of the most critical steps is getting the request data from the server.
- The Ajax process involves only JavaScript, XMLHttpRequest, and DOM. XMLHttpRequest is the core mechanism of Ajax. It was first introduced in IE5 and is a technology that supports asynchronous requests. In simple terms, javascript can make requests to the server and process responses in a timely manner without blocking the user. Achieve no refresh effect.
Top 10 Front-end Tips per day: Ajax && JSONP
Ajax process
- For ajax
- Open the address
- To send data
- Receive data
<script>
// 1. Get Ajax
if (window.XMLHttpRequest) { // Check whether XMLHttpRequest is a global variable in the current browser
var oAjax = new XMLHttpResquest();
} else {
var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); //IE6, pass in Microsoft parameters
}
// 2. Open address
switch (json.type.toLowerCase()) {
case 'get':
oAjax.open('GET', json.url + '? ' + jsonToURL(json.data), true); // Submission mode (uppercase), URL, whether asynchronous
oAjax.send(); // 3. Send data
break;
case 'post':
oAjax.open('POST', json.url, true);
oAjax.setRequestHeader('Content-Type'.'application/x-www-form-urlencoded');
oAjax.send(jsonToURL(json.data)); // 3. Send data
break;
}
// 4. Receive data
oAjax.onreadystatechange = function() { // Monitor status
if (oAjax.readyState == 4) {
json.complete && json.complete();
if (oAjax.status >= 200 && oAjax.status < 300 ||
oAjax.status == 304) {
json.success && json.success(oAjax.responseText); ResponseText = responseText ()
} else {
json.error && json.error(oAjax.status); // Execute the failed callback function}}};</script>Copy the code9. Have you learned about ES6?
Haha, this will be written a whole article, please look forward to!
Introduction to ES6
Ten. Git merge
Git merge git rebase
Less does not rely on building CSS
I guess lessC should not be used on this interview question, hahaha!
I only know lessC and build transformations.
Ditch gulp to build transformations
<script>
var gulp = require('gulp'),
less = require('gulp-less');
gulp.task('testLess'.function() {
gulp.src(['src/less/index.less'.'src/less/detail.less']) // Multiple files are passed in arrays
.pipe(less())
.pipe(gulp.dest('src/css')); // Index.css and detail.css will be generated under SRC/CSS
});
gulp.task('testWatch'.function() {
gulp.watch('src/**/*.less'['testLess']); // Call the testLess task when all less files change
});
</script>Copy the codeXii. Bubbling and quick discharge
There is also a simple algorithm behind this, please look forward to!
- Bubble sort compares two adjacent numbers at a time, and if the latter one is smaller than the previous one, switch places. Time complexity: O(n^2)
<script>
var arr = [3.1.4.6.5.7.2];
function bubbleSort(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for(var j = 0; j < arr.length - 1; j++) {
if(arr[j + 1] < arr[j]) {
var temp;
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp; }}}}console.log(bubbleSort(arr));
</script>Copy the code- Quicksort uses dichotomy, takes the middle number, compares the array with the middle number each time, puts the small number to the left, puts the large number to the right. Time complexity: O(n\ SQRTN)
<script>
var arr = [3.1.4.6.5.7.2];
function quickSort(arr) {
if(arr.length == 0) {
return []; // Returns an empty array
}
var cIndex = Math.floor(arr.length / 2);
var c = arr.splice(cIndex, 1);
var l = [];
var r = [];
for (var i = 0; i < arr.length; i++) {
if(arr[i] < c) {
l.push(arr[i]);
} else{ r.push(arr[i]); }}return quickSort(l).concat(c, quickSort(r));
}
console.log(quickSort(arr));
</script>Copy the code13. Promise
Promise objects have two characteristics.
-
The status of an object is not affected. The Promise object represents an asynchronous operation and has three states: Pending, Resolved, and Rejected. Only the result of an asynchronous operation can determine the current state, and no other operation can change the state. That’s where the name “Promise” comes from. Its English name means “Promise,” indicating that nothing else can change it.
-
Once the state changes, it never changes again, and you can get this result at any time. There are only two possibilities for a Promise object to change state: from Pending to Resolved and from Pending to Rejected. As long as those two things happen, the state is frozen, it’s not going to change, it’s going to stay the same. If you add a callback to the Promise object, you’ll get the same result immediately, even if the change has already occurred. This is quite different from an Event, which has the characteristic that if you miss it and listen again, you will not get the result.
ECMAScript 6 Getting Started – Promise objects
Fourteen. Performance optimization
See performance Optimization!
Js Bubbling Event and Capture Event
Js event bubbling and event capture in detail
-
Bubbling events: Events fire in order from the most specific event target to the least specific event target (the Document object).
-
Event capturing: Events fire from the least precise object (document object) to the most precise (events can also be captured at the window level, but must be specified by the developer).
-
DOM event flow: Both event models are supported: captured and bubbling events, but captured events occur first. Both streams of events touch all objects in the DOM, starting and ending with the Document object. The most unique property of the DOM event model is that text nodes also fire events (not in IE).
The example assumes an element div that has a child element P.
<div>
<p>The element</p>
</div>Copy the codeBoth elements are bound to the click event if the user hits p:
- Event trapping When you use event trapping, the parent element fires first, then the child element fires later, i.e., div first, then p.
- Event bubble When you use event bubble, child elements fire first, parent elements fire later, p first, div second.
AddEventListener function, which takes three arguments, the third one true, event capture, and false, event bubbling. IE only supports event bubbling, not event capture.
To prevent a bubble
• In W3c, use stopPropagation ().
StopPropagation (); After that, the subsequent bubbling process doesn’t happen.
Stop the capture
• In W3c, use preventDefault (); • Set window.event. ReturnValue = false in IE;
Xvi. Reverse array (non-reverse)
<script>
var arr=[1.2.3.4];
var arr2=[];
while(arr.length) {
var num=arr.pop(a); arr2.push(num);
}
alert(arr2);
</script>Copy the codeFor more information on how to use arrays, see: 10 Front-end knowledge points a day
The difference between Object of JS and Object of other languages
The difference between A JS object and a Java object
Object orientation is divided into object orientation based on prototype and object orientation based on template.
- Java: Template-based object-oriented.
class A
{
private String name;
public void fun(a){
}
}
A a = new A();
a.fun();Copy the code- JavaScript: An object-oriented, event-based web scripting language based on prototypes.
<script>
function CreateObject() {
}
CreateObject.prototype = {
constructor: CreateObject, // You can explicitly declare that constructor points to CreateObject
name: 'xxx'.age: '11'.children: ['aaa'.'bbb'].getName: function() {
return this.name; }}var p = new CreateObject();
console.log(p.name); // 'xxx'
</script>Copy the codeElement and Node
JavaScript elements are different from Node, children are different from childNodes
- Element descends from the Node class, which means it is one of many Node types.
- Children is an Element attribute, and childNodes is a Node attribute
Differences between Node and Element in HTML
- NODE is in contrast to a TREE data structure. A TREE consists of nodes. Node has several subtypes: Element, Text, Attribute, RootElement, Comment, Namespace, and so on.
- ELEMENT is a concept in HTML. It is an ELEMENT, or tag, that contains internal attributes and contents. It is one of the components of data in HTML.
Differences between SVN and Git
-
Git is distributed, SVN is not. Like SVN, Git has its own centralized repository or server. However, Git is more likely to be used in distributed mode. After cloning the version library, you can commit files, view historical version records, create project branches, etc., and Push the network to the server again.
-
Git stores content as metadata, whereas SVN stores content as files. All resource control systems hide meta information in a folder like.svn,.cvs, etc. A Git directory is a clone repository on your machine that has everything from the central repository, such as tags, branches, version records, etc.
-
Git does not have a global version number, SVN does.
-
Git has better content integrity than SVN. Git uses the SHA-1 hash algorithm for its content storage.
-
Git can have an unlimited number of repositories, SVN can have only one designated central repository. When there is a problem with the SVN central repository, all working members are paralyzed together until the repository is repaired or a new repository is set up. Each Git is a repository. The difference is whether or not they have a Git Working Tree. If there is a problem with the main repository (e.g., the GitHub repository), staff members can still commit to their local repository and wait for the main repository to recover. Work members can also commit to other version libraries!
I feel so tired that I have opened up a new world. Today more stop here, will make up the follow-up, pay attention to the title update time.
More content can subscribe my wechat public number, together open the front end of the small white advanced world!
