关于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文件中的引用。

 

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

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

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

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