如何提高.Net动态页面响应速度？

“`” 研究表明，页面响应速度超过5秒，90%的用户会选择关闭页面。影响页面响应速度因素很多，分别从前端，后端，数据库，运维阐述。

一、前端性能优化（引用网址 <a href=""https://www.jianshu.com/p/60b715bd5d73）"" target=""_blank"">https://www.jianshu.com/p/60b715bd5d73）</a>

<div><div>思路：分析一个页面从输入 URL 到页面加载显示完成的所有步骤，采用分治法逐步优化。

1、优化DNS查询

减少域名：尽量把所有的资源放在一个域名下。一个域名同时可以发4（IE8）或8个请求（Chrome）。请求文件少，用1个域名，文件多用多个域名。与3权衡。

2、优化TCP协议<ul><li>TCP连接复用，使用keep-alive：连接回复加上请求头：keep-alive。第一次请求不断开，第二次请求复用。</li><li>使用http 2.0版本：多路复用，连接复用率会更高</li></ul>3、优化发送的HTTP请求<ul><li>合并JS或CSS文件</li><li>inline image：使用data:url scheme来内连图片</li><li>减小cookie体积，每个请求都会附带cookie，所以不要滥用cookie。</li><li>合理使用CasheControl代替发送HTTP请求</li><li>同时发送多个请求（浏览器自带）IE8可以同时请求下载4个的css文件，Chrome可以同时请求下载8个。</li></ul>4、优化接受响应<ul><li>设置Etags：浏览器重复与请求服务器一样的文件，ETag响应304。</li><li>Gzip压缩大文件使用macos gzip，<code>npm server gzip</code> <code>gzip 文件名</code> 其响应头为<code>Content-Encodinging：gzip</code>，先压缩接收到再解压缩。缺点：耗费浏览器CPU，权衡</li></ul>5、优化DOCTYPE<ul><li>不能不写，不能写错</li></ul>6、优化CSS，JS请求<ul><li>使用CDN：用CDN请求静态资源同时可以增大同时下载数量，内容分发网络（CDN）可以使请求总时间降低，也可以减少cookie</li><li>CSS放在head里：使其尽早下载，因为chrome需要下载完所有的css后才渲染页面</li><li>JS放在body里的最后：尽早显示整个页面，获取节点。</li></ul>7、使用懒加载<ul><li>组件懒加载</li></ul><div class=""_2Uzcx_""><button class=""VJbwyy"" type=""button"" aria-label=""复制代码""><svg viewbox=""64 64 896 896"" focusable=""false"" class="""" data-icon=""copy"" width=""1em"" height=""1em"" fill=""currentColor"" aria-hidden=""true""><path d=""M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z""></path></svg></button><pre class=""line-numbers language-jsx""><code>const xxx =()=>import('./components/xxx.vue')</code></pre></div><ul><li>路由懒加载</li></ul>8、优化用户体验<ul><li>用户看到哪些内容就请求哪些内容</li><li>加一个loading动画用户会感觉时间变快</li></ul>9、减少监听器，使用事情委托<div class=""_2Uzcx_""><button class=""VJbwyy"" type=""button"" aria-label=""复制代码""><svg viewbox=""64 64 896 896"" focusable=""false"" class="""" data-icon=""copy"" width=""1em"" height=""1em"" fill=""currentColor"" aria-hidden=""true""><path d=""M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z""></path></svg></button><pre class=""line-numbers language-xml""><code> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> let liList = document.querySelectorAll('li') // liList[0].onclick = ()=>console.log(1) // liList[1].onclick = ()=>console.log(2) // liList[2].onclick = ()=>console.log(3) // liList[3].onclick = ()=>console.log(4) //法一：监听太多 let ul = document.querySelector('ul') ul.onclick = (e) => { if (e.target.tagName === 'LI') { console.log(e.target.innerText) } }//法二：减少监听，采用事件委托 </script> </body></code></pre></div>10、优化图片大小<ul><li><a href=""https://www.yasuotu.com/"" target=""_blank"" rel=""nofollow"">图片压缩网站</a></li></ul>11、减少或合并DOM操作或使用虚拟DOM<div class=""_2Uzcx_""><button class=""VJbwyy"" type=""button"" aria-label=""复制代码""><svg viewbox=""64 64 896 896"" focusable=""false"" class="""" data-icon=""copy"" width=""1em"" height=""1em"" fill=""currentColor"" aria-hidden=""true""><path d=""M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z""></path></svg></button><pre class=""line-numbers language-jsx""><code>// 不好的方式var elem = $('#elem');for (var i = 0; i < 100; i++) { elem.append('<li>element '+i+'</li>');}// 好的方式var elem = $ ('#elem' ),arr = [];for (var i = 0; i < 100; i++) { arr.push('<li>element ' +i+'</li>' );}elem.append(arr. join(''));</code></pre></div>12、对大量数据计算使用缓存<div class=""_2Uzcx_""><button class=""VJbwyy"" type=""button"" aria-label=""复制代码""><svg viewbox=""64 64 896 896"" focusable=""false"" class="""" data-icon=""copy"" width=""1em"" height=""1em"" fill=""currentColor"" aria-hidden=""true""><path d=""M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z""></path></svg></button><pre class=""line-numbers language-go""><code>// data.length === 100000 for(var i = 0;i < data.length;i++){ // do something… } //上面的代码没有下面的好 for(var i = 0,len = data.length;i < len;i++){ // do something… }</code></pre></div>13、使用setTimeout降低调用接口频率

二、后端性能优化

1、冗长繁琐代码架构重构，精简业务

2、循环语句避免sql查询

3、大量数据查询采用分页

4、不经常变数据保存在缓存中，从缓存中读，如Redis，Cache等

5、无关显示的业务用异步处理，如埋点数据

6、数据库增删改查尽可能批量，削峰处理

三、数据库

1、合理利用索引，定期维护索引

2、大表数据水平或垂直分库分表

3、一定时间以前的数据移植到历史库中

4、读写分离

5、耗时统计数据放在统计表中，利用Schedule维护

6、正确使用sql语句，避免用法不当消耗数据库性能

7、使用存储过程，但需衡量可维护性

四、运维

1、利用负载均衡部署网站

2、利用监控工具维护硬件资源，合理升级降级

</div> </div>

<pre><code> "“`

Was this helpful?

0 / 0