前端优化方案

前端优化:


1.模块化
常见的模块化方案有:AMD、CMD、UMD、ES6

 


2.缓存
   电商项目将常用数据缓存起来,比如,移动端首页的数据,商品分类等这些不经常变化的数据,目的是为了 增强 移动端Android、iOS 响应速度。
   在controller 收到用户请求后判断 ehcache中有没有缓存这个数据,没有就加载这个资源(数据库或者文件中)然后丢到缓存中,

   如果调用了这些数据的添加修改删除方法就删除这个缓存
   
3.图片懒加载

插件资源
https://github.com/zhanyouwei/m-lazy

4.js懒加载(按需加载)
插件:RequireJS、SeaJs
RequireJS AMD方案

5.前端模板渲染

原理:
重排和重绘(Layout环节和Painting环节)
任何改变dom元素位置的操作都会引发浏览器重绘操作,这是无法避免的

方案一
相比拼接字符串,jQuery.append

方案二
前端模板方案 比如,腾讯的tmodjs

6.dom操作
精确的控制dom元素(id 选择器)

7.
首屏数据服务端输出(服务端渲染),配上懒加载一起
针对已经前后端分离的项目,我建议可以尝试使用Node.js针对页面进行直出,也是一个不错的选择,

8.webp格式的图片

时刻提醒自己 We Are Developer 不要太局限自己了

posted @ 2017-08-30 21:52  alan-alan  阅读(120)  评论(0编辑  收藏  举报