性能优化及相关问题_css 页面窗口变化后页面就卡死-CSDN博客

本文链接：https://blog.csdn.net/qq_38074118/article/details/114106456

本文探讨了CDN的使用、DOM操作优化、单页面应用的SEO解决方案以及前端性能优化的多种方法，包括CSS放置、JavaScript加载、减少DOM操作和图片优化等。此外，还讨论了正则表达式、前端渲染与后端渲染的区别，以及前端体系、SEO策略和解决移动端延迟等问题。

摘要由CSDN通过智能技术生成

性能优化

1.CDN的用法是什么？什么时候用到

CDN即内容分发网的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对
集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求

CDN的使用，以腾讯CDN为例：

登录腾讯云CDN，选择“接入管理”，点击“添加域名”添加我们需要加速的域。
进入“添加域名”界面，在域名那里填好你要加速的域名。源站IP那里可以填自己服务器的IP。如果你
用的是虚拟主机，可以填空间商给你的域名。配置完成后点下一步！
进入“基本配置”界面，填写相关要求，在缓存时间那里，腾讯CDN默认的是将你所有的文件缓存30
天，你可以根据自身情况修改天数。填写好后点击下一步。
下一步也差不多，填写相关要求，没问题点击提交就好。

CDN的适用场景：
解决因分布、带宽、服务器性能带来的访问延迟问题,适用于网站站点/应用加速、点播、直播、视音频点播、
大文件下载分发加速、移动应用加速等场景

把css放在head中加载，这个能让页面更早的开始渲染。避免把css放在页面尾部，否则可能会出现闪
屏，如果css加载的很慢，DOM结构先出来，css后出来，然后页面样式突然发生变化，就造成了闪屏。
把js放在body末尾加载，因为js它本身会阻塞HTML的解析以及css的渲染。
不要使用css的表达式，css的表达式一方面是兼容性问题，虽然看起来比较强大，但是实际性能开销很
大，因为它实际的执行频率是远远超出预期的，如果使用了css的表达式，可能导致页面卡顿。
用外链的方式引用css和js，可以有效的减少HTML的体积，并且外链了之后，css和js作为静态资源可
以给他设置合适的缓存的响应头；能够合理的利用浏览器的缓存。
压缩js和css，在生产环境里面删除这一类文件不必要的注释、空白，并且对js进行变量名压缩，混淆压
缩，对css进行属性的合并，然后进行选择符的合并。
不重复加载js，因为在IE里面，还是会有多个请求，不能发挥缓存优势，并且你重复加载js，意味着要更
长的js执行时间。
让Ajax请求可缓存，GZIP、内容压缩都可以适用。
用GET方式发起Ajax请求，因为GET方式可以缓存，如果是获取信息的，那么GET方式是更语义化的。
组件延迟加载，保障页面关键的静态资源优先加载，因为并发数限制，还有一些延迟加载的典型手段叫做
“lazyload”。
减少DOM节点数，DOM节点这个规则是非常容易理解，就是如果你的DOM结构非常的复杂，那么浏览
器在解析的时候，进行布局、渲染时计算量更大，那么少一点的话，浏览器的开销会少一些，渲染布局的
速度就会快一些。
避免在页面中使用frame类（包括iframe和frameset），因为iframe它会阻塞父文档的onload，即使
它是一个空白的也会比较耗时。
要减少COOKIE的体积，因为COOKIE在每一次请求，就是跟主文档相关的，只要是同域的，COOKIE
的全部内容都可以带上。
使用无cookie域名加载静态资源，可以减少静态资源加载时的网络传输量，静态资源加载通常是不需要
cookie的。
减少js中的DOM访问，还有对于你查找到的元素，缓存在js的变量中，后面就不需要在去查找DOM树
了，还有节点增加是合理利用DocumentFragment，然后在把DocumentFragment放在实际的DOM
树里面，然后还有一个是不要用js去频繁修改样式。
使用更多的事件监听机制，基于事件冒泡的委托机制，你可以有效减少绑定的数量。
使用常见的图片优化手段，对于代码来说，图片的体积很大，常用的图片压缩工具有“PNGCrush”
“JPEGTRAN”“PNGQUANT”。
不要在HTML中缩放图片，你实际上在页面上用到多大图片，那你就提供适当尺寸即可，不然它只会徒增
渲染的开销。
不要把图片SRC置空，因为在主文档的浏览器里面都会引发额外的请求。
任何资源尽量在25k以内，因为iPhone无法缓存25k以上的资源。
预渲染，预渲染比预下载更进一步，不仅仅下载页面，而且还会预先将它渲染出来，目前在Chrome
（9.0.597.0）中有实现，不过需要在about:flags中将’WebPagePrerendering’开启。
DNS优化；CDN优化；http优化；减少域名解析时间；增多域名提高并发