你的位置:首页 > 软件开发 > 网页设计 > 漫谈前端优化

漫谈前端优化

发布时间:2016-10-01 01:00:11
近几年,移动端站点和app、手游井喷式的发展,大大出乎了当初从业者的预料,2010年前后中国还处于3G网时代,各种3G宣传铺天盖地,如果你稍稍回忆一下,那个时候中国几乎没有像样的移动站点;大约在12年左右,也就是iphone4s诞生的时代,在中国高级智能设备开始被普遍使用,4G的 ...

  近几年,移动端站点和app、手游井喷式的发展,大大出乎了当初从业者的预料,2010年前后中国还处于3G网时代,各种3G宣传铺天盖地,如果你稍稍回忆一下,那个时候中国几乎没有像样的移动站点;大约在12年左右,也就是iphone4s诞生的时代,在中国高级智能设备开始被普遍使用,4G的覆盖范围也越来越大,各种app、移动站点、Html5活动页面也逐渐火爆起来;随着行业的发展,对从业者及技术支持的要求也越来越高;对于前端,前端资源和页面优化是常见要求,对比移动端,移动端对前端优化的要求更高,可以说要达到极致,虽然现在基本都有使用WIFI了,但一些地方还是要靠4G甚至3G、2G,极致的优化能争取更多的pv和更多的可能,如果你去观察一些大厂的项目和一些比较有名的站点,也会发现他们的优化是做的非常专业非常好的;而我今天跟大家聊的就是关于前端优化的内容;

   话不多说,来看看有哪些选项;

  1.引用资源部分优化:

  ·合并引用的css、javascript,并使用压缩模式,这个很好理解吧;

  ·合并页面引用的小图标,也就是合成一张图片,引用背景图片定位,俗称雪碧图;

  ·使用按需加载,scroll加载的处理方式;

  ·服务器GZIP处理资源,这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的网站时,服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来,一般对纯文本内容可压缩到原大小的40%,好吧,后面这一句是科普漫谈前端优化

  ·异步加载资源,和document构建不相冲突,deferasync的设置;

  ·减少http请求,全局使用,缓存一切可缓存的资源文件;

  ·外联式引用资源,主要是为了页面缓存考虑;

  ·资源文件放在同一个服务器,避免调用第三方资源,万一挂了那(常见的是各种不靠谱的CDN,泪目中漫谈前端优化);

  ·dns-prefetch,把这个放这里不知道合适不合适,这个应该算是http请求方面的优化,不知道什么是dns-prefetch是什么的自行谷歌之,俗名叫dns预获取,主要作用是减少请求次数和提前对dns预获取(废话),什么意思那,简单的说你的站点域名是x.com,而你网站上一些的图片等资源是放在img.x.com上,每次请求会涉及到dns解析问题,对于性能要求极致的站点这个处理就必不可少,在head中加入<link rel="dns-prefetch" href="http://www.cnblogs.com///img.x.com">就能达到上述的效果,需要注意,虽然dns-prefetch能够加快网页解析速度,但是也不能随便滥用,因为多页面重复DNS预解析会增加重复DNS查询的次数;

原标题:漫谈前端优化

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。