WEB前端开发网页优化

手机前端响应开发框架 流行前端开发框架 web前端开发框架的搭建

网页优化：
1.尽量减少HTTP请求
通过合并文件，用css文本代替图形文本尽可能的减少HTTP请求数量，使用css间距，css精灵，图像映射和背景颜色节省请求数。

2.调整图片大小并优化
优化图片可以使用TinyPng
调整图片到所需的像素
合并图片css精灵
用html高度和宽度指定图片大小

3.优化多媒体

4.将javascript转换为css

5.使用服务端探测
如果大量使用javascript，就有必要进行服务器探测，最小化javascript开销，使用服务器端或PHP/jsp探测来代替。

6.优化javascript获取更快的执行速度和更小的文件体积

7.把table布局转为css布局

8.将css规则替代内联样式

9.最小化初始显示时间
网站要先加载网页最重要的部分。网页优化的目标不仅仅是提高速度，还要改善用户体验。

10.理智的加载javascript

摘自Steve Sounders的《High Performance web sites》
1.用更少的HTTP请求减少对象开销

2.使用内容发布网络CDN
内容分发网络，意思是尽可能的避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快，更稳定。
菜鸟理解：在离你最近的地方，放置一台性能好链接顺畅的副本服务器，让你能够在以最近的距离，最快的速度获取内容

3.添加Expires头部信息
expire头的内容是一个时间值，值就是资源在本地的过期时间，存在本地在本地缓存阶段，找到一个对应的资源值，当前时间还没有超过资源的过期时间，就直接使用这一个资源，不会发送http请求。
Cache-CONTROL：是http协议中常用的头部之一。顾名思义，他是负责控制页面的缓存机制。
如果该头部指示缓存，缓存的内容也会存在本地，操作流程的expire相似，但是有不同的地方，cache-control有更多的选择，而且也有更多的处理方式。

简单的理解，服务器在发送请求的时候，添加了一个时间值，本机会根据这个时间值来判断是否要重新获取

4.Gzip压缩文本文件
什么是Gzip压缩？思想就是将文件放在服务器上进行压缩然后再存储，可以大大减少文件的大小，传输之后，浏览器对文件进行减压缩并执行。

5.把样式表放在网页的顶部

6.把脚本放到网页主体的底部

7.避免使用css表达式
css expression 为css表达式，是用来将css属性与javascript表达式关联起来。css expression可以是javascript计算的表达式的结果。性能消耗大。

8.将javascript和css保存到外部文件
9.将同一页面中得到域名划分为2到4个，减少DNS查询从而减少DNS延迟
如何减少DNS查询？将域名转化为IP地址，再通过IP地址对应到域名，是DNS的查找过程。既然是查找过程就是需要消耗时间，一般情况下是20ms。在这个过程中浏览器是不会获取资源。

10.精简javascript

11.不要使用降低性能的重定向
原始请求被重新转向到了其他请求。用户想要访问的页面a重新指向了页面b

12.删除重复脚本，减少IE多余HTTP请求

13.编写可缓存的Ajax，尽量避免不必要的HTTP请求

网站前端开发国外框架 开发微信公众号前端框架 电商web前端开发框架