• web前端页面性能优化方法


    web前端性能优化方法总结

    一,html语义化

      语义化的html是让标签做自己该做的事,便于其他开发者阅读以及使代码规范,优雅整洁。 也是为了网络爬虫更好的解析。

           问: 为什么要做到语义化呢?

      1. 有利于SEO(是指从自然搜索结果获得网站流量的技术和过程),有利于搜索引擎爬虫更好的解析我们的网页,从而获取更多的有效信息,提升网页的权重。

      2. 在没有css的时候能够清晰的看出网页的结构,增强可读性。

      3. 团队合作中,语义化的html更能让其他开发人员理解和阅读,便于团队的代码维护与修改。

      4. 支持多终端设备的浏览器渲染。

           问: 怎么做到语义化的html呢?

      1. 熟记各种html标签,知道每个html标签该如何使用。

      2. 对应的内容用对应的标签,如标题,就可选择<h1>~<h6>这些标签。

    二,减少重复代码,压缩css,js代码大小

          1. 你的背景图片保证不超过3个以上,你的css文件不超过2个,js文件不超过3个。而且良好的遵守web标准的一些规定,css放到head中,js文件放到</body>之前或者之后。

    三,背景图片大小及数量

      1图片的大小可以压缩,尽量选择比较小的图片。

           2. 可将多张图片用css精灵之城 css sprites

    四,减少http请求,合理设置缓存

      1. 合并css,js文件,减少css,js重复代码,合并图片等都是为了减少http请求,应为每次http请求的代价都是非常昂过的,所以减少http请求能有效优化访问性能。

      2. 缓存能缓存得更多,缓存得更久,也是可以大大减少http请求,就优化了访问性能。

    五,图片懒加载(lazyout images)

    六,减少cookie传输

      一方面,cookie包含在每次请求和响应中,太大的cookie会严重影响数据传输,因此哪些数据需要写入cookie需要慎重考虑,尽量减少cookie中传输的数据量。另一方面,对于某些静态资源的访问,如CSS、script等,发送cookie没有意义,可以考虑静态资源使用独立域名访问,避免请求静态资源时发送cookie,减少cookie传输次数。  

    七,js中减少DOM操作,避免使用eval和 Function,减少作用域链查找(尽量把变量设为局部变量)。

    八,CDN加速

      CDN(contentdistribute network,内容分发网络)的本质仍然是一个缓存,而且将数据缓存在离用户最近的地方,使用户以最快速度获取数据。

    九,反向代理

      1传统代理服务器位于浏览器一侧,代理浏览器将http请求发送到互联网上,而反向代理服务器位于网站机房一侧,代理网站web服务器接收http请求。

      2 .反向代理也可以实现负载均衡的功能,而通过负载均衡构建的应用集群可以提高系统总体处理能力,进而改善网站高并发情况下的性能。

  • 相关阅读:
    (转)大数据量高并发的数据库优化与sql优化
    SQL Server查询优化方法参考(转)
    CString和LPCSTR区别(转)
    delphi读写剪贴板的一些参考
    Delphi和VC混合编程总结
    Delphi 一些函数解释
    伪共享与volatile
    happens-before原则
    递归与回溯-排立组合
    二叉树
  • 原文地址:https://www.cnblogs.com/shuixiaohao/p/7873398.html
Copyright © 2020-2023  润新知