网络性能优化常用方法

标签：

提升网页性能

http://www.w3cplus.com/performance/10-ways-minimize-reflows-improve-performance.html

网页卡顿的调试方法

Excetional Performance 团队总结出了一系列可以提高网站速度的方法。可以分为 7大类 35条。
包括内容 、服务器 、 CSS 、 JavaScript 、Cookie 、图片 、移动应用 ，七部分。 

一、内容部分

• 尽量减少 HTTP请求
• 减少 DNS查找
• 避免跳转
• 缓存 Ajxa
• 推迟加载
• 提前加载
• 减少 DOM元素数量
• 用域名划分页面内容
• 使 frame数量最少
• 避免 404错误

二、服务器部分

• 使用内容分发网络
• 为文件头指定Expires或Cache-Control
• gzip压缩文件内容
• 配置ETag
• 尽早刷新输出缓冲 
• 使用GET来完成AJAX请求
• 避免空的图像来

三、CSS部分

• 把样式表置于顶部
• 避免使用CSS表达式（Expression）
• 用<link>代替@import
• 避免使用滤镜

四、 JavaScript部分

• 把脚本置于页面底部
• 使用外部JavaScript和CSS
• 削减JavaScript和CSS
• 剔除重复脚本
• 减少DOM访问 
• 开发智能事件处理程序

五、Coockie部分

• 减小Cookie体积
• 对于页面内容使用无coockie域名

六、Image 部分

• 优化图像
• 优化CSS Spirite
• 不要在HTML中缩放图像
• favicon.ico要小而且可缓存

七、 Mobile部分

• 保持单个内容小于25K
• 打包组件成复合文本

https://segmentfault.com/a/1190000004139275

代码级优化

关于图片

1. 页面内的大图，特别是banner图，登录页背景图等，使用第三方的cdn加速。同时做一遍压缩，如果压缩之后还超过200kb，则和设计师沟通是否取消或者更换图片。

2. 精灵图必备，各种小图标，小icon，做到一张图片里面去。

3. 尽量使用icon font代替小图标，icon font的优点可以甩普通的icon图标几条街，随意调整大小，改变颜色，太cool！！

4. 如果项目很大，公司不差钱，最佳方案是把图片资源放在单独的服务器上，配置独立的域名，图片资源的加载由图片域名加载，很多大公司的静态资源都是由独立的服务器来存放和分发的

我一般和设计师讨价还价的底线就是图片必须加载流畅，如果用户打开网页图片加载半天出不来，就算我们的图片做的再漂亮，又有什么卵用！

关于js

1. 第三方的js库，必须使用min版。站点内部的lib，每次发布上线之前必须使用gulp压缩合并。

2. 移动端使用zepto库，不允许使用jquery

3. 给js代码一个全局命名空间，举个例子，我们的项目是某个自行车官网，全局命名空间就叫bike，和本项目有关的所有js方法，函数，变量，全部挂在bike的下面

var bike={};
bike.name=‘cookee‘;
bike.getOrderDetail=functtion(id){.....}

关于css

1. 提炼项目的公共样式，按钮、表单。

2. 命名。面向属性命名，通用模块可以面向模块命名，比如头部header，尾部footer等，其他请尽量使用面向属性的命名方式，这样可以给css最大程度的复用自由，关于什么是面向属性的命名方式，请参考推荐

3. 样式分离再分离，在css里面不要使用id属性，留着id给js使用

4. 减少css的层级嵌套，由于css的渲染是从右向左的，关于网页的渲染，这个细说起来又可以写一篇文章了。如果你的层级标签嵌套多层，想想要浪费多少渲染时间，对于移动端毫秒必争的加载时间，你还有什么理由不改进你的代码

5. 优雅的名字可以让人一目了然，放一张前人总结的图，没事的时候多看看，潜移默化的记住这些名字

关于html

1. 精简dom结构，减少冗余html

2. 语义化标签，要学会用

3. 移动端，使用svg绘图代替canvas绘图，canvas会有严重的锯齿(如果有同学有实践过的解决锯齿的方案，我愿恭听)

网络性能优化常用方法

标签：

原文地址：http://www.cnblogs.com/wangpenghui522/p/5451863.html