给别的公司提供网站建设,免费的虚拟电脑app,中国设计素材网,2023新闻摘抄大全大家好#xff0c;我是若川。最近组织了源码共读活动#xff0c;感兴趣的可以加我微信 ruochuan12 参与#xff0c;每周大家一起学习200行左右的源码#xff0c;共同进步。已进行四个月了#xff0c;很多小伙伴表示收获颇丰。想学源码#xff0c;极力推荐订阅我写的《学习… 大家好我是若川。最近组织了源码共读活动感兴趣的可以加我微信 ruochuan12 参与每周大家一起学习200行左右的源码共同进步。已进行四个月了很多小伙伴表示收获颇丰。想学源码极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。同时推荐参与源码共读活动。本文来自Fishing 读者投稿原文链接https://juejin.cn/post/7036608827252277279一、什么是URIURI, 全称为(Uniform Resource Identifier), 也就是统一资源标识符。它并不是我们常说的网址URL, 实际上URI URNURL。1.URI的结构它主要由以下几个结构组成scheme 表示协议名比如http,https等 user:passwd 表示登录主机时的用户信息 host 主机名 port 端口 path 资源路径 query 表示查询参数通常以?开头多个值之间以连接 fragment 页面资源锚点位置常见为:https://www.baidu.com/path/index.html#name 2.URI编码URI只能使用ASCII, ASCII之外的字符是不支持显示的。此外URI引入了编码机制将所有非ASCII码字符和界定符转为十六进制字节值然后在前面加个%例如空格被转义成了%20。二、HTTP状态码你能记住哪些HTTP状态码总体分为五类整体范围已定义范围含义100~199100~101信息提示200~299200~206成功300~399300~305重定向400~499400~415客户端错误500~599500~505服务器错误接下来详细看下每个状态码的含义1xx相关100请求中间状态客户端需要继续下一步请求。101协议切换。例如当HTTP请求升级到websocket服务的时候如果服务端同意升级则会返回101状态码。2xx相关200请求成功。请求中最常见的状态码也是开发最喜欢的状态表示请求一切正常。201成功请求并创建了新的资源。202服务端已接受请求但未完成处理。204没有内容。表示只返回head头信息主体内容没返回。206表示部分内容。常见于大型文件上传或下载的过程。3xx相关301永久重定向。将资源永远的移到新的域名下。302临时重定向。将资源临时移到新地方以后还有可能再移回来。备注301、302常见于SEO优化或http缓存。以http缓存为例若永久重定向到新资源则浏览器会缓存新资源并抛弃老域名的缓存。若临时重定向则不做缓存优化。304常见于http缓存。例如 max-age时间过期命中协商缓存的时候浏览器会携带相关信息到服务端服务器对比信息后发现文件没更新可以继续使用的情况下就会返回304状态码意思是告诉客户端文件可以继续使用。305使用代理。表示当前请求的资源必须通过代理访问。307临时重定向与302类似。4xx相关400开发者请求错误。比较粗糙的提示具体错误原因不明。401要求请求方也就是用户需要进行身份认证。403服务器拒绝访问。因法律、敏感词汇等原因服务器拒绝客户端的请求。404资源未找到。这个很容易理解也比较常见服务端没有对应的资源内容的时候会返回此状态码。405请求方法错误。比较常见于服务端只支持POST请求但是开发者用GET方式请求了接口就会返回这个错误。反之亦然。406服务端资源因某种原因无法满足客户端的请求条件。407与401类似要求代理的身份认证。408客户端发送请求时间超时服务器没有时间继续等待了。409服务器处理内容的时候发生了冲突。410类似404表示资源以前可能存在现在被删除了。413客户端请求体过大服务器因无法处理而拒绝。414请求的URL地址太长服务器无法处理。5xx相关500服务器内部错误具体啥错误咱也不知道只知道是出错了。501表示服务器不支持客户端的请求功能。502作为网关或者代理工作的服务器尝试执行请求时从远程服务器接收到了一个无效的响应。503服务器内部较忙暂时无法相应。504充当网关或代理的服务器未及时从远端服务器获取请求。505服务器不支持请求的HTTP协议的版本无法完成处理。三、GET与POST的区别GET请求会被浏览器留下访问记录而POST不会留下记录GET请求参数携带在URL后面不太安全而POST参数会放到请求体重适合传输敏感数据GET只能发送 ASCII 字符而POST没限制。发送数据时机不同。GET请求会一次性将数据发送出去而POST发送分两部分先发送header头部分如果服务端相应100状态码(继续)然后再发送body部分。受URL长度限制GET传输数据较少而POST传输数据量较大一般默认为不受限制。从幂等性的角度来说GET是幂等的(只要参数不变返回的结果总是相等的)而POST不是。GET在浏览器回退时是无害的而POST会再次发起请求。四、COOKIE相关1.什么是cookie从本质上来说cookie就是存储在客户端的一小段文本以键值对的方式存储在浏览器里。通常浏览器只会分配4KB的空间给cookie所以存储内容较少。通常js可以设置、读取、删除cookie服务端也可以通过Set-Cookie头字段对浏览器进行Cookie写入。若服务端设置属性为http-only客户端js脚本则无法读取到Cookie值。以下是百度网站的一段Cookie截图属性说明Name Cookie名称Value Cookie内容Domain 可以读取当前Cookie的有效域名Path 可以读取当前Cookie的有效路径Expires/Max-Age Cookie有效绝对时间/过期相对时间(Session代表当前会话期间网页关闭即失效)Size Cookie大小HttpOnly 当前Cookie是否只能通过http获取携带到服务端js脚本无法获取Secure 是否只能通过https传输CookieSameParty Cookie安全模式支持三个值1、None默认模式http请求默认会带上Cookie值。2、Lax模式只能再GET方法中携带Cookie。3、Strict严格模式只能在当前域名下访问Cookie其他域名均无法访问。Priority 优先级chrome的提案定义了三种优先级Low/Medium/High当cookie数量超出时低优先级的cookie会被优先清除2.Cookie的生命周期我们通常通过Expires和Max-Age这两个属性来设置Cookie的过期时间。前者指定过期的具体时间后者是过期的相对时间。若过期浏览器不会主动删除Cookie内容只是无法被读取到或者无法发送到服务端。3.Cookie的作用域涉及到两个关键词汇1、域名(Domain)。2、路径(Path)。不同域名或路径下无法相互访问Cookie内容当然顶级域名下的Cookie在子域名之间是共享的以百度网站为例.baidu.com下的cookie可以共享给子域名访问例如www.baidu.com、tieba.baidu.com等。根路径(/)下的cookie也可以共享给任何子目录访问。4.安全、性能优化相关Cookie是以字符串的方式存储在客户端以明文的方式在服务器与客户端之间传输容易被拦截修改。不论当前请求是否需要Cookie请求都会携带上当前域名下的所有Cookie所以会产生大量不必要的数据影响服务端性能以及带宽。可以通过设置Cookie的Domain以及Path适当控制携带的数量。5.其他存储方式除了Cookie存储之外现代浏览器还支持localStorage、sessionStorage存储两者的主要区别在于前者是永久存储在浏览器后者的生命周期是会话级别的网页关闭即消失。还有indexDB感兴趣的同学可参考阮老师的 浏览器数据库 IndexedDB 入门教程五、跨域问题1.为什么会产生跨域相信现在绝大多数公司采用的都是前后端分离的开发模式通过Ajax请求响应数据当前访问网页的URL与接口地址用的不是一个域名。这个时候浏览器就会认为是跨域了存在一定安全隐患。详细来说就是请求网页与接口之间只要满足以下任一条件即被认为跨域1、协议不同2、域名不同3、端口号不同因为浏览器遵循同源策略当请求与响应不同源的时候浏览器会试图先发送一个OPTIONS预请求给服务端同时会加上Origin源地址和Host目标地址询问是否允许跨域也就是看http返回头字段Access-Control-Allow-Origin若是*表示允许任何请求也可以是指定的请求源地址。若允许则继续否则浏览器会中断后续请求并打印错误。注意是被浏览器拦截了请求是到达服务端了。服务端发号施令控制是否允许跨域而浏览器是实际执行者。2.常见的跨域解决方案JSONPJSONP实现的原理虽然XMLHttpRequest对象遵循同源政策但是script标签不一样它可以通过 src 填上目标地址从而发出 GET 请求实现跨域请求并拿到响应。接下来我们封装一个简单的JSONPlet myJSONP (_url,params,callback) {let splitUrl (_url,params) {let str ;for(let key in params){str keyparams[key]}return _url ? str}return new Promise(resolve {let _srcipt document.createElement(script);_srcipt.src splitUrl(_url,params);document.body.appendChild(_srcipt);window[callback] res {resolve(res)//渣男用完即删除document.body.removeChild(_srcipt)}})
}Nginx让运维同学在Nginx中做反向代理将所有请求中转一下让服务端识别请求以为是来自同源的请求予以通过。比如说现在客户端的域名为client.com服务器的域名为server.com客户端向服务器发送 Ajax 请求。Nginx配置方式如下server {listen 443;server_name client.com;location /yourApiAddress {proxy_pass server.com;}
}Nginx在其中相当于跳板机的作用。CORS开发同学代码中CORS设置允许任何来源即可。个人推荐这种配置基本上一劳永逸Nginx代理是运维同学设置的经常遇到服务器调整等原因导致跨域反反复复比较烦人。其他方式除此之外就是一些奇淫技巧的跨域解决方案例如postMessage、iframe等等现实中基本上不会用到。就不建议深入了解了记个大概即可。六、HTTP请求方法有哪些HTTP1.0GET、POST、HEAD HTTP1.1PUT、PATCH、DELETE、OPTIONS、TRACE、CONNECT方法描述GET获取资源POST资源传输通常会修改服务器资源HEAD获得请求头信息PUT更新资源DELETE删除资源PATCH对PUT的补充对已知资源部分更新OPTIONS列出请求资源支持的请求方法用来跨域请求TRACE追踪请求/响应路径用于测试或诊断CONNECT将连接改为管道方式用于代理服务器七、常见HTTP请求头有哪些1.Request HeadersUser-Agent 浏览器信息内容包含发出请求的用户信息。Cookie 当前域名下所有能读取到的Cookie内容不论服务器是否需要都会被携带。Accept 浏览器可接受的MIME类型。Accept-Charset 浏览器可接受的字符集。Accept-Encoding 浏览器可接受的压缩编码方式常见的压缩方式有gzip、br、ServletAccept-Language 浏览器能接受的语言。Content-Length 表示请求消息正文的长度。Authorization 授权信息通常出现在对服务器发送的WWW-Authenticate头的应答中。Host 客户端请求域。If-Modified-Since 对应 response返回值 last-Modified 文件最后修改时间。If-None-Match 对应 response返回值 Etag 文件唯一标识。2.Response HeadersCache-control 详见下面http缓存一栏会详细讲Content-encoding 压缩编码方式对应 Accept-EncodingContent-Length 表示内容长度。Content-Type 表示后面的文档属于什么MIME类型Date 当前的GMT时间。Expires 告诉客户端缓存的绝对时间(目前基本上已不再使用)Last-Modified 文件最后编辑时间Etag 当前文件内容唯一标识若被重新修改则会有变动。Server 服务器通过这个头告诉浏览器服务器的类型。八、TCP三次握手在介绍三次握手之前先抛出一个问题为什么是三次握手不是两次或者四次首先我们要先理解握手的目的是什么为了确保双方的发送、接收能力正常。就像打电话之前双方先“喂喂喂听得见嘛”一个道理。最开始客户端处于CLOSED状态服务器处于LISTEN状态(随时等待被撩)。第一握手 客户端首先发送一段SYN报文包含生成的序列号这个时候客户端处于发送后等待状态。第二次握手 服务端收到客户端发送的SYN报文后将序列号1后作为ACk应答码返回给客户端一并返回的包括服务端生成的序列号。这个时候服务端就处于半连接状态服务端也能确认了客户端的发送能力正常自己的发送能力、接收能力正常唯独不知道客户端的接收能力是否正常。所以说二次握手并不能满足实际需要。第三次握手 客户端接收到服务端返回的ACK以及序列号后将序列号1作为ACK码再返回给服务端。这个时候客户端就能确认自己的发送、接收能力正常服务端的发送、接收能力也正常。服务端接收到ACK码之后将之前的半连接转换成全连接也就完成了握手连接。所以三次握手正好确认双方的发送、接收能力正常了再多一次可以嘛其实也可以的只是无用白白浪费了而已所以三次足以。备注三次握手过程中前两次不可携带数据第三次握手可以携带数据。因为前两次若能携带数据的话攻击者会利用这个缺陷发送大量数据给服务端而故意忽略第三次从而导致服务端产生大量半连接状态会话同时服务器要耗费更多内存去处理数据半连接多了达到一定数量后影响正常连接导致丢包等事件发生故而产生SYN攻击。第三次握手是可以携带数据的因为第三次握手的时候已经建立了正常连接互相信任了这个时候处理数据也无可厚非。九、TCP四次挥手有握手的过程必然就会有分手的过程嘛。四次的过程是这样的第一次挥手 客户端要断开连接向服务端发送FIN报文其中会包含客户端生成的序列号。这个时候客户端处于FIN-WAIT-1状态也就是说这个时候客户端处于只能接收、不会再发送的状态。第二次挥手 服务端回应客户端状态。这个时候服务端也不在接收来自客户端的数据处于CLOSED-WAIT状态但是还有未处理完的数据要继续处理。客户端收到服务端反馈后变成FIN-WAIT2状态。第三次挥手 服务端处理完最后发送的数据后再想客户端发送FIN自己进入LAST-ACK状态。第四次挥手 客户端收到服务端发来的FIN后自己变成了TIME-WAIT状态然后发送 ACK 给服务端。备注第三次挥手后服务端会间隔一定时间发送报文给客户端确保客户端收到报文。只有当收到客户端第四次挥手返回的信息才不会发送。所以第四次挥手后客户端需要等待足够长的时间(2MSL)也就是报文最大生存时间来确保没有再收到服务端返回的信息只要没收到信息客户端就能确保服务端收到第四次握手信息了服务端也确保第三次握手也是成功的了。十、HTTP缓存缓存是性能优化中非常重要的一环浏览器的缓存机制对开发也是非常重要的知识点。接下来以三个部分来把浏览器的缓存机制说清楚强缓存协商缓存缓存位置1.什么是强缓存、协商缓存关于什么时候命中强缓存什么时候命中协商缓存主要依赖于http返回头信息里的Cache-Control返回字段进行控制。什么情况下命中强缓存以常见的max-age为例若max-age5356800则意思是说浏览器在首次请求这个文件的时候可以在本地磁盘中保存这个文件5356800秒从首次加载时间开始以后的这些时间内若再次请求这个文件浏览器可以不发起http请求而直接使用缓存中的内容即可这样不仅节省了服务器负担也提升网站用户体验。什么情况下命中协商缓存仍然以常见的max-age为例若max-age5356800距离第一次请求文件已经过去了5356800秒当用户再次需要这个资源的时候浏览器就会拿之前这个文件返回的Etag以及Last-Modified分别命名为If-None-Match和If-Modified-Since作为请求参数传给服务端服务端与现有文件进行匹配若文件已更新则返回200状态码同时返回最新文件给客户端。若文件未更新则返回304状态码告诉客户端缓存有效可以继续使用。2.缓存位置关于文件缓存位置可通过Chrome开发面板中Network栏目下每个文件后面有一个Size属性查看首次请求会显示当前文件大小例如xxkB。在网页未关闭之前再次请求会从内存中取出文件显示(memory cache)。关闭网页再次请求的时候若命中强缓存会从磁盘中取出显示(disk cache)。3.Cache-Control有哪些字段public 公共的。表示任何人都可以缓存包括浏览器、代理服务器等。private 私有的。表示只允许单个用户缓存不能作为共享缓存。no-cache 本地可以缓存但每次都需要与服务端协商即每次都命中协商缓存。no-store 不适用任何缓存。max-agexxx 设置缓存最大周期(单位秒)超过这个相对时间被认为是过期需要与服务端协商是否还可继续使用。与Expires不同因为它是绝对时间目前基本上已被废弃因为若服务器时间与客户端时间相差较大的情况下会产生一些异常问题。s-maxagexxx 设置代理服务器缓存文件过期相对时间客户端会忽略它。must-revalidate 一旦资源过期(比如超过max-age)在成功向原始服务器验证之前缓存不能用该资源响应后续请求。no-transform 不得对资源进行转换或转变。only-if-cached 表明客户端只接受已缓存的响应并且不要向原始服务器检查是否有更新的拷贝。十一、HTTP1.1的缺点1.无状态其实这也不能说是缺点这算是它的特点之一至于是缺点还是优点要分场景来看的。那么什么是无状态呢就是指通信过程的上下文信息每次请求都是独立、互相无关的且默认状态不需要保留状态信息的。但是在一些场景下比如前一次请求需要与后一次请求有一定关联这个时候无状态处理起来就比较麻烦了。2.臃肿的消息首部HTTP/1.1 的首部无法压缩再加上 cookie 的存在经常会出现首部大小比请求数据大小还大的情况。3.明文传输也就是协议里的报文即传输头信息不使用二进制而是使用文本的形式传输。这就给中间拦截者造成可乘之机拦截传输内容获取敏感信息。4.队头阻塞http传输是基于请求-应答的模式进行的报文必须是一发一收所有任务被放到一个任务队列中串行执行。当http开启长连接的时候当前域名下会共用一个TCP连接一旦队首因某些原因卡住后续只能处于等待状态这就是著名的队头阻塞问题。那么如何解决队头阻塞问题在不升级到HTTP2.0的前提下有两种解决方案并发连接。对一个域名分配多个长连接增加多个任务队列。就像食堂打饭后排队付钱一个队伍排到门口现在从之前的一个窗口增加到多个窗口同一时间做付款操作的同学多了速度自然也就快起来了。域名分片。上面讲到了对一个域名分配多个长连接那么也可以分配多个域名。例如分配static1.baidu.com、static2.baidu.com等多个域名加载网站资源每个域名再分配多个长链接就可以相对解决队头阻塞问题。注意域名也不是越多越好因为每多一个域名都要涉及到DNS查找、TCP三次握手、SSL/TLS握手且TCP有一个慢启动特点就是刚开始传输慢慢慢的才会达到一个较快的稳定速度如果启用了一个单独域名而这个域名只传输了一个2KB的js文件实际文件传输时间远远小于握手时间就得不偿失了。具体哪个地方耗时可以在Chrome开发面板下Network中查看具体文件其中有一个Waterfall内容截图示例如下名词解释Queued at: 从页面加载到开始请求当前文件的等待时间。Started at: 从第几秒开始请求当前文件。Queueing: 在请求队列中的时间。Stalled: 从TCP 连接建立完成到真正可以传输数据之间的时间差此时间包括代理协商时间。DNS Lookup: 当前域名执行DNS查找所花费的时间。Initial Connection: 建立连接所花费的时间包括TCP握手/重试和协商SSL。SSL: 完成SSL握手所花费的时间(如果是TLS协议此处显示的就是TLS)。Request sent: 发出网络请求所花费的时间通常为一毫秒的时间。Waiting(TFFB): TFFB 是发出页面请求到接收到应答数据第一个字节的时间。Content Download: 接收响应数据所花费的时间。十二、HTTP2.0的优势1.头部压缩HTTP1.1时代默认情况下前后两次HTTP请求没有关联这被称为无状态请求以及响应头信息里有很多字段(本文之前已介绍过)不论是否需要都会以key:value的形式在网络中传输尤其对于GET请求请求报文几乎全是请求头这个时候就存在非常大的优化空间。HTTP2.0就针对这个问题采用了HPACK压缩算法对头部内容进行压缩大大减少了网络传输。HPACK压缩算法的特点是啥在服务端与客户端建立一个哈希表以索引的形式代替头信息双方传输就以索引为准拿到索引值后到哈希表中寻找对应头内容以此减少网络传输。2.多路复用上面讲到了HTTP1.1队头阻塞的问题虽然采用了长连接以及多域名分片方法在一定程度上规避里队头阻塞但并没有从根本上解决问题。比如在有限的带宽情况下如何完成优先级较高的请求而不是一定要按照排队的顺序。HTTP2.0是以二进制分帧的方式来解决所谓的队头阻塞问题。将原来的Headers、Body的报文解析成二进制的帧数据传输过程中看到的是10101的格式。这些二进制帧不存在先后关系因此也就不会排队等待也就没有了 HTTP 的队头阻塞问题。注意所谓的乱序指的是不同ID的Stream是乱序的但同一个Stream ID 的帧一定是按顺序传输的。二进制帧到达后对方会将Stream ID相同的二进制帧组装成完整的请求报文和响应报文。3.服务器推送我们知道在目前的HTTP1.1时代服务器是被动的只有客户端主动发起请求服务端才会响应对应内容是一问一答的模式。并不会主动推送内容给客户端除非采用websocket。而HTTP2.0就增加了服务器推送特性可以对客户端的一个请求发送多个响应。比如客户端请求html页面的时候服务器可以将当前页面用到的js以及css等资源一并返回给客户端减少后续交互。当然客户端也可以拒绝服务器的推送。4.解析速度快服务器解析 HTTP1.1 的请求时必须不断地读入字节直到遇到分隔符 CRLF 为止。而解析 HTTP2 的请求就不用这么麻烦因为 HTTP2.0是基于帧的协议每个帧都有表示帧长度的字段。5.优先级HTTP2.0可以对比较紧急的请求设置一个较高的优先级服务器在收到这样的请求后可以优先处理。十三、HTTPS知识点HTTPS是超文本传输安全协议加强版的HTTP在HTTP的基础上对headers、body进行加密后再传输大大增加了安全性。简单的讲HTTPS HTTP SSL/TLS。至于为何安全简要的说就是在之前HTTP明文传输的基础上增加了对称加密、不对称加密算法。至于加密的原理及过程需要额外一篇文章来详细讲解感兴趣的同学可查阅相关资料这里不再赘述。与前端相关的另外一个HTTPS知识点就是HTTPS在HTTP握手的基础上又增加了一层SSL/TLS握手。所以安全是要有一定代价的代价就是在真正连接前又多了个握手的过程。握手的过程这里不再赘述感兴趣的同学可查阅相关资料。主要分以下三类RSA 握手TLS1.2 握手TLS1.3 握手十四、HTTP和HTTPS的区别HTTP是明文传输不安全的HTTPS是加密传输安全的多。HTTP标准端口是80HTTPS标准端口是443。HTTP不用认证证书免费HTTPS需要认证证书要钱。连接方式不同HTTP三次握手HTTPS中TLS1.2版本7次TLS1.3版本6次。HTTP在OSI网络模型中是在应用层而HTTPS的TLS是在传输层。HTTP是无状态的HTTPS是有状态的。十五、HTTP代理目前通常意义上的代理一般认为是CDN节点就是架设在客户端与原服务器之间的服务器对客户端来说它就是服务器对服务器来说它就是客户端。主要起到负载均衡的作用减少原服务器的压力分担原服务器带宽提高用户访问资源速度提高用户体验。什么是CDN默认情况下所有资源都会向原服务器请求。这不仅会给原服务器造成较大压力还会因距离问题让客户端等待较长时间例如服务器在美国中国用户首次请求要跨越大半个地球显然比从上海服务器请求更慢。这个时候对于原服务器来说就需要个代理这个代理服务器就被称为CDN节点节点按照一定规则定期向原服务器更新文件即可附近的用户就近访问当前节点即可既减轻了原服务器压力也减少了请求时间提高用户体验。代理常见头部字段Via是一个能用首部由代理服务器添加适用于正向和反向代理在请求和响应首部均可出现这个消息首部可以用来追踪消息转发情况防止循环请求还可以识别在请求或响应传递链中消息发送者对于协议的支持能力。Via: 1.1 vegur
Via: HTTP/1.1 GWA
Via: 1.0 fred, 1.1 p.yourAddress.netX-Forwarded-For是一种获取用户真实IP的字段不管中间经过多少代理这个字段始终记录最初的客户端的IP。相应的还有X-Forwarded-Host和X-Forwarded-Proto分别记录客户端(注意不包括代理)的域名和协议名。X-Real-IP一般记录真实发出请求的客户端的IP还有X-Forwarded-Host和X-Forwarded-Proto分别记录真实发出请求的客户端的域名和协议名。十六、http性能优化相关其实能看到这里相信你的心里已经对网络性能优化有一定的想法了这里也就做一些简单的知识点罗列。DNS预解析合理控制域名数量使用HTTP2.0采用服务端渲染客户端渲染的方式公共类库存放到CDN上http返回值Cache-Control的max-age设置较大值例如6个月尽可能保持一直缓存文件更改的时候还一个hash文件名即可。将CSS放在文件头部JavaScript文件放在底部使用字体图标iconfont代替图片图标小图片采用base64压缩减少网络请求js、css文件压缩服务端采用gzip、br等压缩算法图片懒加载。这对于首屏优化非常有用非首屏需要的图片在网络空闲的时候异步加载即可关于图片也可以适当降低图片质量或者先加载一个质量较低的图片显示给用户看之后再加载清晰的图片展示给用户。使用css3代理部分图标webpack配置按需加载减少重绘重排使用requestAnimationFrame来实现视觉变化使用Web Workers降低CSS选择器的复杂性使用flexbox布局使用transform和opacity属性更改来实现动画最后一条建议避免过度优化最近组建了一个江西人的前端交流群如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。推荐阅读整整4个月了尽全力组织了源码共读活动~我历时3年才写了10余篇源码文章但收获了100w阅读老姚浅谈怎么学JavaScript我在阿里招前端该怎么帮你可进面试群················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》10余篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时最近组织了源码共读活动帮助1000前端人学会看源码。公众号愿景帮助5年内前端人走向前列。识别上方二维码加我微信、拉你进源码共读群今日话题略。分享、收藏、点赞、在看我的文章就是对我最大的支持
