浏览器与计算机网络相关知识总结

最新推荐文章于 2022-01-21 21:51:07 发布

renye_lpl

最新推荐文章于 2022-01-21 21:51:07 发布

阅读量723

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/renye_lpl/article/details/100084653

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

总结一下重点的浏览器相关的知识和计算机网络相关的知识

计算机网络部分

1.什么是http，什么是https，什么是http2

http是短连接，每次连接都要断掉TCP连接，然后有了http1.1把多个http请求合并到一个连接里。但是1和1.1都是有阻塞的，http1.1也就是我们现在最常使用的http连接，客户端接受响应的时候要按响应的顺序来一一处理。

但是！

http2使用二进制传输，实现了多路复用解决了阻塞问题，http2是真正的持久连接，响应速度更快

https则是对传输的信息进行了一次非对称加密，需要购买额外的安全证书

浏览器部分

1.从输入url到呈现出页面，发生了什么

输入url，先进行域名解析（浏览器缓存，本地host，本地DNS服务器解析，tcpip中设置的首选dns服务器，一层一层网上，直到根dns），得到ip地址，建立tcp连接，三次握手，发送http请求，服务器处理http请求，服务器返回响应，浏览器得到响应，根据响应得到html，js文件，其他资源文件等，进行DOM，CSS树的渲染，解析js文件，渲染页面

2.浏览器缓存，localStorage和sessionStorage和cookie的区别，如何控制缓存，cache-control,什么是浏览器长缓存

浏览器缓存分两种：强缓存（不与服务器沟通），协商缓存（与服务器沟通），强缓存的时候，浏览器去客户端的缓存中查看资源的expires字段和cache-control的max-age字段，后者存在的话优先级更高。如果没有过期，就直接返回状态码200，从缓存中读取资源，如果过期了，就要用协商缓存和服务器沟通了。客户端会发送一个http请求到服务端，检查两个标识中的其中一个，Etag或者Last-Modified，向浏览器询问资源是否过期，如未过期，则浏览器会返回一个304状态码，这是浏览器就不会重新下载文件，依旧沿用缓存的内容，但如果此时服务器检测到资源已经过期了，那么就会返回200状态码，并在响应体中返回最新的资源，覆盖缓存，这样浏览器就能拿到最新的资源了。那么Etag和Last-Modified这两个字段代表什么呢?Etag是服务端对不同的文件通过固定的算法生成的一个唯一的hash，当文件被修改时，这个唯一的hash就会发生变化，Last-Modified这个从字面上理解就可以了，他存放的是文件最后的修改时间，这两个都能用来判断当前的文件是否发生了变化。

一般静态资源文件，我们都可以缓存下来

cookie：客户端第一次正常访问服务器，服务器在response headers中返回与用户信息相关的cookie，客户端收到后把cookie保存在本地，下次再发请求时会在request headers中带上这个cookie，服务器收到这个cookie就知道用户状态了。cookie可以设置过期时间，默认值是-1，表示关闭浏览器时cookie就会失效，值为0时表示立马失效，相当于删除cookie（cookie没有删除的方法），服务器和客户端都可以设置cookie，但不可以操作另一个域名下的cookie。get请求每次都会携带cookie，post不会。可以设置httponly保证cookie不在客户端被修改

session: 客户端第一次正常访问服务器，服务器生成一个sessionid来标识用户并保存用户信息（服务器有一个专门的地方来保存所有用户的sessionId），在response headers中作为cookie的一个值返回，客户端收到后把cookie保存在本地，下次再发请求时会在request headers中带上这个sessionId，服务器通过查找这个sessionId就知道用户状态了，并更新sessionId的最后访问时间。sessionId也会可以设置失效时间，比如如果60分钟内某个session都没有被更新，服务器就会删除这个它。

总言之cookie是保存在客户端，session是存在服务器，session依赖于cookie

localstorage：本地浏览器缓存，关闭浏览器还有效，sessionstorage则关闭页面浏览器就失效

cookieãlocalStorageãsessionStorageä¹ä¸å

3.什么是浏览器同源策略，什么是跨域，常见的跨域方式有哪些，如何实现，jsonp CORS nginx

浏览器为了安全，使我们发送http请求的时候，不能向不同的协议，不同的域名，不同的端口发送http请求。

解决跨域问题的方式：

jsonp：浏览器对script和img这样的标签是没有同源限制的，我们可以引入一个script标签，在它的src中放一个callback参数，服务器接收到这个请求后，把数据放到回调中，我们可以再浏览器中解析服务器在回调中放入的参数


<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字
 
// 处理服务器返回回调函数的数据
<script type="text/javascript">
    function dosomething(data){
        //处理获得的数据
    }
</script>

CORS：主要的方法，jsonp只能对get有用，cors在http请求头中加入origin字段，表示本次请求的来源：协议域名端口,交给服务器判断是否可以响应，就正常发送请求就可以了。然后再服务器端判断是否可以返回资源，如果返回的响应头没有Access-Control-Allow-Origin，客户端就知道本次请求失败了。如果成功，response中会多出这样的字段，客户端就可以拿数据了。

3.nginx 这个我们开的时候用的挺多的，就在nginx中配置一下就行了。不需要其他的操作，在webpack中，也可以使用proxy代理到其他地方

#user  nobody;
 
#指定nginx进程数
 
worker_processes  2;
 
#全局错误日志及PID文件
 
#error_log  logs/error.log;
 
#error_log  logs/error.log  notice;
 
#error_log  logs/error.log  info;
 
#pid        logs/nginx.pid;
 
events {
 
    # 连接数上限
 
    worker_connections  1024;
 
}
 
#设定http服务器，利用它的反向代理功能提供负载均衡支持
 
http {
 
    #设定mime类型,类型由mime.type文件定义
 
    include       mime.types;
 
    default_type  application/octet-stream;
 
    #设定日志格式
 
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
 
    #                  '$status $body_bytes_sent "$http_referer" '
 
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
 
    #使用哪种格式的日志
 
    #access_log  logs/access.log  main;
 
    #sendfile 指令指定 nginx 是否调用 sendfile 函数（zero copy 方式）来输出文件，对于普通应用，    
 
    sendfile        on;
 
    #tcp_nopush     on;
 
    #连接超时时间
 
    #keepalive_timeout  0;
 
    keepalive_timeout  65;
 
    #开启gzip压缩 ，压缩html
 
    #gzip  on;
 
    #设定负载均衡的服务器列表 支持多组的负载均衡,可以配置多个upstream  来服务于不同的Server.
 
    #nginx 的 upstream 支持 几 种方式的分配
 
    #1)、轮询（默认） 每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。
 
    #2)、weight 指定轮询几率，weight和访问比率成正比，用于后端服务器性能不均的情况。 跟上面样，指定了权重。
 
    #3)、ip_hash 每个请求按访问ip的hash结果分配，这样每个访客固定访问一个后端服务器，可以解决session的问题。 
 
    #4)、fair      
 
    #5)、url_hash #Urlhash
 
    upstream mysvr {
 
      #weigth参数表示权值，权值越高被分配到的几率越大   
 
      #1.down 表示单前的server暂时不参与负载
 
      #2.weight 默认为1.weight越大，负载的权重就越大。     
 
      #3.backup： 其它所有的非backup机器down或者忙的时候，请求backup机器。所以这台机器压力会最轻。  
 
      #server 192.168.1.116  down;
 
      #server 192.168.1.116  backup;
 
      server 192.168.1.121  weight=1;
 
      server 192.168.1.122  weight=2;
 
    }
    #配置代理服务器的地址，即Nginx安装的服务器地址、监听端口、默认地址
	#nginx监听的是8080端口，然后nginx监听到了8080端口的路由请求后，会进行匹配，如果匹配的是/ 那就反向代理到8001端口
	#如果匹配的是/api 路由，那就反向代理到8000端口，
    server {
 
        #1.侦听80端口
 
        listen       8080;
 
        #对于server_name,如果需要将多个域名的请求进行反向代理，可以配置多个server_name来满足要
        server_name  www.keystonerenye.cn;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
      #  location / {
 
            # 默认主页目录在nginx安装目录的html子目录。
 
         #   root   html;
 
          #  index  index.html index.htm;           
 
           # proxy_pass http://mysvr; #跟载均衡服务器的upstream对应   
 
      #  }
	  
		location / {
			proxy_pass http://localhost:8001;
		}
		location /api {
			proxy_pass http://localhost:8000;
			proxy_set_header Host $host;
		}
 
        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
 
        ## 定义错误提示页面
 
        #error_page   500 502 503 504  /50x.html;
 
        #location = /50x.html {
 
        #    root   html;
 
        #}
 
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
 
        #
 
        #location ~ \.php$ {
 
        #    proxy_pass   http://127.0.0.1;
 
        #}
 
 
        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
 
        #
 
        #location ~ \.php$ {
 
        #    root           html;
 
        #    fastcgi_pass   127.0.0.1:9000;
 
        #    fastcgi_index  index.php;
 
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
 
        #    include        fastcgi_params;
 
        #}
 
        # deny access to .htaccess files, if Apache's document root
 
        # concurs with nginx's one
 
        #
 
        #location ~ /\.ht {
 
        #    deny  all;
 
        #}
 
    }
 
    # another virtual host using mix of IP-, name-, and port-based configuration
 
    #
 
    #server {
 
    #    listen       8000;
 
    #    listen       somename:8080;
 
    #    server_name  somename  alias  another.alias;
 
    #    location / {
 
    #        root   html;
 
    #        index  index.html index.htm;
 
    #    }
 
    #}
 
    # HTTPS server
 
    #
 
    #server {
 
    #    listen       443 ssl;
 
    #    server_name  localhost;
 
    #    ssl_certificate      cert.pem;
 
    #    ssl_certificate_key  cert.key;
 
    #    ssl_session_cache    shared:SSL:1m;
 
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
 
    #    ssl_prefer_server_ciphers  on;
 
    #    location / {
 
    #        root   html;
 
    #        index  index.html index.htm;
 
    #    }
 
    #}
 
}

浏览器安全

1.XSS攻击是什么，如何防范

反射性XSS把攻击的代码放到url中，服务器响应后，客户端解析响应的内容，还有在留言位置输入一段XSS代码，服务器拿到后去访问数据库，返回的数据中带有一些用户的信息

我们要对url和用户输入做转义

2.CSRF攻击是什么，如何防范

GET类型的CSRF

GET类型的CSRF利用非常简单，只需要一个HTTP请求，一般会这样利用：

 <img src="http://bank.example/withdraw?amount=10000&for=hacker" >

在受害者访问含有这个img的页面后，浏览器会自动向http://bank.example/withdraw?account=xiaoming&amount=10000&for=hacker发出一次HTTP请求。bank.example就会收到包含受害者登录信息的一次跨域请求。

然后这个网站就有了用户的的登录信息，然后这个网站就可以带着这个信息向用户真正登录的网站去发送http请求，由于带了用户的cookie信息，原网站会误以为是用户在操作。

防止：进行同源检测，Origin字段

网络请求部分

1.什么是Ajax请求，常见的Ajax状态码和对应的话含义

Ajax请求是对xmlhttprequest的封装

问题:
 0: (Uninitialized) the send( ) method has not yet been invoked.
 1: (Loading) the send( ) method has been invoked, request in progress.
 2: (Loaded) the send( ) method has completed, entire response received.
 3: (Interactive) the response is being parsed.
 4: (Completed) the response has been parsed, is ready for harvesting.
解析:
 0 － （未初始化）还没有调用send()方法
 1 － （载入）已调用send()方法，正在发送请求
 2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
 3 － （交互）正在解析响应内容
 4 － （完成）响应内容解析完成，可以在客户端调用了

2.什么是Fetch请求

Fetch是es6的标准，是对promise的封装。

3.什么是Axios库，如何使用，原理是什么

axios是基于promise和xhr的封装，封装好了get和post等请求

优化

1.前端常见的优化有哪些，我们在点评App中使用了React的一些优化，在社区App中使用了Webpack的一些优化，那么在浏览器这边，我们还可以怎么优化一些呢？比如每次都要重新获取数据吗？如何利用浏览器缓存？如何设置数据的过期时间？CSS方面有什么优化（雪碧图，选择器的效率），加载js文件的时候如何优化？首屏如何优化？如何让首屏的白屏时间少一些？（图片的懒加载，数据的分段拉取）

Web worker与Web Socket

Web worker http://www.ruanyifeng.com/blog/2018/07/web-worker.html

Web Socket https://www.cnblogs.com/fuqiang88/p/5956363.html

renye_lpl

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
浏览器与计算机网络相关知识总结

总结一下重点的浏览器相关的知识和计算机网络相关的知识计算机网络部分1.什么是http，什么是https，什么是http2http是短连接，每次连接都要断掉TCP连接，然后有了http1.1把多个http请求合并到一个连接里。但是1和1.1都是有阻塞的，http1.1也就是我们现在最常使用的http连接，客户端接受响应的时候要按响应的顺序来一一处理。但是！http2使用二进制传输...
复制链接

扫一扫

专栏目录