文章目录

• 原则
• 加载资源优化
• • 资源压缩传输
  • 静态资源缓存
  • 减少HTTP请求数
  • 静态资源的合并压缩
  • 外部脚本置底和CSS样式置顶
  • 使用异步
• 渲染优化
• • 懒加载/延迟/分批加载
  • 减少JS脚本的DOM操作
  • 尽早执行操作DOMContentLoaded
  • JS书写规则
  • CSS书写规则
• 前端页面性能监控插件
• • PageSpeed插件

原则

• 尽量使用内存
• 减少cpu计算，减少网络请求
• 减少IO操作

+++

加载资源优化

资源压缩传输

一般在nginx配置Gzip压缩，更大型的网站采用CDN服务加快资源下载

静态资源缓存

nginx中可以设置相应静态文件的缓存有效期，在资源未失效之前，nginx会让浏览器加载本地资源

减少HTTP请求数

一次完成的HTTP请求经过多个阶段：DNS解析得到IP，IP寻址发起三次握手，建立TCP连接后发起HTTP请求，服务器接收HTTP请求，后台处理请求并返回数据，客户端接收响应数据并处理。因此每一次HTTP请求在客户端来说都要耗费大量时间。

并且由于浏览器进行并发请求的请求数是有上限的 (具体参见此处 )，因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象，即使可能用户能看到的第一屏的资源都已经请求完了，但是浏览器的进度条会一直存在。

解决办法：

1. 优化数据模式，即减少数据从后台获取，或者与后端协调，一次性获取多条数据

2. 合理设置HTTP缓存

3. 资源合并与压缩，尽可能将外部脚本/样式合并为一个，另外CSS、 Javascript、Image 都可以用相应的工具进行压缩，压缩后往往能省下不少空间。

4. 合并 CSS图片，减少请求数的又一个好办法

5. 懒加载，用的时候再加载

静态资源的合并压缩

这个本质是减少HTTP请求的数量（scripts和link是特殊的ajax请求），某种程度上来说，网页的性能不在于一次请求多少数据，而是发起了多少次请求。

• 资源合并包括代码的合并，图片的合并，请求数据的合并
• 压缩包括源代码的压缩，传递数据的压缩

外部脚本置底和CSS样式置顶

前文有谈到，浏览器是可以并发请求的，这一特点使得其能够更快的加载资源，然而外链脚本在加载时却会阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。解决这一问题的方法有很多，而最简单可依赖的方法就是将脚本尽可能的往后挪，减少对并发下载的影响。

使用异步

对于需要加载资源的请求，可使其异步执行，同理，对于可能阻塞执行的程序，也应异步执行

+++

渲染优化

懒加载/延迟/分批加载

暂时不用的资源不要放在页面初始化时加载

减少JS脚本的DOM操作

• 减少DOM操作，对多个DOM操作做缓存

• 多个DOM操作尽量合并在一起执行

HTML Collection（HTML收集器，返回的是一个数组内容信息）
在脚本中 document.images、document.forms 、getElementsByTagName()返回的都是 HTMLCollection类型的集合，在平时使用的时候大多将它作为数组来使用，因为它有 length属性，也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多，原因是这个集合并不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的 “访问集合” 包括读取集合的 length属性、访问集合中的元素。
因此，当你需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。

除了上面一点之外， DOM操作还需要考虑浏览器的回流和重绘，因为这些都是需要消耗资源的，可查阅如何减少浏览器的repaint和reflow?

尽早执行操作DOMContentLoaded

JS书写规则

• JS脚本引入最好放在body后
• **减少JS闭包的使用：**使用JS闭包涉及跨域访问，会导致性能缺失并减慢执行速度，此外也可能造成内存泄露。
• **尽量使用事件委托：**在事件绑定中，尽可能使用事件委托，减少循环给DOM元素绑定事件处理函数
• 高耦合低内聚：减少页面冗余代码
• 减少flash/cavas等内存高消耗功能的使用：
• 避免嵌套循环和"死循环：一旦遇到死循环，浏览器就会直接卡掉
• 不要引入过多第三方库（CSS同）：避免为了某个小功能引入大量代码
• 减少作用域链查找：因为js代码在执行的时候，如果需要访问一个变量或者一个函数的时候，它需要遍历当前执行环境的作用域链，而遍历是从这个作用域链的前端一级一级的向后遍历，直到全局执行环境，所以这里往往会出现一个情况，那就是如果我们需要经常访问全局环境的变量对象的时候，我们每次都必须在当前作用域链上一级一级的遍历，这显然是比较耗时的。
• 避免使用 eval和 Function：
• 在js中避免嵌套循环和"死循环"：一旦遇到死循环，浏览器就会直接卡掉

CSS书写规则

• CSS代码最好放在head中
• 减少css表达式的使用：表达式expression对浏览器资源要求比较高
• 减少元素标签作为最后一个选择对象：css选择器解析规则所示从右往左解析的，元素标签会扩大检索范围
• css中设置定位后，最好使用z-index改变盒子的层级，让盒子不在相同的平面上
• css导入的时候尽量减少@import导入式：因为@import是同步操作，只有把对应的样式导入后，才会继续向下载，而link是异步的操作
• 尽量将一个动画元素单独设置为一个图层：避免重绘或者回流的大小，但图层不要过多设置，否则不但效果没有达到反而更差了
• 能用CSS实现的效果不要用JS：
• 不同盒子间设置不同层级：
• 在事件绑定中，尽可能使用事件委托，减少循环给DOM元素绑定事件处理函数：

前端页面性能监控插件

PageSpeed插件

下载pageSpeed插件，一般得到crx文件，重命名为.zip。并解压缩得到解压缩后的文件夹。

打开chrome浏览器的设置 >> 更多工具 >> 扩展程序 >> 开发者模式 >> 加载已解压的扩展程序，完成安装，重启浏览器即可使用插件

标签：总结,浏览器,请求,前端,资源,CSS,优化,减少,加载
来源： https://blog.csdn.net/clyss1234/article/details/120264271