性能优化有很多方面:细节决定成败,系统慢是由一个又一个的小细节造成的,所以开发初期做好充足的准备,开发中认真负责,不偷工减料,维护期更注重代码质量,这样才会让我妈的系统稳定高效.

1.0 使用CDN(加快网页响应速度,提高用户体验)

2.0 减少HTTP请求数

3.0减少DNS查询

4.0避免重定向

5.0 图片懒加载和预加载(改善用户体验的策略,并不能提高性能,但是可以明显改善用户体验和减轻服务器压力)

6.0 减少DOM元素数量(这个针对HTML代码的质量)

7.0减少对DOM的操作 (针对js代码的质量)

8.0使用外部的js、css文件

9.0压缩javascript、css、字体、图片等

10.0 图像合并实现css Sprite(需要用的图片整合到一张图片文件中,利用background-image,background-repeat,background-position,组合使用)

11.0 使用inonfont

12.0字体裁剪

13.0多域名分发划分内容到不同域名(简称域名多请求,相同浏览器,相同域名下的图片最多2-4个线程并行下载,而相同域名的其他图片,则要等到其他图片下载后才会开始下载)

14.0尽量减少iframe使用

15.0避免图片src为空,a标签的href为空 (即使链接为空,在旧的浏览器也会以固定的步骤发送请求信息,还是耗时的,正确的<a href="javascript:void(0)"></a>)

16.0css放头部(css是HTML渲染的必备元素),js放页尾(避免脚本阻塞加载)

17.0 避免节点深层嵌套(构建DOM数,这与浏览器构建DOM文档机制有关,嵌套越深,DOM数层次也会越深,耗时更长)

18.0页面缓存(设置页面头的expries,过期时间设置久一点就达到"永久缓存",代码变更就是加文件版本号)

19.0压缩合并文件(数量少体积大 比 数量多 体积小 的文件加载速度快,因此可以考虑将多个js.css合并在一起,再压缩,达到数量少 体积小)

20.0 html+css+js各司其职(H5也能完成js的效果,比如hover,动画等,css能完成的js效果尽量就css完成,也可以获得更好的性能)

21.0使用图像的BASE64编码(不需要向服务器发送请求,由浏览器解析成图片,base64的字符串长度随图片的大小及复杂度成正比,根据实际情况使用)

22.0显示的设置图片的宽高(如果HTML里的图片没有尺寸,或代码描述的尺寸与实际的图片尺寸不符合\时,浏览器则要在图片下载完成后再'回溯'该图片并重新显示,这会消耗额外时间)

23.0显示指定文档字符集(如果浏览器不能获知页面的编码字符集,一般会在执行脚本和渲染页面前,把字节流缓存,然后再搜索可进行解析的字符集,或者默认的字符集来解析页面代码,会消耗不必要的时间)

24.0渐进式增强设计(首先满足所有浏览器的基本样式,再针对不同的高级浏览器编写更好的样式)

25.0 Flush机制(适合返回数据特别多,请求时间长,常规数据还是用正常的实时全部返回最佳,这种方式从用户体验上是最佳)

26.0HTTP协议的合理利用(只要熟悉了HTPP协议,你将充分利用浏览器缓存带来的性能提升,需要掌握(浏览器缓存的过期时间,缓存删除,什么页面可以缓存等)

27.0 动静分离(.............看懂了再写上来)

28.0HTTP持久链接(keep-alive)

29.0GZIP压缩技术(HTTP支持GZIP的压缩格式,当服务器返回的HTML信息报头包含Content-Encoding:gzip,告诉浏览器,响应返回的数据已经压缩成GZIP格式,浏览器获得数据要进行解压操作,一定程度上减轻了服务器的传输数据的压力)(请求宽带:压缩文件,开启GZIP)

30.fis3转webp(最近出来的 ,据说对性能提升有起动了一定程度)

31.0 避免使用高级选择器,通配选择器,尽量少用消耗大的css,如border-radius,box-shadow等高消耗样式,避免使用css表达式,避免全局查询

32.0 少用全局变量,避免使用with,(with会创建自己的作用域,会增加作用域的长度),尽量避免在HTML标签中写style属性

33.0 添加exprires头,服务端配置Etag,减少DNS查找

移动端性能优化:

1.0 尽量使用css3动画

2.0适当使用touch事件代替click事件

3.0避免使用css3渐变阴影效果

4.0可以用transform:translateZ(0)来开启硬件加速

5.0不滥用float.float在渲染时计算量比较大,尽量减少使用

6.0不滥用web字体,web字体需要下载解析,重绘当前页面,尽量减少使用

7.0合理使用requestAnimationFrame动画代替setTimeout

8.0css中的属性(CSS3的transtions、CSS3 3D transforms、opacity、cnavas、WebGL、video)会触发GPU渲染,应合理使用

前辈详细的看这里:http://www.cnblogs.com/xianyulaodi/p/5755079.html

关于性能(SEO)的更多相关文章

  1. web开发人员

    随笔- 4  文章- 18  评论- 12  [译]作为一个web开发人员,哪些技术细节是在发布站点前你需要考虑到的   前日在cnblogs上看到一遍文章<每个程序员都必读的12篇文章> ...

  2. 全站 HTTPS 没你想象的那么简单

    对自己无知这件事本身的无知真的挺可怕 认知偏差现象一直存在于我们每个人身上,谁也避免不掉,不过是有的人了解这件事儿,有的人不怎么知道而已,这就产生了「无知而不自知」的认知偏差.当然,这时候你自己忽悠自 ...

  3. WIFI万能钥匙面试引出上线注意事项

    WEB应用上线程序员注意事项: 单元测试 前后端联调 界面和用户体验 DEBUG 性能 SEO 安全性

  4. 浅析angular,react,vue.js jQuery-1

    作者:尚春链接:https://www.zhihu.com/question/38989845/answer/79201080来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  5. 性能是全新的 SEO

    作为一个前端project师,那不只就是公开地处理那些美丽的html5, css3 和javascript特效.小而重要的一部分工作就是要让项目朝着代码稳定和代码标准方向进展.设计.信息结构以及后台限 ...

  6. web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识

    web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识 ——不会WPO.SEO的前端工程师不是好码农 作为一名web前端工程师,除了要实现上级的要求,满足其所需要的功能,还要在平时 ...

  7. 详解react/redux的服务端渲染:页面性能与SEO

        亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染)   react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...

  8. web开发性能优化---SEO优化篇

    一.清理垃圾代码 清理垃圾代码是指删除页面中的冗余代码,可以删除80%的冗余代码. 垃圾代码主要指那些删除了也不会对页面有任何影响的非必要代码. 最常见的垃圾代码,空格 空格字符是网页中最常见的垃圾代 ...

  9. 【redux】详解react/redux的服务端渲染:页面性能与SEO

        亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染)   react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...

随机推荐

  1. 使用CURL进行模拟登录

    在信息采集的时候,要采集的站点可能需要登录,这样使用简单的采集方式(例如file_get_contents)就无法做到了,我们可以利用PHP的CURL扩展库来进行模拟登录,下面给出代码示例: < ...

  2. .net 表达式返回值和等号赋值的区别

    .net 7.0的新特性中,有一个使用表达式体返回值的操作.请看如下代码: private string _userName=""; public string UserName{ ...

  3. copy GC 和 mark & compaction GC的算法异同

    先标记 然后 copy GC是,对所有child,判断, 如果child没有被访问过,那么拷贝到新地址,child的forwording指向新地址,child标记为已访问,把自己对child的引用改为 ...

  4. [python] 使用Jieba工具中文分词及文本聚类概念

    声明:由于担心CSDN博客丢失,在博客园简单对其进行备份,以后两个地方都会写文章的~感谢CSDN和博客园提供的平台.        前面讲述了很多关于Python爬取本体Ontology.消息盒Inf ...

  5. nodejs -- http模块. request() 方法 , get方法.

    1. request方法: 提交评论到慕课网: var http = require('http'); var querystring = require('querystring'); var po ...

  6. leetcode题解 3. Longest Substring Without Repeating Characters

    题目: Given a string, find the length of the longest substring without repeating characters. Examples: ...

  7. 根据ip获取地理信息

    function getIPLoc_sina($queryIP){    $url = 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?form ...

  8. Windows10 VS2017 C++ xml解析(tinyxml2库)

    首先下载tinyxml2 7.0.1库: https://github.com/leethomason/tinyxml2/releases 打开tinyxml2,然后升级sdk,解决方案->重定 ...

  9. linux 查看进程下进程的数量

    1.pstree -p 14686(PID)  获取到nginx的四个子进程(或 ps -ef |grep nginx) 2. cat /proc/15178(PID)/status threads即 ...

  10. java.math.*;(一)

    package com.test; /* Math类: java.lang.Math类中包含基本的数字操作,如指数.对数.平方根和三角函数. java.math是一个包,提供用于执行任意精度整数(Bi ...