前端常用的性能实用优化方法有哪些?
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">移动端性能优化：</a></li><li><a href="#_label1">图片优化：</a></li><ul class="second_class_ul"><li><a href="#_lab2_1_0">1、CSS sprites</a></li><li><a href="#_lab2_1_1">2、压缩图片</a></li><li><a href="#_lab2_1_2">3、尽量避免重设图片大小</a></li><li><a href="#_lab2_1_3">4、图片尽量避免使用DataURL</a></li><li><a href="#_lab2_1_4">5、图片懒加载</a></li></ul><li><a href="#_label2">JavaScript相关优化</a></li><ul class="second_class_ul"><li><a href="#_lab2_2_5">1、把脚本放在页面底部</a></li><li><a href="#_lab2_2_6">2、使用外部JavaScript和CSS</a></li><li><a href="#_lab2_2_7">3、压缩JavaScript和CSS</a></li><li><a href="#_lab2_2_8">4、减少DOM操作</a></li><li><a href="#_lab2_2_9">5、js开销缩短解析时间</a></li><li><a href="#_lab2_2_10">6、v8编译原理（代码优化）</a></li><li><a href="#_lab2_2_11">7、v8内部优化</a></li><li><a href="#_lab2_2_12">8、对象优化(迎合v8进行优化)</a></li><li><a href="#_lab2_2_13">9、造成undefined和数字比较</a></li><li><a href="#_lab2_2_14">10、js内存，避免造成内存泄漏</a></li></ul><li><a href="#_label3">CSS 相关优化</a></li><ul class="second_class_ul"></ul><li><a href="#_label4">html 相关优化</a></li><ul class="second_class_ul"></ul><li><a href="#_label5">开发内容相关优化</a></li><ul class="second_class_ul"></ul><li><a href="#_label6">服务器相关优化</a></li><ul class="second_class_ul"></ul><li><a href="#_label7">Cookie相关优化</a></li><ul class="second_class_ul"></ul><li><a href="#_label8">首屏加载优化</a></li><ul class="second_class_ul"></ul></ul></div><p>前端项目的性能优化是一个综合性的问题,需要从多个方面入手,以下是几大类的优化方案：移动端、图片、JavaScript、css、html、页面内容、服务器、cookie。</p><p class="maodian"><a name="_label0"></a></p><h2>移动端性能优化：</h2>
<ul><li><p>1、保持单个文件小于25KB<br />移动网站页面要求下载资源，如果文件过大，会大大减慢页面加载速度。</p></li><li><p>2、打包内容为分段multipart文档<br />由于HTTP请求每一次都会执行三次握手，每次握手都会消耗较多的时间。使用multipart，实现了多文件同时上传，可用一个HTTP请求获取多个组件。</p></li></ul>
<p class="maodian"><a name="_label1"></a></p><h2>图片优化：</h2>
<p class="maodian"><a name="_lab2_1_0"></a></p><h3>1、CSS sprites</h3>
<p>俗称 CSS 精灵、雪碧图，雪花图等。即将多张小图片合并成一张图片，达到减少 HTTP 请求的一种解决方案。可通过 CSS中的background 属性访问图片内容。这种方案同时还可以减少图片总字节数，节省命名词汇量。</p>
<p class="maodian"><a name="_lab2_1_1"></a></p><h3>2、压缩图片</h3>
<p>图片占据资源极大，因此尽量避免使用多余的图片，使用时选择最合适的格式大小，然后使用智图压缩，同时在代码中用Srcset来按需显示。（切记不要过分压缩 可能会导致图片迷糊）</p>
<p class="maodian"><a name="_lab2_1_2"></a></p><h3>3、尽量避免重设图片大小</h3>
<p>重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能。</p>
<p class="maodian"><a name="_lab2_1_3"></a></p><h3>4、图片尽量避免使用DataURL</h3>
<p>DataURL图片没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长。</p>
<p class="maodian"><a name="_lab2_1_4"></a></p><h3>5、图片懒加载</h3>
<p>图片对页面加载速度影响非常大。比如，当一个页面内容比较多的时候，加载速度就会大大的降低，极大的影响到用户体验 。更有甚者，一个页面可能会有几百个图片，但是页面上仅仅只显示前几张图片，那其他的图片是否可以晚点加载用于提高性能。具体可见 >></p>
<p class="maodian"><a name="_label2"></a></p><h2>JavaScript相关优化</h2>
<p class="maodian"><a name="_lab2_2_5"></a></p><h3>1、把脚本放在页面底部</h3>
<p>放在前面js加载会造成阻塞，影响后面dom的加载</p>
<p class="maodian"><a name="_lab2_2_6"></a></p><h3>2、使用外部JavaScript和CSS</h3>
<p>在现实环境中使用外部文件通常会产生较快的页面，因为 JavaScript 和 CSS 有机会被浏览器缓存起来。对于内联的情况，由于 HTML 文档通常不会被配置为可以进行缓存的，所以每次请求 HTML 文档都要下载 JavaScript 和 CSS。所以，如果 JavaScript 和 CSS 在外部文件中，浏览器可以缓存它们，HTML 文档的大小会被减少而不必增加 HTTP 请求数量。</p>
<p class="maodian"><a name="_lab2_2_7"></a></p><h3>3、压缩JavaScript和CSS</h3>
<p>压缩文件是为了降低网络传输量，减少页面请求的响应时间。</p>
<p class="maodian"><a name="_lab2_2_8"></a></p><h3>4、减少DOM操作</h3>
<p>操作dom会产生几种动作，极大的影响渲染的效率。其中layout（布局）和paint（绘制）是最大的。</p>
<p class="maodian"><a name="_lab2_2_9"></a></p><h3>5、js开销缩短解析时间</h3>
<p>开销：加载-》解析和编译-》执行<br />js的解析和编译，执行要花很长时间（谷歌开发工具中的performance中可以查看。选中main主线程中的某一段。）</p>
<p>解决方案：</p>
<p>代码拆分按需加载<br />tree shaking代码减重<br />避免长任务<br />requestAnimationFrame和repuestIdleCallback进行时间调度</p>
<p class="maodian"><a name="_lab2_2_10"></a></p><h3>6、v8编译原理（代码优化）</h3>
<p>解析js代码成抽象语法树-》字节码-》机器码<br />编译过程会进行优化<br />运行时可能会发生反优化</p>
<p class="maodian"><a name="_lab2_2_11"></a></p><h3>7、v8内部优化</h3>
<p>脚本流:边下载边解析<br />字节码缓存:常用的字节码会存起来(这个文件用到其他的文件也用到的参数)<br />函数懒解析:先解析用到的</p>
<p class="maodian"><a name="_lab2_2_12"></a></p><h3>8、对象优化(迎合v8进行优化)</h3>
<p>保证对象初始化顺序一致(对象初始化时v8会生成隐藏属性以便后续复用并且是按照顺序排序的)<br />不要直接赋值对象新属性(追加的属性需要通过描述数组间接查找)<br />使用数组代替类数组(v8会对数组进行优化)比如先将类数组转化成数组<br />避免读取数组越界(比如for循环多查找1个下标会照成性能相差6倍)</p>
<p class="maodian"><a name="_lab2_2_13"></a></p><h3>9、造成undefined和数字比较</h3>
<p>数组也是对象，当找不到对应下标的时候回沿着原型链向上找造成额外开销<br />业务上无效</p>
<p class="maodian"><a name="_lab2_2_14"></a></p><h3>10、js内存，避免造成内存泄漏</h3>
<p>通过变量是否能被访问到来判断内存是否释放。</p>
<p>局部变量: 函数执行完没有闭包引用会被标记回收</p>
<p>全局变量: 直到浏览器被卸载页面释放</p>
<p>回收机制:<br />引用计数:每调用一次加一,当计数为0的时候进行回收。缺点是不能解决循环引用(例如a对象依赖于b对象，标记清除(垃圾回收): 从根节点去访问，当访问到不能被访问的对象就进行标记然后进行垃圾回收。(当a对象<br />解决：避免意外的全局变量；避免反复运行引发的闭包；避免脱离的dom元素没有被回收(所以react有ref这个api)。</p>
<p class="maodian"><a name="_label3"></a></p><h2>CSS 相关优化</h2>
<ul><li>1、把样式表放在标签中<br />css放在head标签中比css放在body标签尾部少了一次构建RenderTree, 一次计算布局和一次渲染网页, 因此性能会更好。</li><li>2、使用替代@import</li><li>3、不要使用filter</li><li>4、避免元素类型转化(数组中放多种类型不利于v8引擎优化代码)<blockquote><ul><li>降低css对渲染的阻塞(按需加载，放在dom前面加载)</li><li>利用pu完成动画(前面讲到的复合)</li><li>使用contain进行优化(优化强度大。例如: contan:layout告诉浏览器这个节点内部的子元素和外面的使用font-display进行优化:让文字更早的显示在页面上，减轻文字闪动的问题</li></ul></blockquote></li></ul>
<p class="maodian"><a name="_label4"></a></p><h2>html 相关优化</h2>
<ul><li>减少iframes使用</li><li>压缩空白符</li><li>避免嵌套层次太深</li><li>避免使用table布局</li><li>减少没必要的注释</li><li>删除元素默认属性(比如默认checkbox等)</li></ul>
<p class="maodian"><a name="_label5"></a></p><h2>开发内容相关优化</h2>
<ul><li>减少HTTP请求数</li><li>减少DNS重定向</li><li>缓存AJax请求</li><li>延迟加载</li><li>预加载</li><li>减少DOM元素的数量</li><li>划分内容到不同域名</li><li>尽量减少使用iframe</li><li>避免404错误</li></ul>
<p class="maodian"><a name="_label6"></a></p><h2>服务器相关优化</h2>
<ul><li>使用CDN</li><li>添加Expires或Cache-Control响应头</li><li>启用Gzip</li><li>配置Etag</li><li>尽早输出缓冲</li><li>Ajax请求使用GET方法</li><li>避免图片src为空</li><li>传输加载优化<br />服务器启用gzip</li><li>keep Alive(持久TCP连接)<br />keepalive_requests 100;请求100次后开启http的keepAlive有keepalive_timeout 65;65秒后关闭。</li><li>http缓存<br />最好是用no-cache(要用的时候需要在服务器那边Etag验证下)</li><li>service workers<ul><li>加速重复访问</li><li>离线支持</li></ul></li></ul>
<p class="maodian"><a name="_label7"></a></p><h2>Cookie相关优化</h2>
<ul><li>减少cookie大小</li><li>静态资源使用无cookie域名</li></ul>
<p class="maodian"><a name="_label8"></a></p><h2>首屏加载优化</h2>
<ul><li>资源压缩、传输压缩、代码拆分、tree shaking、http缓存</li><li>路由懒加载、预渲染、inlineCss、虚拟列表</li><li>prefetch和preload调整加载顺序js内存管理</li></ul>
頁:
[1]