移动前端优化技巧_漫谈Web前端优化方法
2017-02-20 15:03:19 By: shinyuu
近几年、移动端站点和app、手游井喷式的发展、大大出乎了当初从业者的预料、2010年前后中国还处于3G网时代、各种3G宣传铺天盖地、如果你稍稍回忆一下、那个时候中国几乎没有像样的移动站点；大约在12年左右、也就是iphone4s诞生的时代、在中国高级智能设备开始被普遍使用、4G的覆盖范围也越来越大、各种app、移动站点
Html5活动页面也逐渐火爆起来；随着行业的发展、对从业者及技术支持的要求也越来越高；对于前端、前端资源和页面优化是常见要求、对比移动端、移动端对前端优化的要求更高、可以说要达到极致、虽然现在基本都有使用WIFI了、但一些地方还是要靠4G甚至3G、2G、极致的优化能争取更多的pv和更多的可能
如果你去观察一些大公司的项目和一些比较有名的站点、也会发现他们的优化是做的非常专业非常好的；而我今天跟大家聊的就是关于前端优化的内容、话不多说、来看看有哪些选项
一、引用资源部分优化
·合并引用的css、javascript、并使用压缩模式、这个很好理解吧
·合并页面引用的小图标、也就是合成一张图片、引用背景图片定位、俗称雪碧图
·使用按需加载、scroll加载的处理方式
·服务器GZIP处理资源、这一般是指WWW服务器中安装的一个功能、当有人来访问这个服务器中的网站时、服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来、一般对纯文本内容可压缩到原大小的40%、好吧、后面这一句是科普
·异步加载资源、和document构建不相冲突、defer、async的设置
·减少http请求、全局使用、缓存一切可缓存的资源文件
·外联式引用资源、主要是为了页面缓存考虑
·资源文件放在同一个服务器、避免调用第三方资源、万一挂了那(常见的是各种不靠谱的CDN、泪目中)
·dns-prefetch、把这个放这里不知道合适不合适、这个应该算是http请求方面的优化、不知道什么是dns-prefetch是什么的自行谷歌之、俗名叫dns预获取、主要作用是减少请求次数和提前对dns预获取(废话)、什么意思那、简单的说你的站点域名是x.com、而你网站上一些的图片等资源是放在img.x.com上、每次请求会涉及到dns解析问题、对于性能要求极致的站点这个处理就必不可少、在head中加入<link rel="dns-prefetch" href="//img.x.com">就能达到上述的效果、需要注意、虽然dns-prefetch能够加快网页解析速度、但是也不能随便滥用、因为多页面重复DNS预解析会增加重复DNS查询的次数；
二、css&javascript内容优化
·css引用写在头部、javascript引用写在底部、使用异步加载、避免渲染等待
·避免在页面标签中写样式
·不过度引用字体、字体大小的问题
·值为0的时候不用单位
·使用标准的浏览器前缀、或者使用类似scss中的@include的写法、定义详细再引用
·不滥用页面浮动
·避免复杂dom 循环操作
·id的工作效率比class高、但我个人不喜欢写很多id(dom多了不爽)、看情况操作
·使用事件代理代替绑定事件
三、Dom渲染优化
·使用简洁的html标签结构、避免复杂嵌套
·使用css3书写动画、减少jsdom操作
·适当使用svg、canvas
·避免最下级元素书写页面class
四、图片优化
插一句、web图片优化应该是优化中的重头戏、内容型、展示型的站点图片规模很大、也许1%的优化作用就可以和其他的优化方式相媲美；
·使用css、svg、fonticon代替图片；
·压缩图片、重中之重、就图片本身格式而言、png8大于gif、常用png和jpg、而压缩方面有各种工具、比如gulp(个人多次实测压缩比率达20%左右、这个也可能和图片多少、格式有关系)、TinyPNG(熊猫站、性能比较高的、不便的是国外的、上传下载太麻烦了、使用它们给的开发者接口、个人实测跟gulp差不多、比不上网站上的压缩、所以意义不大、而且限制次数、土豪冲会员也许给的接口性能会优越也说不定哈)还有其他各种网络压缩工具不一一说了、这些是针对前端使用的图片的、其实一般站点的图片处理会有服务器上专门的配置服务做这些事情的、比如用户上传一张1MB的用户头像、服务器会处理成两张、一张小图供头像图标引用、一张原尺寸的、但体积都会小很多、供站点引用、
·使用webp图片、不知道webp是啥的自行google之、是未来天网前身的美帝google公司(放我出去、我要装13、每次提天网、都叹息百毒一点都不争气......)开创的一种图片格式、性能我只能说我服、不便的是不是所有浏览器都支持这种高科技...(IE：好像听到背后有人说我帅)、要做两种可能性的预设准备、实际操作起来也是增加很多工作量的、所以是个可参考项、其实主要还是看公司团队的人力资源分配和leader的推行决心(说的好像其他不是这样似得)；
·避免使用DataUrl、也即俗称的base64引用、这种方式没有使用图片的压缩算法文件会变大、并且要解码后再渲染、加载慢耗时长、恩、要是没有直观印象、看下图、这货就长这样：
还是别看了、会瞎眼的、并且这里图片内容是没完全显示的
五、总结
以上描述序列部分排名先后、相辅而成、注意移动端和pc端的优化是没有界限的、移动端适用的优化规则在pc端同样适用
差不多写到这里了、如果还有其他吊炸天的优化方式我没列出来或者描述解释错误的小伙伴们可以留言给我、相信很多人看完这个会有疑问、我的工作也就是写点html、css、甚至不写js和用框架了、我要考虑这么多页面优化的东西？明明提交个html给程序开发就好了？
其实主要是两点、第一个如上所述、行业发展日新月异、跟不上就会掉队、另一个是做完技术人员对自己的一个精益求精的要求、性能做到极致、其实一些大厂也是这么要求的、简单的事情、做到极致、就是艺术；这也会大神和普通开发分道扬镳的地方、好吧扯远了
若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力
想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）
或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）
如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教
为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛
