前端随心记---------网页的优化问题

网页的优化问题

  如今互联网已经影响着人们生活的方方面面,无论用户还是作为网站的创建者都在享受网络便利,作为用户,在浏览网站时,都需要一个很好地用户体验以便加强用户对网站的认知和流量的导向,对用户而言,当打开一个网站时,总是希望能很快的显示内容。而对于网站的创建者,总是希望以较低的成本和较快的速度来服务于用户,因此如何让用户更快的打开自己的网站?

  如何让用户更快的打开自己的网站?如何提高网站的速度?

  一.尽可能的减少HTTP请求

    当我们打开网页的时候,就是向服务器发送请求,然后服务器响应请求并返回给浏览器,而页面的文字,图片,js,css等文件就是从服务器返回的,因此,减少HTTP请求在于减少文件的数量,尽可能对网页文件进行合并。

  二.使用CDN(内容分发网络)

    使用CDN,就是当你向服务器请求时,可以在离你最近的地方,放置一台性能好链接顺畅的副本服务器,让你能够以最近的距离,最快的速度获取内容。

  三.添加Expire/Cache-Control头

    当阿帕奇服务器开启了expire模块,则网络请求会返回expire的http头,expire头的内容是一个时间值,也就是资源在本地的过渡时间,存在本地,在本地缓存阶段,找到一个对应的资源值,当前时间还没超过资源的过期时间,就直接使用这个资源,不会发送http请求。

    Cache-Control是http协议中常用的头部之一,负责控制页面的缓存机制,如果该头部指示缓存,缓存的内容也会存在本地,操作流程和expire相似,但也有不同的地方,Cache-Control有更多的选项,而且也有更多的处理方式。

  四.启用Gzip压缩

    将文件进行压缩,减少文件大小,同时浏览器对压缩文件进行解压,展示在页面上,呈现给用户。

  五.将CSS放在页面最上面

    在html文件加载的过程中,先加载样式,再加载内容,可以避免先加载内容时的页面闪烁和空白的问题。

  六.将script放在页面最下面

    根据html文件的加载顺序,将js文件放在整个内容后面,可以先展示内容,后执行js代码,防止js中存在死循环而导致整个页面内容加载不出来

  七.避免在CSS中使用Expressions

     CSS表达式是动态设置CSS属性的强大(但危险)方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景颜色: 
     

 background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );  


       如上所示,expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。expression方法在其它浏览器中不起作用,因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。 
      表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。 
      一个减少CSS表达式计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS表达式。如果样式属性必须在页面周期内动态地改变,使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。

  八.把JS和CSS放在外部文件中

  针对这个优化方式,存在很大的争议,

  1.单独提取。 好处:提高了js和css的复用性,减少页面体积,提高了js和css的可维护性。

  2.写在页面内。  好处:减少页面请求,提升页面渲染速度。     适用于:文档只用于一个页面,一个不经常被访问到的网页,脚本和样式很少。

  九.减少DNS查询

  利用浏览器的缓存,缓存时间长时:减少DNS的重复查找,节省时间。缓存时间短时:及时检测网站服务器的变化,保证正确性。

  十.压缩Javascript和Css

  在项目上线前。将Javascript和Css都进行压缩,使线上版本是最轻量级的,大幅提升网站性能。

   十一.避免重定向

  重定向状态码:

   301 Moved Permanently  被移动到了另外的位置,永久重定向。对SEO记录新的地址替换老地址

   302 Found 被找到了,临时重定向   对SEO先找到旧地址,在发送请求到新地址

  十二.移出重复的脚本。

  十三.配置实体标签(ETag)

    ETag:Entity(实体标签) 属于HTTP协议 受web服务支持。

     它是使用特殊的字符串来标识某个请求资源的版本。

  十四.使AJAX缓存

   

推荐工具: YSLOW(一款实用的网站性能检测工具)

                    https://developer.yahoo.com/

yahoo优化网址:

https://developer.yahoo.com/performance/rules.html?guccounter=1&guce_referrer=aHR0cHM6Ly93d3cuY25ibG9ncy5jb20v&guce_referrer_sig=AQAAAFdb1dEyYUfEv6C0JkV517NbM0GZztJ1u5jdWJY9oxMG6njaSWwffxC9KoHdzpdwm50HVX6fGuJTNW2bVAYvsx-rsSAGMzYXA_cl_xqBQzkGcNhzD_8Ont8qYOxVKddapXBOQfxvdgd4GAtdiVlw9vdg7o9ZtrwH5hVaVG2GPSAa#num_http

猜你喜欢

转载自www.cnblogs.com/hudunyu/p/11609224.html