关于web前端性能优化问题

好久没有来博客写随笔了，可能是懒了吧，哈哈，

最近很想整理一篇关于前端性能优化的问题，毕竟能提高网站的观赏性对吧。提升网站性能，提升用户体验

那 什么是web性能优化？

可以这么理解：从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。

那么怎么才能提高web性能优化呢？ 可以从这几个方面考虑：

  1.减少HTTP请求

         首先，每个请求都是有成本的，既包含时间成本也包含资源成本。一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。时间成本就是用户需要看到或者 “感受” 到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。另外，由于浏览器进行并发请求的请求数是有上限的

        1）合理设置 HTTP缓存：         

                        原则很简单，能缓存越多越好，能缓存越久越好。例如，很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可                           能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久

         2）资源合并与压缩

 

　　　　　基本原理：
　　　　　　注：这个是很基础且必须遵循的知识点，可是为了文章的完整性勉为其难加进来吧，嘿嘿。
　　　　　　引入外部文件好处是显而易见的，而且是项目稍稍复杂一点的时候就有必要了这样做了。
　　　　　　易维护、易扩展，方便管理和重复利用。
　　　　　　正确的方式：
　　　　　　JavaScript是浏览器中的霸主，为什么这么说，因为在浏览器在执行JavaScript代码时，不能同时做其它事情，

　　　　　　即每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的还是外链的），JavaScript代码执行完成后，

　　　　　　才继续渲染页面。这个也就是JavaScript的阻塞特性。
　　　　　　因为这个阻塞的特点，建议把JavaScript代码放到标签以前，这样既能有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放

 

      3.使用 CDN 和缓存提高速度

           您可以将网站的静态内容链接到全球各地的服务器扩展网络。如果您的网站观众遍布全球，这项功能十分有用。 CDN 允许您的网站访问者从最近的服务器加载数据。

              如果您使用 CDN，您网站内的文件将自动压缩，以便在全球范围内快速分发。

           CDN 是一种缓存方法，可极大改善资源的分发时间

 

     4.压缩文件

         最常用的文件压缩方法之一是 Gzip。 这是缩小文档、音频文件、PNG图像和等其他大文件的绝佳方法。

          Brotli 是一个比较新的文件压缩算法，目前正变得越来越受欢迎

 

     5、减少对DOM的操作

　　　　　原理：对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈

　　　　　　　　在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript(ECMAScript)看成另一个岛屿，两者之间以一座收费桥连接”。

　　　　　　　　所以每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多。所以一般建议尽量减少过桥次数。

　　　　　　　　减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

　　　　　　　　注：在IE中:hover会降低响应速度

6.压缩 CSS, JS 和 HTML
         压缩技术可以从文件中去掉多余的字符。你在编辑器中写代码的时候，会使用缩进和注释，这些方法无疑会让你的代码简洁而且易读，

        但它们也会在文档中添加多余的字节。

    7.使用这个  rel="prefetch"

<link rel="prefetch" href="http://www.example.com/"> <!-- Firefox -->
      浏览器的空闲时间去先下载用户 指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了.

对一个网站而言，CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，缓存时间可以是数天，甚至是几个月。

在某些时候，静态资源文件变化需要及时应用到客户端浏览器，这种情况，可通过改变文件名实现，即更新javascript文件并不是更新javascript文件内容，而是生成一个新的js文件并更新HTML文件中的引用。

9、异步请求Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）

在某些页面中可能存在这样一种需求，需要使用 script标签来异步的请求数据。类似：

1. <span style="font-size:14px;">/*Callback 函数*/
2. function myCallback(info){
3. //do something here
4. }
5. 　HTML:
6. 　　Callback返回的内容 :
7. myCallback('Hello world!');
8. </span>

以上是我所了解的web性能优化，欢迎各位访客指点和评论，我都会和您沟通