前端面试题_2.web前端性能优化的方式

标签：性能   第三方   color   不同   分发   本地   lock   使用   body   

从前的日色变得慢，车，马，邮件都慢······

巴特，现在前端是庞大的，针对方方面面的资源都有不同的方式。

站在用户角度，我们希望页面加载得更快、页面对用户的操作响应得更及时，能够给用户提供更为友好的体验。

站在服务商的角度，我们希望前端优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

1. 减少请求资源或者次数

• 尽量合并压缩 css 和 js 文件：为了减少http请求次数以及减少请求资源的大小
• 采用图片懒加载（延迟加载）：减少页面第一次加载过程中http的请求次数
• 能用css做的效果，不要用js做，能用原生js做的，不要轻易去使用第三方插件：避免引入第三方大量的库
• 减少对cookie的使用：减少本地cookie存储内容的大小

2. 代码优化

• 在js中尽量减少闭包的使用：原因：使用闭包后，闭包所在的上下文不会被释放
• 减少DOM操作，主要是减少DOM的重绘与回流（重排）
• 在js中避免嵌套循环和"死循环"：一旦遇到死循环，浏览器就会直接卡掉
• 把css放在body上，把js放在body下面
• 尽量将一个动画元素单独设置为一个图层：避免重绘或者回流的大小
• js封装过程中，尽量做到低耦合高内聚：减少页面的冗余代码

3. 其他

• 图片压缩
• 使用内容分发cdn加速
• 静态资源缓存

前端面试题_2.web前端性能优化的方式

标签：性能   第三方   color   不同   分发   本地   lock   使用   body   

原文地址：https://www.cnblogs.com/hefeifei/p/11637765.html