前端性能优化总结

Posted 2020-11-22 slightfly

页面重构 - 在不改变外部行为的前提下，简化结构，添加可读性，而在前端保持一致的行为（即不改变UI的情况下，对网站进行优化）

1、布局

2、浏览器兼容

3、对移动平台的优化

4、SEO优化(Search Engine Optimization，搜索引擎优化 -- 利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名 --> 黑帽(black hat) | 白帽(white hat))

方面：

1、严格编码规范

2、高内聚，低耦合

3、代码弹性，增强代码的可扩展性

4、增强用户体验

5、压缩JS,CSS,Image等资源(通常有服务器来解决)

6、采用CDN来加载资源

7、图片预加载，懒加载

8、JS：脚本文件放在底部加上时间戳，少用全局变量

9、DOM的优化：减少dom操作，减少table使用(table要等其中的内容全部完全下载之后才会显示出来，比div+css慢)

10、CSS样式：样式文件放在顶部，当需要设置的样式很多时设置className，而不是直接操作style，避免使用css expression即动态属性

11、HTTP服务器缓存

12、减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；data缓存 ，网页Gzip，CDN托管，图片服务器

13、尽量向前端优化，减少数据库操作，减少磁盘IO -- 在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。