前端优化方案

Posted 2020-10-04 alan-alan

前端优化：


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 不要太局限自己了