优化web前端性能

  1. 优化css性能
    很多css需要通过HTTP请求来引入(除非使用内联css),所以尽量优化css。不要使用@import来引入外部样式表,这回阻止浏览器并行下载。link标签是更好的选择,通过link标签引入外部样式表不会阻止并行下载。
  2. 减少HTTP请求
    在很多情况下,网站的大部分加载时间来自于外部的HTTP请求,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出。所以我们要去除网页中用户体验不好的部分,包括:不必要的图片,没用的js代码,过多的css,多余的插件。
    解决办法:合并图片(css sprites),合并CSS和JS文件;图片较多的页面也可以使用 lazyLoad 等技术进行优化。
  3. 压缩css,js和html压缩技术可以从文件中去掉多余的字符,直接减少下载的文件体积
  4. 将CSS和JS放到外部文件中引用,CSS放头,JS放尾
  5. 使用CDN和缓存提高速度
  • CDN,内容分发网络,使用CDN可以把网站的静态内容链接到全球各地的服务器扩展网络,相当于一种缓存方法,允许网站访问者从最近的服务器加载数据。可极大改善资源的分发时间,显著提高网站的速度和性能。
  • 合理的设置浏览器缓存,能让浏览器自动存储某些文件,以便加快传输速度。
  1. 减少对dom的操作
    减少对DOM元素的查询和修改,查询时可将其赋值给局部变量。
    修改DOM元素会造成页面的重绘和重排,循环对DOM操作更是罪恶的行为。所以合理的使用变量储存内容,考虑大量DOM元素中循环的性能开销,在循环结束时一次性写入。
  2. 减少cookie
    http每次请求都会带上cookie,所以cookie太大会加重性能负担,建议去除不必要的cookie,使cookie体积尽量小以减少对用户响应的影响,还有就是设置合理的过期时间。
  3. 使用json格式交换数据
    json是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,json是 JavaScript原生格式,这意味着在 JavaScript 中处理 json数据不需要任何特殊的 api 或工具包。与xml序列化相比,json序列化后产生的数据一般要比xml序列化后数据体积小,而且json的速度要远远快于xml

    推荐阅读