现在上网就得看网页打开快不快，那关系到咱们用着舒心不舒心。那么，哪部分最占网速？肯定是图像了，这直接关乎网页打开速度。所以，咋们在开发网站的时候，必须好好想想怎么把图像用好，选个合适的格式、尺寸，再利用智图压缩和srcset属性，做到网页打开更快。
避免滥用图片资源
大图加载慢，影响用户！所以你得根据需要选图咯，看看哪种格式和大小最合适呗。有个小技巧就是用智图缩图减小文件大小提速。再告诉你一招，代码里用上srcset属性就能根据屏大小和分辨率挑适合的图，让用户感觉更顺滑。
静态资源域名不使用cookie
要让网络更快更高效，我们尽量不让静态资源域名设置cookie，因为这能省去那些没必要的请求头信息传输。这么做既减轻了服务器压力，又提升了下载速度。设定好合适的cookie策略，就能大大改善网页的加载效率！
避免重定向影响加载速度
转向会让网页变慢！所以我们要搞定服务器上的转跳设置，小心点儿别弄出太多没必要的转跳来，这样才能不让速度拖垮。
异步加载第三方资源
第三方资源有些不可控，同步加载的话会影响页面速度，让人觉得不爽！所以，小伙伴们在用这些资源的时候，最好选择异步加载，这样才能保证我们的页面欢快地展现在大家眼前~
脚本处理注意事项
在处理脚本时需要注意以下几点来避免影响页面加载和渲染速度：
记住别用空白的src: src为空就得刷新页面，费时间又耗网速。
尽量少调图片大小哦：老是换图就得多画好几次，影响速度的呀。
别老用dataurl！这种格式图片大而且得先解码才能显示出来，慢死了。
别用css表达式了，这个玩意儿还得跳过图形渲染。
别留空白的css规则：这样会增大file体积，让css树处理起来不爽！
display属性要会用哦：懂得怎么恰当地用display属性，就能让你的网页加载得更快，显示效果更好！
别老用浮点数/网络字体啦：少用点这些东西，能让电脑省点劲儿，渲染速度也能快点儿。
优化触摸事件
手机上的触摸感应功能很关键，特别是在跟咱们互动的时候。要想让大家用得爽快，响应又快，需要把click换成touchestare、touchend这些触摸开始和结束的事件，这能明显提高操作反应，还能让你更快地进入下一步操作，用的就越顺手。
减少DOM节点数量
网页上的好多节点多了会让页面变慢。所以，设计导航时要尽量减少节点数。注意，尽量不要有太多的嵌套和没用的节点！
合理选择动画方式
搞网页动画啥的，看多少元素，选哪种方法喽。要是不超过五个，就试试CSS动画楼；但如果超过了，得用Canvas或者WebGL（IOS8及以上喔）才撑得住，别让速度慢下来！
GPU加速渲染
用CSS的特效功能（比如CSS3 transitions，3D transforms，opacity这些）或者Canvas，WebGL，Video这些东东，巧妙地激活GPU渲染来提高网页动画效果和平稳度！
总而言之，做网站设计和开发得注意点小细节，这样才有可能让你的网站加载速度快，用户浏览起来也会比较爽。比如说，挑个好点的图片格式，压一下，把静态文件上传到特定站点，优化一下脚本啥的都能帮咱们省钱；还有，利用GPu加速渲染这种新科技，也是可以提高网站性能的。所以，咱们要时刻不停地追求进步，创造出更好用、运行更顺畅的互联网世界。
评论0