性能优化

  • 前端优化之js资源加载策略

    原文写于 2014-08-13

    阅读这篇blog之前,请先看下这本书:高性能网站建设进阶指南,里面详细的讲解了现今流行的几种异步脚本加载方案(不过里面一些结论不能盲目相信,实践之前请手动验证一下,毕竟浏览器实现日新月异)
    不过还是先简单介绍下两种最常用的动态加载js资源的方案:

    • document.write方式

      function outerHTML (node) {
                  // if IE, Chrome take the internal method otherwise build one
                  return node.o

  • 雅虎14条性能优化规则总结:

    优化方向 优化手段
    请求数量 合并脚本和样式表,CSS Sprites,拆分初始化负载,划分主域,字体图标,雪碧图片等
    请求带宽 开启服务器GZip,精简JavaScript,移除重复脚本,图像优化(包括图片大小kb)
    缓存利用 使用CDN,使用外部JavaScript和CSS,添加Expires头,减少DNS查找,配置ETag,使AjaX可缓存
    页面结构 将样式表放在顶部,将脚本放在底部,尽早刷新文档的输出
    代码校验 避免CSS表达式,避免重定向

    前端静态资源部署方案

    知乎:张云龙的回答

  • 作者: 编译青春

    2017-08-04

    本文对兴趣部落项目前端开发中使用到的性能优化方式进行总结。兴趣部落项目是手机QQ(以下简称手Q)中最大的纯网页应用,每日有大量的用户访问,对于腾讯这样一个对产品有着极致要求的公司,性能优化是一个绕不开的话题。下面就对项目中所使用的性能优化的方式做一个梳理。

    离线包

    Hybrid App 最大的一个问题就是页面需要从网络拉取,所以加载速度慢,从而影响用户体验,兴趣部落中使用一个叫做 AlloyKit Mobile 的技术架构,这种技术架构中包含很多有利于提升性能的模块,这里要说的是离线包模块。

    离线包模块可以允许手Q 永久缓存 HTML、JS、CSS

  • 围绕前端的性能多如牛毛,涉及到方方面面,以我我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列
    注意,是罗列不是展开,遇到不会不懂的点还请站外扩展

    开车速度有点快,坐稳了。

    tips : 这么多前端优化点你都记得住吗?反正我是收藏起来备查的。

    PC浏览器前端优化策略

    PC端优化的策略很多,如 YSlow(YSlow 是 Yahoo 发布的一款 Firefox 插件,现 Chrome 也可安装,可以对网站的页面性能进行分析,提出对该页面性能优化的建议)原则,或者 Chrome 自带的 Audits 等,总结起来主要包括网络加载类、页面渲染类、CSS 优化类、JavaScript 执行类

  • 前言

    突然有一天,脑之里不知怎地蹦出一个词,「双飞翼」,这是很久以前的淘宝提出的一种三栏布局优化方案,然而,时间久了已经不记得(换句话说是不理解)为啥要提出这个布局了,昨天在 SF 上发起了一个提问,但良久未有人答复,幸得@王能全是谁 提醒,终于回想起「双飞翼」的完整意义了。谨以此文同大家分享这段心路历程。

    圣杯 & 双飞翼

    说到「双飞翼」就不得不提及「圣杯」,两者均为三栏布局的优化解决方案如下图

    常规情况下,我们的布局框架使用以下写法,从上到下,从左到右。

    <header>header</header>
    <section>
        <as