码迷,mamicode.com
首页 > 其他好文 > 详细

前端性能优化总结

时间:2019-11-18 12:51:28      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:dom操作   功能   应用   属性   显示   ESS   sea   浏览器兼容   应用服务器   

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

 

 

前端性能优化总结

标签:dom操作   功能   应用   属性   显示   ESS   sea   浏览器兼容   应用服务器   

原文地址:https://www.cnblogs.com/slightFly/p/11881333.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!