前端性能优化总结

页面重构 - 在不改变外部行为的前提下,简化结构,添加可读性,而在前端保持一致的行为(即不改变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指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分,换语言是无法“优化”的。

相关推荐