web前端开发页面优化

发布于2017年2月16日 15:04:59 ,最后一次修改于2017年2月18日 16:51:55

前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快、对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升。(网站杜绝白屏)

以下为前端优化优化方案:
       (1) 减少http请求次数:css spirit,data url      // +去除网站中死链和没用的链接
       (2) JS,CSS源码压缩           //合并多个外部CSS,JS文件,避免用@import导入,css至head中,js至文                 档底部
       (3) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操               作本地变量,不用请求,减少请求次数
       (4) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能
       (5) 用setTimeout来避免页面失去响应
       (6) 用hash-table来优化查找
       (7) 当需要设置的样式很多时设置className而不是直接操作style
       (8) 少用全局变量
       (9) 缓存DOM节点查找的结果
       (10) 避免使用CSS Expression   // 微软提供了4个css 表达式:getExpression、recalc、            removeExpression、setExpression
       (11) 图片预载       //图片懒加载
       (12) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比    div+css布局慢
       (13)通过css Sprites来整合图像     //CSS精灵
       (14)做浏览器缓存;
         .......
      当然了还有采用CDN网络等其他方法了,具体方案还需依项目而定,还有控制网页在网络传输过程中的数据量可以启用GZIP压缩、保持一个良好的编程习惯,避免出现重复的CSS,JavaScript代码和多余的HTML标签和属性,减少杜绝白屏的出现。
最后分享一些不错的分析优化工具链接:
  1. 蜘蛛模拟器这个工具可以分析你的页面,并提供一些优化建议。  // 做得不错
  2. 图像SEO工具这个工具可以检查图片的alt标签,并提供一些优化建议。
  3. 请求检查器:找出页面中需要加载哪些资源和服务。
  4. 链接检查器检查页面中内部、外部和无效链接。
  5. HTTP头检查显示网页或资源的HTTP响应头。
  6. 社交检查器检查页面中的社交组件,比如Google+、Facebook、Twitter、Linkedin和Pinterest。
  7. Gzip检查器检查页面是否经过了Gzip压缩。
  8. CSS delivery工具:检查页面中所使用的CSS文件。
  9. 面包屑工具可根据你输入的信息提供面包屑导航的代码。
  10. CSS压缩工具用于压缩CSS代码。

发表评论