web前端应该从哪些方面来优化网站？

一、页面级别优化

• 资源合并

尽可能的将外部的脚本、样式进行合并，多个合为一个。另外， CSS、 Javascript、Image 都可以用相应的工具进行压缩，压缩后往往能省下不少空间。

• 减少请求次数

（1）避免重定向：重定向说明需要客户端采取进一步操作才能完成请求，请求时间会延长。所以输入URL时应使用最完整的、最直接的地址，比如输入“www.baidu.com”而不是“baidu.com”。
（2）使用缓存的机制：主要有数据库缓存、服务端缓存(反向代理和CDN缓存)、浏览器缓存。

• 图片懒加载

在页面图片非常多的情况下，可以使用懒加载。只加载第一屏的图片，当用户通过滚动访问后面的内容时再加载相应图片。方法是先用一张极小的占位图代替图片，占位图只需下载一次，将原本图片的src存储在另一个属性中，判断当图片快进入可视区域就将路径赋值给src并下载图片进行展示。

• 图片合并压缩

合并 CSS图片，减少请求数的又一个好办法。

• 外链脚本置后

浏览器是可以并发请求的，这一特点使得其能够更快的加载资源，然而外链脚本在加载时却会阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。而最简单可依赖的方法就是将脚本尽可能的往后挪，减少对并发下载的影响。

• css前置（将 CSS放在 HEAD中）

如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕。除此之外，有些浏览器会在 CSS下载完成后才开始渲染页面，如果 CSS放在靠下的位置则会导致浏览器将渲染时间推迟。

• inline脚本defer（异步执行）

inline脚本对性能的影响与外部脚本相比，是有过之而无不及。首页，与外部脚本一样， inline脚本在执行的时候一样会阻塞并发请求，除此之外，由于浏览器在页面处理方面是单线程的，当 inline脚本在页面渲染之前执行时，页面的渲染工作则会被推迟。简而言之， inline脚本在执行的时候，页面处于空白状态。鉴于以上两点原因，建议将执行时间较长的 inline脚本异步执行，异步的方式有很多种，例如使用 script元素的defer 属性(存在兼容性问题和其他一些问题，例如不能使用 document.write)、使用setTimeout等。

• 域名配置时防止发生跳转（减少不必要的 HTTP跳转）

对于以目录形式访问的 HTTP链接，很多人都会忽略链接最后是否带 '/'，假如你的服务器对此是区别对待的话，那么你也需要注意，这其中很可能隐藏了 301跳转，增加了多余请求。如果链接是以无 '/'结尾的方式访问的，于是服务器有了一次跳转。

• 避免重复打包模块代码

这种情况主要是由于疏忽或页面由多个模块拼接而成，然后每个模块中请求了同样的资源时，会导致资源的重复请求。

二、代码级别优化

• 减少DOM操作，virtual-dom的目标

（1）DOM操作应该是脚本中最耗性能的一类操作。VD 最大的特点是将页面的状态抽象为 JS 对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。如 React 就借助 VD 实现了服务端渲染、浏览器渲染和移动端渲染等功能。
（2）此外，在进行页面更新的时候，借助VD，DOM 元素的改变可以在内存中进行比较，再结合框架的事务机制将多次比较的结果合并后一次性更新到页面，从而有效地减少页面渲染的次数，提高渲染效率。
（3）减少Reflow和Repaint。

• css减少Reflow

• 避免使用eval和Function

（1）每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。
（2）eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。
（3）Function 构造函数比 eval略好，因为使用此代码不会影响周围代码 ;但其速度仍很慢。
（4）此外，使用 eval和 Function也不利于Javascript 压缩工具执行压缩。

• 减少作用域链查找

如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。

//低效率写法
// 全局变量 
var globalVar = 1; 
function myCallback(info){ 
  for( var i = 100000; i--;){ 
  //每次访问 globalVar 都需要查找到作用域链最顶端，本例中需要访问 100000 次 
    globalVar += i; 
  }
} 

//更高效的写法
// 全局变量 
var globalVar = 1; 
function myCallback(info){ 
  //局部变量缓存全局变量 
  var localVar = globalVar; 
  for( var i = 100000; i--;){ 
    //访问局部变量是最快的 
    localVar += i; 
  } 
  //本例中只需要访问 2次全局变量
  //在函数中只需要将 globalVar中内容的值赋给localVar 中区
  globalVar = localVar; 
}

此外，要减少作用域链查找还应该减少闭包的使用。

• 注意css选择符规范，浏览器对选择符的解析时是从右往左进行的

• 字符串拼接

在 Javascript中使用"+" 号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销，因此当需要拼接的字符串较多的时候可以考虑用此方法。