如何做网站性能优化?

优化网站性能有很多方法,总体来说,可以几个方面入手:代码优化,利用缓存,减少请求数量等等。

1. 代码优化

(1) CSS
  • 避免使用CSS表达式
  • 尽可能用类和ID选择,少用后代选择器,子选择,通配符选择器等高级选择器(CSS选择器是从右到左开始匹配)
(2)JavaScript
  • 尽量避免全局查找,建议使用局部变量
  • 将常用变量缓存起来使用
  • 不要使用with语句(会增加作用域链长度)
  • 有效利用正则表达式处理字符串
  • 尽量使用全等===做判断(避免变量隐式转换)
  • 利用setTimeout定时器将耗时长的大任务分割为N个异步任务执行
  • 使用window.requestAnimationFrame()绘制动画,而不是setInterval()
(3)DOM操作
  • innerHtml代替DOM操作,减少DOM操作次数
  • 缓存DOM节点查找的结果
  • 采用事件委托监听DOM事件
  • 少用iframe
  • 尽可能批量修改DOM,可以通过下面的步骤减少重绘和重排的次数:
    • 隐藏元素,进行修改,然后再显示它
    • 使用一个文档片断(document.createDocumentFragment())在已存DOM之外创建一个子树,然后将它拷贝到文档中
    • 将原始元素拷贝到一个脱离文档的节点中,修改副本,然后覆盖原始元素
(4)HTML
  • 样式表和脚本文件都采用外部文件链接方式加载
  • 样式表链接定义在
    内,脚本文件放在末尾
  • 根据场景可采用JavaScript异步加载模式(动态创建

你可能感兴趣的:(如何做网站性能优化?)