架构爱好者
学习交流中心

常见的前端优化技巧

  • 大体
    • 减少服务器请求数:
    • 将多个JS/CSS文件进行合并;
    • 图片不需要经常改动时,可使用CSS sprite;
    • 如果仅单个页面使用某JS/CSS文件,可以直接将文件内容放于html页面中(若多个页面公用相同的JS/CSS)文件,则不该这么做,应该利用好浏览器缓存功能。
    • 加快资源访问速度:
    • CDN。
    • 减小文件大小:
    • 将图片适当压缩;
    • 压缩JS/CSS文件。
    • 提高代码执行效率。
  • JS
    • 需要多次使用的值(比如需要遍历的数组对象的length),应先将其存为一个变量,然后调用该变量以减少JS查询的时间;
    • 于页面底部引入脚本,先将页面内容呈现给用户;
    • 提高代码复用率,减少代码冗余。
  • CSS
    • 于页面头部引入样式,避免用户看到布局错乱的内容;
    • 不要使用CSS表达式。
  • HTML
    • 主要是SEO方面的优化,添加name为keyword和description的meta标签,减少外链,外链上加上rel=”nofollow”,标签尽量符合语义,减少不必要的嵌套标签。
  • 其他
    • 预解析
    • 比如首页添加≶link rel=”prerender” href=”/about.html” />
    • 利用缓存
    • 比如可以使用百度静态资源公共库(cdn.code.baidu.com (opens new window)),若用户以前访问过其他引用了相同资源地址的文件的话,缓存的优势就出来了。
  • 总结:像压缩图片这种方法对提高网页加载速度的效果是很明显的,但是有些优化方法对于访问量小的小型网站而言并没有啥必要,比如:如果某JS文件本来就只用100来行,压缩后减少的文件大小对页面访问速度的提高等于没有,对服务器压力的减少也没啥意义。
未经允许不得转载:技术杂烩 » 常见的前端优化技巧