吉林电商网站建设公司哪家好,wordpress 在线留言插件,怎么做可以聊天的网站吗,网站后台路径1.localStorage和sessionStorage 共同点#xff1a;二者都是以key-value的键值对方式存储在浏览器端#xff0c;大小大概在5M。 区别#xff1a; #xff08;1#xff09;数据有效期不同#xff1a;sessionStorage仅在当前浏览器窗口关闭之前有效#xff1b;localStorag… 1.localStorage和sessionStorage 共同点二者都是以key-value的键值对方式存储在浏览器端大小大概在5M。 区别 1数据有效期不同sessionStorage仅在当前浏览器窗口关闭之前有效localStorage始终有效窗口或浏览器关闭也一直保存因此用作持久数据 2作用域不同sessionStorage数据只能在同一个域的同一页面使用localstorage在所有同源窗口中都是共享的用在多窗口页面共享数据。需要注意的页面仅指顶级窗口如果一个页面包含多个iframe且他们属于同源页面那么他们之间可以共享sessionStorage。 3使用场景localStoragese常用于长期登录判断用户是否已登录适合长期保存在本地的数据。sessionStorage敏感账号一次性登录。 2.cookie、session、localStorage和sessionStorage 会话Session跟踪是Web程序中常用的技术用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确定用户身份Session通过在服务器端记录信息确定用户身份。 1存放位置不同Cookie、localStorage、sessionStroge保存在客户端Session保存在服务端。 2存储大小限制不同cookie数据不能超过4K同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据如会话标识。Session一般情况下没有上限不过建议不要存放太多东西否则影响性能sessionStorage和localStorage虽然也有存储大小的限制但比cookie大得多可以达到5M或更大 3数据共享/作用域不同cookie localStorage sessionStorage数据遵循同源原则 SessionStorage还限制必须是同一个页面。 4数据有效期不同cookie只在设置的cookie过期时间之前有效即使窗口关闭或浏览器关闭 由于Session依赖于名为JSESSIONID的Cookie而Cookie JSESSIONID的过期时间默许为–1只需关闭了浏览器一次会话结束该Session就会失效sessionStorage仅在当前浏览器窗口关闭之前有效localStorage始终有效窗口或浏览器关闭也一直保存因此用作持久数据 5安全性隐私策略不同 Cookie存储在浏览器中对客户端是可见的客户端的一些程序可能会窥探、复制以至修正Cookie中的内容。而Session存储在服务器上对客户端是透明的不存在敏感信息泄露的风险。 假如选用Cookie比较好的方法是敏感的信息如账号密码等尽量不要写到Cookie中。Cookie信息最好加密提交到服务器后再进行解密。而假如选择Session就省事多了反正是放在服务器上Session里任何隐私都能够有效的保护。 6对服务器造成的压力不同 Cookie保管在客户端不占用服务器资源。假如并发阅读的用户十分多Cookie是很好的选择。Session是保管在服务器端的每个用户都会产生一个Session。假如并发访问的用户十分多会产生十分多的Session耗费大量的内存。 7是否参与http通信cookie和session都是参与服务器通信的而localStorage和sessionStorage不参与服务器通信。 8web Storage支持事件通知机制可以将数据更新的通知发送给监听者。 9web Storage的api接口使用更方便localStorage sessionStorage有现成的API cookie需要程序员手动封装Web Storage拥有setItem,getItem等方法cookie需要前端开发者自己封装setCookiegetCookie 3.常用浏览器内核 IE浏览器内核Trident内核也是俗称的IE内核Chrome浏览器内核统称为Chromium内核或Chrome内核以前是Webkit内核现在是Blink内核Firefox浏览器内核Gecko内核俗称Firefox内核Safari浏览器内核Webkit内核Opera浏览器内核最初是自己的Presto内核后来是Webkit现在是Blink内核360浏览器、猎豹浏览器内核IEChrome双内核搜狗、遨游、QQ浏览器内核Trident兼容模式Webkit高速模式。 4.对浏览器内核的理解 主要分成两部分渲染引擎(layout engineer或Rendering Engine)和JS引擎。 渲染引擎负责取得网页的内容HTML、XML、图像等等、整理讯息例如加入CSS等以及计算网页的显示方式然后会输出至显示器或打印机。 浏览器的内核的不同对于网页的语法解释会有不同所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。 JS引擎解析和执行javascript来实现网页的动态效果。 最开始渲染引擎和JS引擎并没有区分的很明确后来JS引擎越来越独立内核就倾向于只指渲染引擎。 5.浏览器缓存机制 缓存可以显著减少网络传输所带来的损耗是性能优化中简单高效的一种优化方式。 对于一个数据请求来说可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求或者发起了请求但后端存储的数据和前端一致那么就没有必要再将数据回传回来这样就减少了响应数据。 从缓存位置上来说分为四种并且各自有优先级当依次查找缓存且都没有命中的时候才会去请求网络 Service Worker-》Memory Cache-》Disk Cache-》Push Cache-》网络请求 通常浏览器缓存策略分为两种强缓存和协商缓存并且缓存策略都是通过设置 HTTP Header 来实现的。 6.http缓存 http---HTTP缓存_http缓存csdn-CSDN博客 HTTP 缓存是web性能优化的重要手段通过复用缓存资源减少了服务器和客户端的通信次数降低网络延迟加速页面加载降低服务器端的压力。显著提升网站和应用的性能提高用户体验。缺点占内存。 http缓存主要是针对htmlcssimg等静态资源常规情况下我们不太会去缓存一些动态资源因为缓存动态资源的话数据的实时性就不能保证所以我们一般都只会去缓存一些不太容易被改变的静态资源。 HTTP 缓存策略分为两种强缓存和协商缓存 优先级: 强缓存 协商缓存 强缓存强缓存即强制直接使用缓存 ExipresCache-Control cache-control是expires的完全替代方案在可以使用cache-control的情况下就不要使用expires 强缓存不会向服务器发送请求直接从缓存中读取资源状态码200并且size显示from disk cache或from memory cache Expires:new Date(2023-2-2 23:59:59)设置一个过期时间服务器端返回在响应头中携带该参数存在问题本地时间和服务器时间不同步的问题. Cache-control:max-ageN,N就是需要缓存的秒数服务器端返回在响应头中携带该参数。从第一次请求资源的时候开始往后N秒内资源若再次请求则直接从磁盘或内存中读取不与服务器做任何交互。 协商缓存协商缓存就得和服务器协商确认下这个缓存能不能用。 Last-Modified / If-Modified-Since Etag /If-None-Match ETag并不是last-modified的完全替代方案而是补充方案具体用哪一个取决于项目业务场景无孰好孰坏之分 协商缓存会先向服务器发送一个请求服务器会根据这个请求的 request header 的一些参数来判断是否命中协商缓存如果命中则返回 304 状态码并带上新的 response header 通知浏览器从缓存中读取资源。 基于last-modified的协商缓存通过比对资源文件的修改时间进行协商缓存 Response Headers携带Last-Modified:昨天 Request Headers携带IF-Modified-Since:昨天 缺点 在文件内容本身不修改的情况下依然有可能更新文件修改时间比如修改文件名再改回来此时文件内容并没有修改缓存依然失效了因为文件修改时间记录的最小单位是秒所以当文件在几百毫秒内完成修改的时候文件修改时间并不会改变这样即使文件内容修改了依然不会返回新的文件 基于ETag的协商缓存通过生成文件内容的唯一哈希值即文件指纹进行协商缓存 采用了一串编码来标记内容称为ETag Response Headers携带E-Tag:1234567 Request Headers携带If-None-Match:1234567 ETag就是将原先协商缓存的比较时间戳的形式修改成了比较文件指纹。 如果两个文件指纹完全吻合说明文件没有被改变则直接返回304状态码和一个空的响应体并return。如果两个文件指纹不吻合则说明文件被更改那么将新的文件指纹重新存储到响应头的ETag中并返回给客户端 缺点 需要文件尺寸大数量多并且计算频繁那么服务端就需要更多的计算开销从而影响服务器的性能ETag有强验证和弱验证所谓强验证ETag生成的哈希值深入到每个字节从而保证文件内容绝对的不变非常消耗计算量弱验证则是提取文件的部分属性来生成哈希值因此不必精确到每个字节所以整体速度会比强验证快但是精确率不高会降低协商缓存的有效性 7.从输入URL 到网页显示的完整过程 DNS域名解析,解析到真正的IP地址客户端与服务端建立TCP连接TCP/IP连接通过三次握手客户端发送Http请求封装HTTP报文TCP报文头IP报文头...服务器接收到http请求根据请求报文头中的信息执行对应的处理并返回HTML文件给客户端浏览器客户端接收到HTML文件后开始解析、渲染并展示网页DOM树、STYLE树、渲染树、绘制页面数据传输完毕关闭客户端与服务器端的双工连接通过四次挥手。 8.重排和重绘 重排reflow重新生成布局重新排列元素。 当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)浏览器需要重新计算元素的几何属性将其安放在界面中的正确位置这个过程叫做重排。重排也叫回流简单的说就是重新生成布局重新排列元素。 重绘repaint某些元素的外观被改变例如元素的填充颜色 背景色。 当一个元素的外观发生改变但没有改变布局重新把元素外观绘制出来的过程叫做重绘。 注意重绘不一定导致重排但重排一定会导致重绘。重排开销更大。 如何避免重绘或者重排 集中改变样式不要一条一条地修改 DOM 的样式集中改样式可先把所有样式给class然后再给标签。不要把 DOM 结点的属性值放在循环里当成循环里的变量。为动画的 HTML 元件使用 固定定位fixed 或 绝对定位(absoult) 那么修改他们的 CSS 是不会 重排的。不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。尽量只修改固定定位fixed 或 绝对定位(absoult) 元素对其他元素影响不大使用BFC特性不影响其他元素位置频繁触发resize、scroll使用节流和防抖使用createDocumentFragment批量操作DOM编码上避免连续多次修改可通过合并修改一次触发对于大量不同的 dom 修改可以先将其脱离文档流比如使用绝对定位或者 display:none在文档流外修改完成后再放回文档里中。动画实现的速度的选择动画速度越快回流次数越多也可以选择使用 requestAnimationFrame。css3 硬件加速transform、opacity、filters开启后会新建渲染层 9.跨域 跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的是浏览器对javascript施加的安全限制。当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。 注意跨域限制访问其实是浏览器的限制。理解这一点很重要 同源策略是指协议域名端口都要相同其中有一个不同都会产生跨域 1vue正向代理 vue正向代理proxy利用浏览器有跨域但是服务器没有跨域限制通过中间服务器转发数据。 当进行跨域访问时vue会生成一个同源的虚拟服务器请求将发送到虚拟服务器由虚拟服务器访问目标服务器并转发数据。 在vue.js开发环境下调用接口如何避免跨域 借助vue-cli脚手架开启代理服务器在vue.config.js文件中配置proxy 在工程目录【config/index.js】中对proxyTable项进行如下配置 proxyTable: {/api: {target: http://192.168.43.37:80/,changeOrigin: true,pathRewrite: {^/api: }}}, 如上述配置后调用接口http://xxxx:80/login可以简写成/api/login本地会虚拟化一个服务器并帮你把这个请求转发给后台从而避免跨域问题。 2Nginx反向代理 跨域请求限制是浏览器的安全策略服务器端并不存在跨域访问这一说。利用Nginx的地址映射将请求发送在一个同源的中间层但是服务器实际请求地址为目标服务器这样就不存在跨域访问了。 例如前端项目放在地址A接口放在地址BNginx服务器放在nginxIpAddress:3000地址。 当访问项目的时候你访问的是nginxIpAddress:3000nginx将你的请求映射到项目的真实地址A同理项目中的接口请求例如nginxIpAddress:3000/api/*nginx将接口请求映射到接口服务的真实地址B。你始终访问的是nginxIpAddress:3000端口下的地址自然不会存在跨域问题。 3利用Nginx为响应添加跨域头解决 将原本要请求的服务地址改为请求nginx服务器利用nginx地址映射将请求映射到真实的服务地址同时需要添加两个响应头信息一个是Access-Control-Allow-OriginAccess-Control-Allow-Methods。 Access-Control-Allow-Origin直译过来是允许跨域访问的源地址信息可以配置多个(多个用逗号分隔)也可以使用*代表所有源。 Access-Control-Allow-Methods直译过来是允许跨域访问的请求方式值可以为 GET POST PUT DELETE…,可以全部设置也可以根据需要设置多个用逗号分隔。 4corsCross-Origin Resource Sharing跨域资源共享 原理它允许浏览器向跨源服务器发出XMLHttpRequest请求配置响应头Accesse-Control-Allow-Origin:*,违背任意一条同源策略都能访问响应数据从而克服了AJAX只能同源使用的限制。缺点这样会造成任何人都能向这台服务器要数据。 5jsonp跨域利用script标签可以跨域请求资源将回调函数作为参数拼接在url中。后端收到请求调用该回调函数并将数据作为参数返回回去注意设置响应头返回文档类型应该设置成javascript请求数据类型dataType为jsonp。缺陷是只支持get请求且存在一些安全隐患。 ps:不存在跨域问题的几个标签link ,script,img,iframe 6websocket 7postMessage 10.常见的web前端攻击方式有哪些 XSS、CSRFCross Site Request Forgery 跨站请求伪造、DDOS、SQL注入 11.优雅降级和渐进增强 渐进增强 progressive enhancement 针对低版本浏览器进行构建页面保证最基本的功能然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级 graceful degradation 一开始就构建完整的功能然后再针对低版本浏览器进行兼容。 区别 a. 优雅降级是从复杂的现状开始并试图减少用户体验的供给 b. 渐进增强则是从一个非常基础的能够起作用的版本开始并不断扩充以适应未来环境的需要 c. 降级功能衰减意味着往回看而渐进增强则意味着朝前看同时保证其根基处于安全地带 12.get和post的区别 1传参方式GET把参数放在URL里面而POST放在请求体(request body)中 2传参长度限制GET请求在URL中传递的参数是有长度限制的而POST没有 3安全性GET请求没有POST请求安全,因为参数直接暴露在URL上面 所以不能用来传递敏感信息POST 比 GET 安全因为数据在地址栏上不可见。 然而从传输的角度来说他们都是不安全的因为 HTTP 在网络上是明文传输的只要在网络节点上捉包就能完整地获取数据报文。 要想安全传输就只有加密也就是 HTTPS。 4缓存GET请求会被浏览器主动cache而POST不会除非手动设置 GET产生的URL地址可以被Bookmarks,而POST不可以GET请求的参数会被完整保存在浏览器历史记录里面,而POST参数不会被保留 GET在浏览器回退时候是无害的,而POST会再次请求 GET请求只能进行url编码,而POST可以支持多种编码 GET请求的参数类型只接受ASCII字符,而POST没有限制 13.http状态码 http状态码是用来表示网页服务器超文本传输协议响应状态的3位数字代码。 1XX 消息代表请求已被接受需要继续处理 100 Continue客户端应当继续发送请求101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议 2XX 成功操作被成功接收并处理 200 OK请求成功。一般用于GET与POST请求201 Created 已创建。成功请求并创建了新的资源202 Accepted 已接受。已经接受请求但未处理完成 3XX 重定向需要进一步的操作以完成请求 301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI返回信息会包括新的URI浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI304 Not Modified 未修改。所请求的资源未修改服务器返回此状态码时不会返回任何资源。客户端通常会缓存访问过的资源通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源305 Use Proxy 使用代理。所请求的资源必须通过代理访问306 Unused 已经被废弃的HTTP状态码307 Temporary Redirect 临时重定向。与302类似。使用GET请求重定向 4XX请求错误请求包含语法错误或无法完成请求 400 Bad Request 客户端请求的语法错误服务器无法理解401 Unauthorized 请求要求用户的身份认证402 Payment Required 保留将来使用403 Forbidden 服务器理解请求客户端的请求但是拒绝执行此请求404 Not Found 请求的资源网页等不存在405 Method Not Allowed 客户端请求中的方法被禁止 5XX服务器错误服务器在处理请求的过程中发生了错误 500 Internal Server Error 服务器内部错误无法完成请求501 Not Implemented 服务器不支持请求的功能无法完成请求502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时从远程服务器接收到了一个无效的响应503 Service Unavailable 由于超载或系统维护服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中504 Gateway Time-out 充当网关或代理的服务器未及时从远端服务器获取请求 14.HTTP和HTTPS 1默认端口http协议的默认端口为80https的默认端口为443 2安全性http传输的数据都是未加密的也就是明文的。https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议比http协议的安全性更高。 3费用Https协议需要ca证书费用较高。 15.为什么HTTPS安全 因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息而如果使用HTTPS密钥在你和终点站才有。https之所以比http安全是因为他利用ssl/tls协议传输。它包含证书卸载流量转发负载均衡页面适配浏览器适配refer传递等。保障了传输过程的安全性。 16.http报文 HTTP 报文是在应用程序之间发送的数据块,这些数据块将通过以文本形式的元信息开头用于 HTTP 协议交互。请求端(客户端)的 HTTP 报文叫做请求报文响应端(服务器端)的叫做响应报文。 HTTP 报文本身是由多行(用 CRLF 作换行符)数据构成的字符串文本。 HTTP 请求报文由请求行、请求头和请求体组成 请求行由三部分构成请求方法如 GET、POST请求目标通常是一个 URL 表明了要操作的资源版本号表示报文使用的 HTTP 协议版本。 请求头HTTP的报文头报文头包含若干个属性格式为“属性名:属性值”服务端据此获取客户端的信息。与缓存相关的规则信息均包含在header中。 请求体就是 HTTP 要传输的内容HTTP 可以承载很多类型的数字数据:图片、音频、视频、HTML 文档等。 HTTP 响应报文由状态行、响应头和响应体组成 状态行包含了 协议版本、状态码以及状态描述。 和请求报文的请求头类似响应头也由键值对组成每行一对键和值用英文冒号 : 分隔。响应头域允许服务器传递不能放在状态行的附加信息这些域主要描述服务器的信息和Request-URI进一步的信息 响应体服务器返回给浏览器的响应信息响应数据的格式是根据服务器来的常见的响应数据格式有text/html、application/json、multipart/form-data等。 HTTP 首部字段 在 HTTP 的请求头和响应头中都是由首部字段来表示的首部内容可以为客户端和服务器分别处理请求和响应提供所需要的信息。 首部字段可以分为通用首部字段、请求首部字段、响应首部字段、实体首部字段 通用首部这个是客户端和服务器都可以使用的首部提供了报文相关的最基本信息。不管是响应报文和还是请求报文。例如 connection 允许客户端和服务器指定与请求/响应连接有关的选项 Date 提供日期和事件标识说明报文创建时间 请求首部请求报文特有的首部。 Host 给出了接收请求的服务器的主机名和端口 Referer 提供包含当前请求URI的文档的URL User-Agent 将发起请求的应用程序名告诉服务器。 Accept首部将客户端提供了一种将其喜好和能力告知服务器的方式包括他们想要什么可以使用什么他们不想要什么。 Accept 告诉服务器能发送哪些媒体类型。 Accept-Charset 告诉服务器能发送哪些字符集。 Accept-Encoding 告诉服务器能够发送哪些编码。 条件请求首部在客户端需要为请求加上限制时使用具有分支判断功能 Expect 允许客户端列出某请求所学要的服务器行为。 If-Match 如果实体标记与文档当前的实体标记相匹配就获取这个文档缓存相关 If-Modified-Since 如果资源在指定日期之后修改过那么就获取这个文档。缓存相关 安全请求首部简单的安全机制要求客户端在获取特定的资源之前先对自身进行验证。 Authorization 包含了客户端提供给服务器以便对其自身进行认证的数据。 Cookie 客户端用它向服务器传送了一个令牌——他并不是真正的安全首部但确实包含了安全功能 代理请求首部关于代理控制的首部。 Max—Forward 在通往源服务器的路径上将请求转发给其他代理或者网关的最大次数与TRACE方法一起使用。 响应首部响应报文特有的首部。 Age 从最初创建开始响应持续时间。 Public 服务器为其资源支持的请求方法列表 Server 服务器应用程序软件的名称和版本。 协商首部如果资源有多重表示方法如某文档有中文和英文两个版本就可以通过这些首部与服务器进行协商。 Accept-Ranges 对此资源来说服务器可接受的范围类型。 安全响应首部与安全响应首部相关实现安全功能。 实体首部用来描述HTTP报文的负荷请求响应报文都可能出现。 Allow 列出了可以对此实体执行的请求方法 Location 告知客户端实体处于何处;用于将接收端定向到资源的可能是新的位置URL上去。 内容首部提供了与实体内容有关的特定信息说明了其类型尺寸以及处理它所需的有用信息。 content-Base 解析主体中的相对URL时使用的基础URL。 content-Encoding 对主体执行的任意编码方式 content-Language 理解主体时最合适的自然语言。 content-Length 主体的长度或尺寸 content-Type 这个主体的对象类型 实体缓存首部说明何时如何进行缓存。 ETag 与此实体相关的实体标记 Expires 实体不再有效要从原始的源再次获取此实体的日期和事件 Last-Modified 这个实体最后一次被修改的日期和时间。 扩展首部用户自定义的首部。 17.安全传输加密算法 crypto-js是谷歌开发的一个纯JavaScript的加密算法类库可以非常方便的在前端进行其所支持的加解密操作。目前crypto-js已支持的算法有MD5、SHA-1、SHA-256、AES(对称)、RSA非对称公钥私钥、Rabbit、MARC4、HMAC、HMAC-MD5、HMAC-SHA1、HMAC-SHA256、PBKDF2等。使用时可以引用总文件也可以单独引用某一文件。 CryptoJS提供ECB,CBC必须有iv向量,CFB,OFB,CTR五种模式
