web前端开发中的url 输入url到页面展示的过程

我爱编程网小编给大家带来了web前端开发中的url 输入url到页面展示的过程相关文章，一起来看一下吧。

前端请求ajax的url路径怎么写

ajax的url路径写法有两种，一种是绝对路径，另一种是相对路径。
一、绝对路径：包括协议名称、主机地址、端口、web项目名称等的完整请求路径。
例如：
$.ajax({
url:""
});好处：比如在webA项目中的ajax需要请求webB项目中的服务，则必须使用绝对路径。

坏处：使用绝对路径要求古地理更web项目的名称，如果webB项目重命名了，则对应的ajax请求都需要修改。
二、相对路径：不需要协议名、主机地址、端口、web项目名称，只需要请求的路径。
假设：
项目路径：
页面路径：/webname/index.html（A页面），/webname/test/test.html（B页面）
请求路径：/request/ajaxtest，request/ajaxtest
1、如果请求路径以根路径开头，则无论什么ajax在什么页面，该请求都是相对于服务器的根路径，最后的请求路径都是：

例如：
$.ajax({
url :"/request/ajaxtest"
});原因：以"/"开头，是表示该请求基于从服务器的根路径，即不是相对于html的路径。
2、如果请求不以根路径开头（常见），则该请求路径是相对于html所在的路径的。
a、假如请求在A页面，最终的请求路径是：。
// /webname/index.html页面
$.ajax({
url:"request/ajaxtest"
});
原因：index.html页面对应的路径是"/webname/"，所以将url跟在这个路径下就是最终的请求路径。
b、假如请求在B页面，最终的请求路径是：。
// /webname/test/test.html页面
$.ajax({
url:"request/ajaxtest"
});
原因：test.html页面对应的路径是“/webname/test/”，所以将url要跟在test这一级下面。

输入url到页面展示的过程

1、 域名解析
2、 根据IP建立TCP连接（三次握手）
3、 发送HTTP请求
4、 服务器处理请求并返回HTTP报文
5、 浏览器解析并渲染页面
6、 连接结束，关闭TCP连接（四次挥手）

当输入一个域名的时候，我们首先要做的就是 将域名转化成IP地址 。前端的静态资源等，都是存储在服务器上。在计算机网络中，我们不能通过域名直接访问，只能通过IP地址访问到具体的主机。

1、首先 浏览器会查询自身的缓存 中，有没有此条域名的解析，如果有的话，就返回这个解析后的地址。

2、如果浏览器自身的缓存中，没有找到与此条域名对应的IP地址，那么就会去 操作系统中的缓存 中查找是否有这条域名的解析。

3、如果在操作系统中也没有找到的话，那么就需要通过 DNS(域名系统) 帮助我们解析。

4、DNS域名解析过程（详细看参考链接）

浏览器与远程web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP请求。

当浏览器再次访问某个url时，会先获取资源的header信息， 判断是否命中强缓存 ：
1、如命中，直接从缓存获取资源，包括响应的header信息（ 请求不会和服务器通信 ），也就是强缓存
2、如未命中强缓存，浏览器发送请求到服务器，该请求会携带第一次请求返回的有关缓存的header信息，由服务器根据请求种的相关header信息来 对比结果是否协商缓存命中
1）若命中，服务器 返回新的响应header信息，更新缓存中对应的header信息，但并不返回资源内容 ，它会告诉浏览器可以直接从缓存获取
2）否则，返回最新的资源内容

Expires ：Expires 的值是一个 绝对时间的GMT格式的时间字符串（如Thu, 02 Sep 2021 11:03:45 GMT） ，在浏览器发起请求的时候，会根据系统时间和 Expires 的值进行比较，如果发送请求的时间在expires之前，那么本地缓存始终有效，否则就会发送请求到服务端来获取资源。

注：这个字段会导致一个问题，要是系统时间与服务器时间不一致的时候，就可能出现假性失效，或者出现缓存已经失效了，但是并未去请求最新资源

Cache-control ：HTTP/1.1 中新增的属性，属性值具有以下几个：

pragma ：不使用强缓存，需要验证缓存是否新鲜。（HTTP/1.1 之前版本的历史遗留字段，仅作为与 HTTP/1.0 的向后兼容而定义）

协商缓存都是由浏览器和服务器协商，来确定是否缓存，主要通过两组header字段，两组字段都是 成对出现 的，即第一次请求的响应头上带某个字段（Last-Modified 或 Etag），则后续请求会带上对应的请求字段（if-modified-since或者if-none-match），若响应头没有，则请求头也不会有对应的字段

①、解析 HTML，生成 DOM 树（浏览器不能直接理解和使用HTML，需要将HTML转换为浏览器能够理解的结构）
②、解析 CSS，生成 CSS 规则树
③、合并 CSS 和 DOM 树，生成render树
④、计算渲染树的布局（Layout/reflow），即各元素尺寸、位置的计算
⑤、绘制 render 树（paint），绘制页面像素信息
⑥、浏览器将各层信息发送给GPU,GPU将各层合成，显示在屏幕

注 ：
1 、render树的节点并不等同的dom树的节点，因为有些节点的display为none，那么在生成render树的时候，就不会将其加入到render树中
2 、 当我们浏览器获得HTML文件后，会自上而下的加载，并在加载过程中进行解析和渲染。
3 、 如果在加载过程中遇到外部CSS文件和图片，浏览器会另外发送一个请求，去获取CSS文件和相应的图片，这个请求是异步的，并不会影响HTML文件的加载。 不会阻塞DOM树的解析，会阻塞DOM树的渲染和后面js语句的执行 ，当计算样式的时候需要等待css文件的资源进行层叠样式，资源阻塞了，会进行等待，直到网络超时，network报出错误，渲染进程继续层叠样式计算。为了避免让用户看到长时间的白屏时间，应该提高css的加载速度：

4 、如果遇到Javascript文件，HTML文件会挂起渲染的进程，等待JavaScript文件加载完毕后，再继续进行渲染。因为JavaScript可能会修改DOM，导致后续HTML资源白白加载，所以HTML必须等待JavaScript文件加载完毕后，再继续渲染，这也就是为什么JavaScript文件在写在底部body标签前的原因
5 、 每个页面至少需要一次回流，就是在页面第一次加载的时候。

1.第一次挥手：Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态。

2.第二次挥手：Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态。 我爱编程网

3.第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。

4.第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1， Server进入CLOSED状态，完成四次挥手。

参考： 前端进阶必看——详细版输入URL到界面展示的过程
简述浏览器渲染机制

前端使用js如何准确获取当前页面url网址信息

在WEB开发中，时常会用到javascript来获取当前页面的url网址信息，在这里是我的一些获取url信息的小总结。

下面我们举例一个URL，然后获得它的各个组成部分：

1、window.location.href(设置或获取整个 URL 为 字符串 )

var test = window.location.href;

alert(test);

返回：

2、window.location.protocol(设置或获取 URL 的协议部分)

var test = window.location.protocol;

alert(test);

返回：http:

3、window.location.host(设置或获取 URL 的主机部分)

var test = window.location.host;

alert(test);

返回：i.cnblogs.com

4、window.location.port(设置或获取与 URL 关联的端口号码)

var test = window.location.port;

alert(test);

返回：空字符(如果采用默认的 80端口 (update:即使添加了:80)，那么 返回值 并不是默认的80而是空字符)

5、window.location.pathname(设置或获取与 URL 的路径部分（就是文件地址）)

var test = window.location.pathname;

alert(test);

返回：/EditPosts.aspx

6、window.location.search(设置或获取 href 属性中跟在问号后面的部分)

var test = window.location.search;

alert(test);

返回：?opt=1

PS：获得查询（参数）部分，除了给 动态语言 赋值以外，我们同样可以给静态页面，并使用javascript来获得相信应的参数值。

7、window.location.hash(设置或获取 href 属性中在 井号 “#”后面的分段)

var test = window.location.hash;

alert(test);

返回：空字符(因为url中没有)

8、js获取url中的参数值

一、正则法

function getQueryString(name) {  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');  var r = window.location.search.substr(1).match(reg);  if (r != null) {    return unescape(r[2]);  }  return null;}// 这样调用：alert(GetQueryString("参数名1"));  alert(GetQueryString("参数名2"));  alert(GetQueryString("参数名3"));

二、split拆分法

function GetRequest() {

var url = location.search; //获取url中"?"符后的 字串

var theRequest = new Object();

if (url.indexOf("?") != -1) {

var str = url.substr(1);

strs = str.split("&");

for(var i = 0; i < strs.length; i ++) {

theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);

}

}

return theRequest;

}

var Request = new Object();

Request = GetRequest();<br>// var id=Request["id"];

// var 参数1,参数2,参数3,参数N;

// 参数1 = Request['参数1'];

// 参数2 = Request['参数2'];

// 参数3 = Request['参数3'];

// 参数N = Request['参数N'];

三、指定取

比如说一个url： ,我们想得到参数j的值，可以通过以下函数调用。

function GetQueryString(name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配

var context = "";

if (r != null)

context = r[2];

reg = null;

r = null;

return context == null || context == "" || context == "undefined" ? "" : context;

}

alert(GetQueryString("j"));

四、单个参数的获取方法

function GetRequest() {

var url = location.search; //获取url中"?"符后的字串

if (url.indexOf("?") != -1) {  //判断是否有参数

var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串

strs = str.split("=");  //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）

alert(strs[1]);    //直接弹出第一个参数 （如果有多个参数 还要进行循环的）

}

}

一、正则法

functiongetQueryString(name) {

varreg = newRegExp('(^|&)'+ name + '=([^&]*)(&|$)', 'i');

varr = window.location.search.substr(1).match(reg);

if(r != null) {

returnunescape(r[2]);

}

returnnull;

}

// 这样调用：

alert(GetQueryString("参数名1"));

alert(GetQueryString("参数名2"));

alert(GetQueryString("参数名3"));

二、split拆分法

functionGetRequest() {

varurl = location.search; //获取url中"?"符后的字串

vartheRequest = newObject();

if(url.indexOf("?") != -1) {

varstr = url.substr(1);

strs = str.split("&");

for(vari = 0; i < strs.length; i ++) {

theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);

}

}

returntheRequest;

}

varRequest = newObject();

Request = GetRequest();<br>// var id=Request["id"];

// var 参数1,参数2,参数3,参数N;

// 参数1 = Request['参数1'];

// 参数2 = Request['参数2'];

// 参数3 = Request['参数3'];

// 参数N = Request['参数N'];

三、指定取

比如说一个url： ,我们想得到参数j的值，可以通过以下函数调用。

functionGetQueryString(name) {

varreg = newRegExp("(^|&)"+ name + "=([^&]*)(&|$)", "i");

varr = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配

varcontext = "";

if(r != null)

context = r[2];

reg = null;

r = null;

returncontext == null|| context == ""|| context == "undefined"? "": context;

}

alert(GetQueryString("j"));

四、单个参数的获取方法

functionGetRequest() {

varurl = location.search; //获取url中"?"符后的字串

if(url.indexOf("?") != -1) {  //判断是否有参数

varstr = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串

strs = str.split("=");  //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）

alert(strs[1]);     //直接弹出第一个参数 （如果有多个参数 还要进行循环的）

}

}

以上就是我爱编程网小编给大家带来的web前端开发中的url 输入url到页面展示的过程，希望能对大家有所帮助。