Web 前端优化基本技巧

现在来说,前端已是一个很大的概念了,这里特指 web 前端,包含 HTML/CSS/JS 等资源。这方面的优化手段已经比较成熟,常用的手段有优化浏览器访问、使用反向代理、CDN 等。

浏览器访问优化

  1. 减少 Http 请求
    这个显而易见,越多的请求意味着建立更多的链接,需要更的的线程去处理。这些通信和服务的开销都是很高的,甚至有的时候总的通信时间会超过处理时间。

    减少 Http 的主要手段是合并 css、Javascript、合并图片。将浏览器一次访问需要的资源合并成一个文件。

  2. 使用浏览器缓存
    对于一个网站而言,上述的 CSS、Javascript、一些固定图片(logo、基本素材)都是静态资源文件,改动的频率少,但是每次 Http 请求又是必需的;
    那么好了, 用浏览器缓存这部分缓存可以方便得节省资源。

  3. 启用压缩
    同样是上述的表态文件,服务端对文件进行压缩,浏览器端再对文件进行解压。但这部分处理也会占用一部分时间,效果不是很明显,平时有习惯优化大小就好。

  4. CSS 放页面上,Javascript 放在页面下
    这只是一个理论上的方法, 因为浏览器会加载完全部 CSS 才渲染页面,而相反,加载完 Javascript 的时候会立即执行,所以让浏览器尽快下载 CSS,最后才加载 Javascript。

    但是页面解析需要用到 Javascript 控制时就不合适了,所以必要的 Javascript 放合适位置,不影响解析的放最下面。

CDN

CDN(Content Distribute Network, 内容分发网络)的本质是一个缓存,就是将数据缓存在离用户最近的地方,使用户就近访问到数据。

CDN 能够缓存的一般是静态资源,如图片、媒体文件、HTML、CSS、Javascript 等。好的 CDN 服务可以做到静态页秒开的效果。

反向代理

顾名思义, 反射代理就是在服务器与用户之间加一个代理服务器来做中间人,用户把请求都交给反向代理服务器,服务器再根据一定的规则把请求转发给应用服务器。

中间的反向代理服务器一方面可以保护应用服务器,另一方面可以配置缓存,如果用户请求的资源在代理服务器的缓存中用, 即可立即返回,减少应用服务器压力。

打赏不准超过你工资的一半!