CODERFE

前端性能优化

时间黄金法则:只有10%-20%的时间花在下载HTML文档上,其余80%-90%都花在下载页面组件上,以下规则大部分都是摘自“雅虎军规”。

减少HTTP请求(打开网页的时候,我们看到的文字,图片,多媒体每个内容都是从服务器获取的,每一个内容的获取,就是一个HTTP请求)
  • 图片css sprite
  • 图片地图,在一张图片上关联多个URL,URL最终指向取决于用户点击的位置
    script合并、css合并
  • 内联图片,通过使用data:URL模式可以使页面包含图片但无需额外的HTTP请求
使用CDN内容分发网络(Content Delivery Network其目的在于让用户可就近取得所需内容,解决网络拥挤的状况,提高用户的访问速度)
压缩javascriptcss(gzip)
  • 去除空格、空白符、注释符
  • 简写方法名、参数名,精简javascript脚本
  • css重用类,删除空的声明
css放在顶部head中(css at the top)
  • 避免页面出现空白或闪烁
script放在页面底部(script at the bottom)
  • 先呈现出内容,避免浏览器因脚本出错而停止加载内容
避免在css中使用表达式,影响浏览器的性能
javascriptcss放在外部文件
  • 单独提取
    • 提高复用性
    • 减小页面体积
    • 提高jscss的可维护性
    • 可单独缓存
  • 写在页面内(样式只应用于一个页面,不被经常访问,脚本和样式很少<20)
    • 减少页面请求
    • 提升页面渲染速度
减少DNS查询(DNS查找可以缓存起来以提升性能)
  • IE 30m
  • Chrome 60s
  • Firefox 60s
  • 缓存时间长:减少DNS重复查找,节省时间
  • 缓存时间短:及时检测网站服务器的变化,保证访问的正确性
避免重定向(用户的请求被重新转向其他请求)
  • 301:用户请求的页面被移动到其他位置,永久重定向,对搜索引擎更智能
  • 302:用户请求的的页面被找到了,但不在原始地址,临时重定向
  • 增加了服务器的往返次数
移除重复脚本
  • 重复脚本会增加不必要的HTTP请求和执行javascript所浪费的时间
配置实体标签(Enity Tag,Web服务器和浏览器用于确认缓存组件有效的一种机制)