关于性能(SEO)
性能优化有很多方面:细节决定成败,系统慢是由一个又一个的小细节造成的,所以开发初期做好充足的准备,开发中认真负责,不偷工减料,维护期更注重代码质量,这样才会让我妈的系统稳定高效.
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)的更多相关文章
- web开发人员
随笔- 4 文章- 18 评论- 12 [译]作为一个web开发人员,哪些技术细节是在发布站点前你需要考虑到的 前日在cnblogs上看到一遍文章<每个程序员都必读的12篇文章> ...
- 全站 HTTPS 没你想象的那么简单
对自己无知这件事本身的无知真的挺可怕 认知偏差现象一直存在于我们每个人身上,谁也避免不掉,不过是有的人了解这件事儿,有的人不怎么知道而已,这就产生了「无知而不自知」的认知偏差.当然,这时候你自己忽悠自 ...
- WIFI万能钥匙面试引出上线注意事项
WEB应用上线程序员注意事项: 单元测试 前后端联调 界面和用户体验 DEBUG 性能 SEO 安全性
- 浅析angular,react,vue.js jQuery-1
作者:尚春链接:https://www.zhihu.com/question/38989845/answer/79201080来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- 性能是全新的 SEO
作为一个前端project师,那不只就是公开地处理那些美丽的html5, css3 和javascript特效.小而重要的一部分工作就是要让项目朝着代码稳定和代码标准方向进展.设计.信息结构以及后台限 ...
- web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识
web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识 ——不会WPO.SEO的前端工程师不是好码农 作为一名web前端工程师,除了要实现上级的要求,满足其所需要的功能,还要在平时 ...
- 详解react/redux的服务端渲染:页面性能与SEO
亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染) react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
- web开发性能优化---SEO优化篇
一.清理垃圾代码 清理垃圾代码是指删除页面中的冗余代码,可以删除80%的冗余代码. 垃圾代码主要指那些删除了也不会对页面有任何影响的非必要代码. 最常见的垃圾代码,空格 空格字符是网页中最常见的垃圾代 ...
- 【redux】详解react/redux的服务端渲染:页面性能与SEO
亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染) react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
随机推荐
- 阿里云ssh断开处理办法
一.背景说明 1.1 墙外的吐槽 云是个好东西但我一直不觉是个有那么好的东西,因为就较多次的体验来看,用得很难受:如果要我来选我宁愿自建机房.要说难受的具体原因原来倒是没想得很清楚,现在想来网速慢不是 ...
- coursera-斯坦福-机器学习-吴恩达-笔记week1
1 Introduction 1.1 概念:一个程序被认为能从经验E中学习,解决任务 T,达到性能度量值P,当且仅当, 有了经验E后,经过P评判, 程序在处理 T 时的性能有所提升. 1.2 机器学习 ...
- C++解析十-数据封装
数据封装 所有的 C++ 程序都有以下两个基本要素: 程序语句(代码):这是程序中执行动作的部分,它们被称为函数. 程序数据:数据是程序的信息,会受到程序函数的影响.封装是面向对象编程中把数据和操作数 ...
- 调试nodejs项目接口,使用Posman,用req.body拿不到数据
近日在postman 上面测试nodejs写的post接口,发现后台接受不到数据. 很多人其实不知道怎么postman 上面GET和POST怎么使用的 Postman接口操作 1.GET请求操作: 2 ...
- vs2017如何设置类或函数前不显示引用的数量
这几天,从vs2013换成vs2017,17版本增加了一个类或函数前提示引用的数量,这个感觉很别扭,如何取消显示这个呢? 问题如下: 取消显示这个引用的步骤: 找到菜单栏: 工具 ---> 选项 ...
- Centos7安装xenserver tools
mount /dev/cdrom /mnt [root@192 ~]# mount /dev/cdrom /mntmount: /dev/sr0 写保护,将以只读方式挂载[root@192 ~]# c ...
- js带“.”的对象属性名怎么使用
问题:这样的json对象(event) { "title": "title", "alert":"ding", &quo ...
- vscode 完全支持zeng code的写法
一.快速编写HTML代码 1. 初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签. ...
- 网络编程 生产者消费者模型 GiL
守护进程: 注意事项: 1.必须在p.start()前 2.守护进程不能开子进程 3.如果主进程的运行时间快于子进程,那么就只有主进程的结果,没有守护进程的结果,因为守护进程没有进行完.反之会得到两个 ...
- Vue: 用 key 管理可复用的元素
<div id="login"> <template v-if="loginType === 'username'"> <labe ...