ihtml5 / blog

个人博客 源码阅读*前端实践 My Blog
MIT License
6 stars 0 forks source link

前端性能优化 #2

Open ihtml5 opened 8 years ago

ihtml5 commented 8 years ago

前端性能优化的要点

1. 前端静态资源合并

Why

通过前端资源打包合并,减少页面的http请求,提升页面的加载速度

How to do

使用Gulp,Webpack等前端打包工具,对资源进行打包合并

Links

  1. react和webpack小人书
  2. Gulp 入门指南
  3. Yahoo前端性能优化34条军规

    2.table组件,form表单页面样式交互统一

    Why

后端在开发页面的时候,未能按照前端指定的规范编写页面

How to do

前端以测试的身份,逐一检查页面的样式和交互,使其统一

Links

3.iframe性能优化

Why

在npc项目中,通过使用iframe来快速实现单页面应用的效果,但是随着iframe的大量使用,页面的性能越来越低,急需优化。

How to do

  1. 调研iframe的渲染原理,更加明晰其如何影响性能 2. 查找目前已有的国内外关于iframe性能调优的解决方案

    Links

  2. Iframes, onload, and document.domain
  3. iframe异步加载技术及性能
  4. Using Iframes Sparingly
  5. Iframe loading techniques and performance
  6. Modern iframe programing
  7. Using Iframes to Address Third-Party Script Issues and Boost Performance
  8. Non-onload-blocking async JS

    4.交互优化

    Why

页面中有许多页面交互存在着不合理,使用不方便等问题

How to do

通过修改页面显示,交互逻辑修改等优化交互

Links

5.js代码逻辑调优

Why

后端在编写前端js代码时,会出现js代码编写不规范,代码逻辑不严谨等问题

How to do

类似于2中修改table和form,逐一检查,修改完善

Links