网站性能优化可以从以下几点总结入手 1.减少HTTP请求，使用sprite-CSS Sprites，将多张图片合并为一张图片，使用CSS -background-position调整图片显示位置。 这种方法被广泛使用。 缺点是，如果一个小图需要N种颜色，就要把N个不同颜色的小图做出来，合并成大图。 使用data:URL显示图片，可以在页面中渲染图片，不需要额外的HTTP请求。请求格式: 要解决无法缓存的问题，可以将data:image应用于CSS样式，比如:。imagea { background-image:URL(data:image/jpg；base64，xxxxxxxxxxxxxxxxxxx)；}合并脚本和样式表多部分XHR运行客户端可以通过一个HTTP请求从服务器传输多个资源。 它在服务器端把资源(CSS文件、HTML片段、Javascript代码或者base64编码的图片)打包成一个长串，除以约定的字符串，发送到用户端。 然后用Javascript代码解析这个长字符串，并根据每个资源的mime-type类型和传入的其余“头信息”解析出每个资源。 比如解析一串图片代码，作为req输入。responsetext函数拆分图像(imagestring){ var imagedata = imagestring . split(' \ u 0001 ')；var imageElementfor (var i =0，len = image data . length；我& ltleni++){ image element = document . createelement(' img ')；image element . src = ' data:image/JPEG；base64，'+imageData[I]；document . getelementbyid(' container ')。appendChild(image element)；}}2.使用CDN内容发布网络(CDN)是一组分布在许多不同地理位置的WEB服务器，用于更有效地向客户发布内容。 CDN用于发布静态内容，如图片、脚本、样式表和Flash。 不使用CDN时:客户在浏览器访问栏输入要访问的域名。 浏览器请求DNS服务器解析域名。 DNS服务器将域名的IP地址返回给浏览器 浏览器使用这个IP地址向服务器请求内容。 将服务器客户端请求的内容返回给浏览器。 尽量将CDN的域名设置为与请求网站的域名不同。 比如网站是a.com，CDN域名可以设置为acdn.com。 为什么？Cookie隔离:cookie跟随域名，同一域名下的所有请求都会携带cookie。 试想，当大量图片或JS/CSS文件被请求时，携带Cookie也将是一笔不小的开销。 而且浏览器同时从同一个域名请求文件的并行下载数量是有限的(Chrome是6并发)。因此，可以使用多个域名主机来存储不同的静态资源，并且可以增加页面加载时资源的并行下载次数。 3.利用HTTP缓存。有关详细信息，请参考文章“高级前端网络”。(3)浏览器缓存。4.压缩组件打开HTTP Gzip压缩。 请求:接受-编码:gzip，deflate响应:内容-编码:gzip 5。将样式表放在顶部。外部脚本文件和CSS文件并行下载。把样式表放在页面中不影响下载时间，但是会影响页面的呈现！在呈现页面之前，浏览器必须等待样式表加载。 所以样式表要放在头部，这样可以先下载让页面逐渐显现。 6.把JS脚本放在最下面。一般禁止并行下载JS脚本。由于JS脚本可能使用document.write来修改页面内容，因此有必要确保JS的执行顺序。 脚本下载后，必须先执行它，然后才能继续后续的解析。 但Chrome浏览器支持资源文件的并发下载，并保证按顺序执行(参考WebKit技术内幕-朱永生)。 7.避免CSS表达式CSS表达式是动态设置CSS属性的一种强大的(也是危险的)方法。 CSS表达式的求值频率比人们预期的要高。他们不仅需要知道页面何时呈现和大小何时改变，甚至还需要知道客户鼠标何时在页面上拖动。 比如设置背景色每小时变化:background-color:expression((new date())。gethours ()% 2？" # CCC ":" # 000 ")；触发频率太高！不推荐。 8.使用外部JS和CSS。纯粹来说，内联JS和CSS可以产生比外部文件更快的响应速度。 但实际上，外部链接的JS和CSS文件会产生更快的页面，因为JS和CSS文件可能会被缓存。 9.减少DNS查找DNS也是一个开销 浏览器找到给定主机名的IP地址通常需要20~120毫秒。 在DNS查找完成之前，浏览器无法从主机名下载任何内容。 只要cline-server之间的TCP连接是打开的，就不需要DNS查找。 因此，我们可以通过使用Keep-Alive和更少的域名来减少DNS查找。 Keep-Alive，HTTP1.1协议中引入的持久连接 特点:只要任一端没有明确提出断开，就会保持TCP连接。 带有Keep-Alive头的响应示例:http/1.1 200 ok connection:Keep-Alive content-encoding:gzip content-type:text/html；charset = utf-8日期:2016年8月11日星期四15:23:13 GMT keep-Alive:time out = 5，max = 1000 last-Modified:Mon 2016年7月2日04: 32: 39 GMT服务器:Apache 10。压缩JavaScript和CSS可以被各种构建或编译工具用来压缩脚本和样式文件，比如gulp、webpack11。少用iframeiframe是代价最大的DOM元素，缺点远大于优点。 不利于SEO:搜索引擎的检索程序无法解释iframe中的src blocking onload事件:父窗口的onload事件在iframe加载完成后才会触发。 影响页面资源的并行加载:iframe和主页面共享连接池，而浏览器对同域的连接有限制，会影响页面资源的并行加载。 为了解决两个问题，iframe中的src属性可以用下面的代码动态设置: 可以用ul或者div来代替。 13.JS文件异步/按需加载支持JavaScript异步加载的方法有很多。 Script元素这可能是异步加载脚本的最常见方法，即动态创建一个脚本标记并设置其src值。 如下:函数创建脚本(URL){ vars crelem = document . createelement(' script ')；srcElem.src = urldocument . getelementsbytagname(' head ')[0]。appendChild(scrElem)；}优点:支持脚本文件跨域加载；兼容性最好、通用性最高的方案的缺点:脚本乱序执行；将阻塞onload事件XMLHttpRequest，通过XMLHttpRequest下载脚本文件，然后动态增加 //不管IEvar xhrObj = new XMLHttpRequest()；Xhobj。onreadystatechange = function(){ if(xhrobj。ready state = = 4){//mode one eval(xhrobj . responsetext)；//Mode 2 var scre lem = document . createelement(' script ')；Sr celem . text = xhrobj . responsetext；document . getelementsbytagname(' head ')[0]。appendChild(scrElem)；}}xhrObj。open('GET '，' a.js '，true)；xhrObj。发送(“”)；优点:脚本下载和脚本执行分离，可以在合适的时间执行脚本；不会阻止onload事件；通过XMLHttpRequest获得的脚本文件必须与主页在同一个域名下。 也就是说不支持跨域下载脚本(除非制定跨域解决方案)。 所以不适合加载第三方文件；脚本无序执行 延迟和异步都支持异步文件加载。不同之处在于，只有在下载完所有资源后，defer才会执行JS文件。脚本文件一下载就执行Async，async模式加载的JS文件不能按顺序执行，所以对于有顺序依赖的脚本不应该采用这种方式。 Defer相对友好，可以保证JS文件按顺序执行。 & ltscript src = " a.js " defer & gt& lt/script & gt；& ltscript src = " a.js " async & gt& lt/script & gt；defer和async的优势:支持跨域加载脚本文件 延迟优势:JS文件可以按顺序执行。 延迟和异步缺点:仅支持IE10及以上版本。 异步缺点:JS文件不能按顺序执行；它将阻止onload事件。14.图片的懒加载可以通过图片的懒加载，防止加载少量不可见的图片，避免一次加载太多图片导致的阻塞请求(浏览器一般对同一域名下的并发请求数量有限制)，可以提高网站的加载速度，改善客户体验。 第一步:在lazy loaded img标签的src中设置缩略图或者不设置src，然后自己设置一个属性，其值为实景图像或者原图的地址(例如data-src) //https://a.com/logo.png是图片的真实地址，设置为data-src属性。 & ltimg data-src = " https://img . song ma . com/张文/2020 07 14/24 grwuny1ql 48 . png " class = " lazy-image "/& gt；// css部分。lazy-image { background:URL(' loading . gif ')无重复中心；}第二步:页面加载完成后，获取所有需要懒加载的图片的元素集合，判断是否在可视区域。如果它们在可视区域，将元素的src属性值设置为真实图片的地址。 //监听scroll事件document . addevent listener(' scroll '，in view show)；//在view Show(){ let image elements = array . prototype . slice . call(document . query selector all(')中显示图片。lazy-image '))设len = imageelements.lengthfor(设I = 0；我& ltlen++){ let image element = image elements[I]construct = image element . getboundingclient()//加载图片if(rect . top < document . document element . client height){ image element . src = image element . dataset . src//赋值给real src，imageelements.splice (i，1) len-i-}}}还可以使用三方库解决图片的懒加载。 15.避免页面中出现空的href和src。当link标签中的href或者ifram、script、img标签的src属性为空时，浏览器在渲染时仍然会加载href和src中的空内容，直到失败。 这将阻止页面中其余资源的下载过程。 16.减少页面重定向。页面重定向会延长页面内容返回的等待时间。一次重定向大约需要600毫秒。