The birth of
The midnight bell has been ringing 11 times, along with the browser’s address bar enter https://blog.acohome.cn/what-is-hash/# – 1, a URL created by the browser, of course the URL Hash is my pocket, formally introduce myself:
I’m a Hash, just a generic string that has no particular format and is part of a URL that people don’t care about.
intercept
All of a sudden, the browser receives the Enter command, and the browser lobby buzzes with alerts.
“The HTTP service is ready to send requests.” The HTTP service says confidently.
“URL, take your package and go to HTTP,” said the browser boss.
“Agreement did not have little, address did not have little, OK.” The URL said as he tidied up. “Everything is ready, let’s go!”
“Wait! Browser boss seems to discover what, drink loudly, everyone is stunned.
“You this Hash ah, said how many times, hurriedly give me down from the URL, you belong to me, the server will not want you.”
‘All right! Secretly want to take a look at the server, I can only obediently out of the URL pocket, walked to the browser and sat down.
“All departments continue.” Eldest brother a command, each department began to work in an orderly way.
DNS query is complete. The server address is 127.0.0.1.
“The TCP channel is established and ready to send.”
“The URL has gone to sleep and is ready to send.”
.
All the departments were busy, and Hash was the only one sitting around doing nothing.
injustice
About 10 milliseconds later, the HTTP service confirms that the packet was sent correctly and reports, “The packet was sent correctly. Wait for the result.”
“Okay, let’s all take a break.” The browser boss gave the order, and everyone breathed a sigh of relief. He turned to me and said, “Want to go to the server?”
“Well, I haven’t been there yet!” I’m like a curious baby.
“There does not receive you, this is I and the server their agreement, you went to also useless.”
“All right.” Felt the dislike that comes from server and browser, have aggrieved a bit immediately.
“There will be a place for you to play! Don’t be discouraged!” The browser boss was cheering me on.
About five seconds later, the HTTP service comes running to the browser with a happy “URL back!”
“Good, hurriedly give it wake up, this time how lead so long, server this boy not line, small master all can’t wait.” The browser boss grunted at the slow response.
The use of embarrassment
Is a basin of cold water poured down, THE URL slowly woke up and complained: “Again!!”
But the browser boss ignored him and plunged into the bundle beside him.
After about 10 milliseconds, the browser boss calls in the GPU and tells him to display the web page.
One side of me, a little wonder, is not good to have my play of the place, how the page are displayed I still stay in this! The grievance in my heart deepened. I was like an unwanted child.
“Hash, come here, what are you again?”
“–1” heard the browser call, suddenly a little excited, blurted out.
“Let me find ha, here, found you!” The browser boss said to himself.
“What did you find?
“That’s the element, the ID of that element is –1. I asked the GPU to scroll the page up here.” “Said the browser, firing a series of commands at the GPU.
“What! My job is to match an element?”
‘Yes!
“What! I’ve waited all this time to match one element?”
‘Yes!
Suddenly, the grievance in my heart can not control, tears flowed out of my eyes.
“Don’t ah, in you are not useful, in JavaScript that, you still have use, recently heard that single page application is very hot, with you, you ask him.” Browser boss quickly comfort way.
In the bole
See I did not move, browser boss sighed, called JavaScript.
“Why? So wronged!” The browser boss called JavaScript said.
“They all bully me, the server won’t let me go, and I exist to match an element.” As soon as I said it, I felt even more useless.
“Don’t cry, they don’t value you, I value, now a lot of my younger brother have used you oh, but you are very strong!” JavaScript said I was stunned.
“Really?”
Have you heard of Angular Vue and React? They’re using you as a route! You can talk to them, “JavaScript swears, calling in Vue.
“Little brother, why are you crying?” Vue said to me as she walked up.
“I feel so useless!” I cried even louder.
“Why, you are my status as the URL. If you think you are a string, can you have something like
format?”
“Yeah, so what, it doesn’t match the element whose ID is this string.”
“No No No No, you are No longer in my this to match an element, AJAX is now very mature, I that I maintain a page without any problem, you see I have a lot of templates, you indicate your path which templates page. I need to use” Vue took out a dozen sets of templates from his pocket.
“Really? I can actually tell you which page to use!”
“Yes, look at my configuration, this is your path, this is my template, is it one-to-one correspondence?” Vue pulled out his configuration sheet and showed it to me.
“It seems so. Can I really do that?” I don’t have the confidence to say.
“Of course, you can also give me query parameters! And URL that boy is same, but that boy serves for server big brother, you serve for me.” Vue says, “I’m your server!”
As I listened to Vue’s explanation, I was lost in thought: Yes ah, now Ajax technology has been mature, and the URL path matching is for the server, then template matching by me to do no problem ah, first match to the template, to the server brother where to take the template data, and then generated by JavaScript page, tell the browser brother, let him show!
“Yes, that’s how it works!” “I cried excitedly.
“Well, you play a big role, matching elements, but you play a small role,” Vue said. “Ok, I’m off, I have a Hash to generate the page, talk to you later.”
Vue left, leaving me with an excited face, looking forward to the next cooperation with Vue.
Take business
As time went by, working with Angular Vue and React slowly increased my confidence that the world could be a wonderful place.
Until one day, I noticed that although Vue was busy in the hall, he never visited me.
I thought in my heart: yes, recently it seems that these 3 look for me less times ah, what situation?
Uneasily, I hurried to Vue and asked, “What’s wrong with single-page apps?”
“No, it’s still popular, it’s just…” “Vue teased.
“What happened?”
“Well, why don’t you talk to JavaScript?”
Realizing that something is wrong, he rushes to JavaScript and asks, “Vue sent me to you. What’s going on?”
“This ah, well, tell you directly.” PushStatus (replaceState) : pushStatus (replaceState) : pushStatus (replaceState) : pushStatus (replaceState) : pushStatus (replaceState) : pushStatus (replaceState) : pushStatus (replaceState) : pushStatus (replaceState)
As I look around, there are definitely a few more faces here. There are two people working with Angular Vue and React.
“What are they? I asked, a little worried.
“HTML gives me two new little brother, can change URL
, but does not let the browser brother make HTTP requests.”
“What’s that got to do with me?”
“Didn’t you learn a trick from Vue and the others? Something called a single page app.”
“Yeah, can they do this one-page app?”
“Yeah, if you look at the content they control, is it the same as the string you applied as a single page?”
When I heard JavaScript’s answer, I was startled and a chill rose.
“So if the page is small master active refresh how to do, although they will not let the browser brother HTTP request, but the refresh will ah!” I protested.
“You said good, eldest brother to match, this would require the server to these links to return to the same page all the time, so that the browser eldest brother is considered to be the same resources, will not refresh the page, to let the Vue again after to get your URL path eldest brother, also is part of the simulation, you before you eldest brother had this part isn’t it?”
“But, but, I already so use, still don’t occupy URL big brother’s position, why want these two!” The more I watched these two and Vue lovey-dovey, the more DISGUSTED I became.
“Want to know why?”
“HMM.” I sensed something was wrong.
‘Don’t be angry! Promise me and I’ll tell you!”
“Good! I’m not angry! ‘
“In fact, it’s nothing, but the little masters think it’s too long to use your words, so they came up with this method. But!” JavaScript pauses. “You have your advantages, too.”
- Do not take up
URLOther locations in - Does not occupy the server’s directory and does not require server redirection to a single file
JavaScriptIt’s me. You’re easy to get- The job is clear. I’ll handle you,
URLOther parts of the server, simple division of labor
“Oh, I see! I and they two are competitors, ah, that I want to refuel!”
“Hu ~” JavaScript heaved a sigh of relief, thinking: this boy has finally grown up, do not cry.
Complaints from off-screen
“This URL is too long, let me how to give others.”
“Use history mode, that will simplify the URL.”
“Okay, I’ll try.”
“Refresh error bro, this is too unreliable, hash mode is so much easier.”
“You configure your Nginx! Put all requests for this directory into the same HTML.”
“… I this directory is public, can’t transfer all requests!”
“Write regex filters, or put them in a separate directory!”
“I try, no, my static resource request is not, what ghost!”
“You filter it out, do you see your CSS return HTML?”
“Damn, that’s true! #/ Keep it simple and use hash mode.”
“As long as you’re happy.”