从输入url到展示的过程发生了什么。
- 输入网址
- DNS解析
- 什么是DNS(域名系统)解析,通过解析主机名,最终得到主机名对应的IP地址。通俗的讲,我们更习惯记住一个网站的名字,例如www.baidu.com而不是它的ip地址,DNS就相当于电话本,比如你要找百度,我就得翻翻我的电话本,找到对应的ip。ip简单粗暴理解就是服务器。
- 建立TCP连接(三次握手四次挥手)
- 三次握手
- 第一次握手:客户端将带有SYN(联机标识)发送给服务器
- 第二次握手:服务器收到SYN后,给客户端发送一个ACK(确认标识)和SYN标识
- 第三次握手:客户端收到SYN标识后,给服务器发送ACK标识建立连接,并开始传输数据
- 四次挥手
- 客户端向服务器发送带FIN(结束标识),告知服务器即将断开;等待服务器确认。
- 服务器收到结束标识(FIN)后,向客户端发送确认标识(ACK)。收到断开请求
- 待数据传输完成后,服务器向客户端发送结束标识FIN,告知客户端可以断开。
- 客户端收到结束标识后,向服务器发送确认标识ACK,然后断开连接。
- 客户端发送HTTP请求
- 服务器处理请求
- 服务起响应请求
- 浏览器显示HTML
HTTP和HTTPS
HTTP和HTTPS的区别
- HTTP:http是超文本传输协议,http协议是以明文的方式发送信息,如果黑客截取了浏览器和服务器之间的传输报文,就可以直接获取其中的信息。存在信息窃听、篡改、劫持的风险
- HTTPs:htpps是基于http上基础上添加了SSL,SSL对数据进行压缩、加密,使得数据传输更加的安全。
HTTP中的get和post请求的区别
- get:指的是从指定的资源请求数据。
- post:向指定的资源提交要被处理的数据。例如提交表单。
- get的参数通过url传递,长度也有限制,而post没有。
- post的参数通过请求体(request body)传递
- get的安全系数比post低,因为参数传递直接暴露在url中,所以不能用来传递敏感信息。
- get请求只能进行url编码,而post支持多种编码。
HTTP状态码
- 1xx收到请求正在处理
- 2XX该请求已被成功处理
- 200 表示客户端的请求已被服务器正常处理
- 204 客户端请求成功,但是服务器端没有资源返回
- 206 范围请求
- 3XX重定向,响应结果表明,浏览器需要执行某些特殊的处理以正确处理请求
- 301永久重定向
- 302临时重定向
- 304该状态码表示客户端发送附带的请求条件时,服务器允许请求访问资源,但未满足条件的情况。
附带条件的请求指的是get方法的请求报文中包含If-Match,If-Modified-Since,If-None-Match,If-Range,If-Unmodified-Since 中任一首部。
- 4XX客户端错误
- 400 错误请求,表示该请求报文中语法错误
- 401 未经授权
- 403 资源不可用,服务器理解客户端请求,但拒绝处理它,由于权限的缘故。
- 404 服务器没有找到该网址
- 5XX服务器错误
- 500 内部服务错误,有可能是前端请求参数传错,或者是服务器的问题
- 503 服务器处于超负载或者是停机维护状态(服务器正忙)
为什么产生跨域?怎么解决
- 跨域产生的原因:因为浏览器的同源策略,在协议、域名、端口号不一样的情况下就会产生跨域。
- 跨域的解决方法。
- proxy代理
- proxy原理:浏览器和服务器之间存在跨域问题,而服务器和服务器之间不存在跨域问题,所以浏览器将请求代理给自己的服务器,再由服务器发起和后端服务器发起请求。
- jsonp动态创建script
- CORS请求头
- proxy代理
存储
- 为什么需要cookie和storage?
- 因为http协议是无状态的,导致了服务器无法分辨是谁浏览了网页,为了维持用户在网站的状态。
- 我们经常需要对业务中进行一些存储,通常分为短暂性存储和持久性存储
- 短暂性存储,我们只需要将数据存在内存中,只在运行时可用。
- 持久性存储,浏览器可以存在cookie,localStorage/sessionStorage
- cookie:通常存储用户的身份,登陆信息等等;http中自动携带,体积上限为4K,可自行设置过期时间。一般引用js-cookie,vue-cli自行安装依赖,引用就行。
//1、先安装依赖 npm i js-cookie //2、在main.js中引入 import Cookie from 'js-cookie' //一般的使用方法 this.Cookie.set('name','小可爱');//设置key为name;value为小可爱 this.Cookie.set("age","20",{expires:7});//设置数据,并设置有效期为7天 this.Cookie.get('name')//获取数据 this.Cookie.remove('name')//删除数据
- storage:不会在网络中进行传输,相对于cookie安全许多,但是storage是依赖cookie的。当我们访问一个站点时,服务器会为这个用户产生一个storage_id,并将这个id以cookie的形式发送给客户端。以后这个客户端的所有请求都会自动携带这个cookie。
//storage的使用方法 window.localStorage.setItem('key','value'); //存数据 window.sessionStorage.setItem('key','value'); window.localStorage.getItem('key');//获取数据
- cookie、localStorage、sessionStorage的区别。
- cookie:存储数据在4k左右,每次都会携带http请求头中,一般由服务器生成,可以设置失效时间。如果由浏览器生成的话,默认是关闭浏览器失效。
- localStorage:除非被永久清除,要不然永久保存。
- sessionStorage:仅在当前会话有效,关闭浏览器或者页面被清除。
- Storage的存储大小为5m,仅在浏览器中存储,不参与服务器中的通信。
内存泄漏和内存溢出
内存泄漏:
- 内存泄漏是内存一直被占用,导致内存浪费,致使系统崩溃。
- 内存泄漏的场景:
- 意外的全局变量,无法被收回。
- 定时器无法被正确关闭,导致所引用的外部变量无法释放
- 闭包
- 死循环
内存溢出:
- 内存溢出是指内存不够用,内存泄漏堆积过多就会导致内存溢出。
前端网页性能的优化
页面上的优化
- 减少HTTP请求
- 合并js和cs文件
- 使用icon 图标库
- 减少DNS查询
- 避免重定向
- 利用缓存;缓存文件(比如图片)在本地存有副本,浏览器下次请求的时候可以从本地磁盘直接读取,而不会再次请求图片的url。
- 强缓存:不用请求服务器,直接从缓存中获取资源。强缓存的设置是根据请求头的cache-control字段设置的;cache-control字段有以下属性
- cache-control:max-age = xxxx,public
- 客户端和代理服务器端都可以缓存资源
- 客户端在xxx秒内的有效期内,如果有请求资源的需求直接读取,状态码返回200
- 如果用户做了刷新,就像服务器发起http请求
- cache-control:max-age = xxxx,private
- 只允许客户端缓存资源,服务器端不可以
- cache-control:max-age =xxxx,immutable
- 客户端在xxxx秒的有效期内,如果有请求资源的需求,直接读取,状态码返回200
- 即使用户做了刷新操作也不会向服务器发送http请求
- cache-control:no-cache
- 跳过强缓存,但是不阻碍设置协商,一般做了强缓存,只有强缓存失效了才会走协商缓存。设置了no-cache就不会走强缓存,每次请求都会询问服务器
- cache-control:no-store
- 不缓存,这个让客户端和服务器都不能缓存资源,也就没有所谓的强缓存和协商缓存了。
- cache-control:max-age = xxxx,public
- 协商缓存:向服务器发送请求;服务器根据这个请求头的一些参数(Etag和last-modified)来判断是否命中协商缓存,如果命中则返回304状态码,并带上新的请求头通知浏览器从缓存中读取资源。
- 强缓存:不用请求服务器,直接从缓存中获取资源。强缓存的设置是根据请求头的cache-control字段设置的;cache-control字段有以下属性
- 延迟加载
- js延迟加载的方式
<script async></script>
//只是用与外部脚本文件- 让js放在页面底部
- 图片懒加载利用vue-lazyload插件
- js延迟加载的方式
- 预先加载
- 减少Dom元素数量
- 尽量减少iframe使用
- 避免404错误
- 减少页面的重绘和回流
服务器方面的优化
- 使用CDN预解析;通过DNS预解析告诉浏览器未来我们可能从某个特定的URL获取资源,当浏览器真正使用到该域中的某个资源时就可以尽快的完成DNS解析。
- 启用Gzip
- 配置Etag
- ajax使用get方法
- 避免图片src为空
Cookie方面
- 减少cookie、storage大小
css方面
- 把样式放在中
- 减少css表达式
- 使用link代替@import
- link属于HTML标签,而@import是css提供的,页面被加载时,link会同时加载,而@import引用的css会等到页面加载完再加载
- @import只在IE5以上才能被识别,而link是HTML标签,没有兼容性问题。
- link的权重高于@import
- 雪碧图
- 多个图片集合在一张的图片
- 使用雪碧图可以减少网络请求次数。
- 通过background-position去定位图片在屏幕的哪个位置
js方面
- 把脚本放在页面底部
- 使用外部的css和js
- 移除重复脚本
- 减少Dom操作
web前端兼容性问题总结
- HTML获取id元素
- FireFox:document.getElementById('idname')
- ie:document.idname或者document.getElementById('idname')
- 解决办法:统一使用document.getElementById('idname')
- const问题
- FireFox:可以使用var和const关键字定义变量
- ie:只能使用var来关键字来定义变量
- 解决办法:全部使用var来定义变量
- window.location.href问题
- FireFox和ie2.0版本下可以使用window.location.href;FireFox1.5下只能使用window.location
- 解决办法:统一使用window.location
- css鼠标移上变小手的问题
- FireFox:不支持cursor:hand,支持cursor:pointer
- ie:支持cursor:hand和cursor:pointer
- 解决办法:统一使用cursor:pointer
- ie6下图片下有空隙产生
- 解决办法:改变html排版,或者img设置display:block;或者vertical-align:top
- 1px的高度不同的问题
- 利用flixeble.js解决。
- 根据屏幕分辨率大小的不同,自动调整根元素html中的font-size,从而达到适配移动端。flixeble.js的原理是先获取设备的像素比,然后根据设备的像素比动态的设定viewpoint的值,让viewpoint的值(宽度)等于实际的设备物理宽度。
- 利用伪类+transform解决
- 给父级元素设定相对定位;position:relative,子元素利用伪类+绝对定位+transform:scale()解决。
.parent{ position:relative }; .son::after{ position:absolute; content:''; top:0; left:0; width:200%; height:200%; transform:scale(0.5); border:1px solid red; pointer-events:none //元素永远不会成为点击事件 }
- 利用媒体查询判断设备像素比值
@midea screen and (min-device-pixel-ratio : 2){ .son{ border:0.5px solid red } } @midea screen and (min-device-pixel-ratio : 3){ .son{ border:0.33333px solid red } }
- 利用flixeble.js解决。
- 解决移动端的适配问题
- 在head设置meta
<meta name = "viewpoint" content="width = device-width , initial-scale=1.0 , maximum-scale = 1 ,minimum-scale = 1 , user-scalable = no" />
- initial-scale:初始的缩放比
- maximum-scale:允许用户缩放的最大比例
- minimum-scale:允许用户缩放的最小比例
- user-scalable:no;不允许用户手动缩放
前端的安全性问题
- XSS跨站脚本攻击是web浏览器攻击中最常见的一种。原理是通过**对网页注入可执行代码且成功被浏览器执行,达成有效的攻击目的。**一般有以下三种类型
- 反射性XSS;这种跨站代码一般存在于某一链接中,当被攻击者访问这些链接时,跨站代码就执行。攻击原理:通过给别人发送带有恶意脚本代码参数的URL,当URL被打开时,特有的恶意代码参数被HTML解析、执行。它的特点时非持久性,必须用户点击带有特性参数的链接才能引起。
- 存储型XSS:这种XSS用起来