懒加载

阅读更多关于懒加载

懒加载: 一般也叫做延迟加载。比如资源的分步获取。先获取一级资源，在根据一级资源参数获取特定二级资源。实现方式: 1.setTimeout() 2.分步获取 3.条件加载，符合条件才加载意思: 缓解了服务器压力。 hibernate中的懒加载。 session.load() 获取到的是一个代理类，只有在真正使用的时候才回去加载对象。如果仅仅只是执行了查询语句，没有任何的修改访问操作，实际上最后的事务提交时Hibernate是没有进行数据库查询的。 session.get() 获取到的则是数据库中的真实对象。来源： oschina 链接： https://my.oschina.net/u/2626223/blog/1809349

实践中的电商前端优化

阅读更多关于实践中的电商前端优化

前端优化已经是一个被写烂的题材了。虽千万人吾往矣，这里我仅分享我的一些实践经验。欢迎一起交流欢迎关注我的个人公众号，不定期更新自己的工作心得。正文如下前端性能 1. 模块化严格来说，代码模块化并不能带来性能上的提升，但我还是将模块化提出来，因为它真的很重要，重要到几乎所有的优化都与它息息相关。常见的模块化方案有：AMD、CMD、UMD、ES6 如何选择？团队习惯个人偏好业务需要我靠！你怎么能把业务需要放在最后一个考虑？因为没有哪一块业务会因为使用了不同的模块化方案而产生不同的结果。而且我觉得软件开发中的以人为本用在这里刚好合适，其他地方就只能呵呵了。毕竟业务高于一切，这是操守。 2. 缓存缓存一定要加！缓存一定要加！缓存一定要加！因为CDN真的很贵。。。没有CDN？那就更得加缓存了！！！缓存有很多方式，最为常见的就是下面这两种了浏览器304缓存 localstorage本地存储业界，一直有关于304缓存与localstorage性能的争议，这里我们不讨论两者的差异，或性能问题。我一向以业务导向选择方案，这里我选择的是localstorage，如果你愿意，你可以通过localstorage将缓存玩出一朵花出来。你可以这么干：通过localstorage存储js、css资源；资源版本控制；只要你愿意

Vue项目页面跳转时，窗口上方显示进度条

阅读更多关于 Vue项目页面跳转时，窗口上方显示进度条

在vue项目中，为了减少首屏加载的时间，通常会开启路由的懒加载。路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间。然而，路由懒加载会使得我们在第一次打开一个新页面的时候，会有一个加载时间。如果在这个时候我们没有一个提示的话，给人的感觉会是好像我点了页面跳转但是没反应。所以，这个时候我们可以加一个进度条来告知用户。具体实现，我们使用NProgress这个滚动条效果插件。 1.安装： cnpm install --save nprogress 2.在main.js中引入： 1 import NProgress from 'nprogress' 2 import 'nprogress/nprogress.css' 3.在main.js中进行配置： 1 NProgress.configure({ 2 easing: 'ease', // 动画方式 3 speed: 500, // 递增进度条的速度 4 showSpinner: false, // 是否显示加载ico 5 trickleSpeed: 200, // 自动递增间隔 6 minimum: 0.3 // 初始化时的最小百分比 7 }) 4.在main.js中对路由钩子进行设置： //当路由进入前 router.beforeEach((to, from , next) => { // 每次切换页面时，调用进度条

vue路由懒加载的几种方式

阅读更多关于 vue路由懒加载的几种方式

基础写法，没有懒加载，打包分离代码 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] }) 路由懒加载，ES6的import()方法。（按需加载）这个是最常用的 import Vue from 'vue' import Router from 'vue-router' const HelloWorld = () => import('@/components/HelloWorld') Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld　　　　//或者　　　component: () => import("@/components/HelloWorld") } ] }) vue的异步组件，require()方法。（按需加载） import

懒加载vs预加载

阅读更多关于懒加载vs预加载

一、懒加载 1.什么是懒加载懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。 2.为什么要用懒加载能提升用户的体验，不妨设想下，用户打开像手机淘宝长页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长，用户难免会心生抱怨，这就严重影响用户体验。减少无效资源的加载，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用。 3.懒加载的原理首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中，当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。 4.懒加载实现步骤 <html lang="en"> <head> <meta charset="UTF-8"> <title>Lazyload</title> <style> .image-item {

Hibernate----面试题

阅读更多关于 Hibernate----面试题

什么是 Hibernate？ hibernate是一个基于ORM持久框架,可以让程序员以面向对象的思想操作数据库,提高生产效率. 什么是 ORM？ orm不过是一种思想，对象关系映射。是对象关系模型，如hibernate,让你以面向对象的方式去编程。封装了JDBC. 说一下 orm与jdbc的区别？ jdbc只是一个java操作数据库的规范接口而已 orm不过是一种思想，对象关系映射。 ORM：是对象关系模型，如hibernate,让你以面向对象的方式去编程。封装了JDBC. JDBC：是从底层访问数据库服务器。一般银行，金融行业为了安全起见，直接用JDBC访问 Hibernate中get和load有什么不同之处? load ：找不到数据的话会抛出org.hibernate.ObjectNotFoundException异常。此时hibernate会使用延迟加载加载机制 get找不到的话会返回null。如果查询不到数据， get 会返回 null,但是不会报错, load 如果查询不到数据，则报错ObjectNotFoundException 使用 get 去查询数据，(先到一级/二级)会立即向db发出查询请求(select ...), 如果你使用的是 load查询数据，(先到一级、二级))即使查询到对象，返回的是一个代理对象,如果后面没有使用查询结果

vue-router实现路由懒加载

阅读更多关于 vue-router实现路由懒加载

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载. 1、定义　　也叫延迟加载，即在需要的时候进行加载，随用随载 2、为什么需要　　像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时，进入首页不用一次加载过多资源造成用时过长。 3、如何实现？（1）第一种写法：使用 AMD 风格的 require，于是就更简单了：例：const Foo = resolve => require(['./Foo.vue'], resolve) const routers = [ { path: '/', name: 'index', component: (resolve) => require(['./views/index.vue'], resolve) } ] （2）第二种写法：(使用import) 例：component: ()

Android之Fragment

阅读更多关于 Android之Fragment

某厂面试归来，发现自己落伍了！>>> Fragment（碎片）概括： Fragment是依赖于Activity的，不能独立存在的。一个Activity里可以有多个Fragment。一个Fragment可以被多个Activity重用。 Fragment有自己的生命周期，并能接收输入事件。我们能在Activity运行时动态地添加或删除Fragment。优势：模块化（Modularity）：我们不必把所有代码全部写在Activity中，而是把代码写在各自的Fragment中。可重用（Reusability）：多个Activity可以重用一个Fragment。可适配（Adaptability）：根据硬件的屏幕尺寸、屏幕方向，能够方便地实现不同的布局，这样用户体验更好。核心类： Fragment：Fragment的基类，任何创建的Fragment都需要继承该类。 FragmentManager：管理和维护Fragment。他是抽象类，具体的实现类是FragmentManagerImpl。 FragmentTransaction：对Fragment的添加、删除等操作都需要通过事务方式进行。他是抽象类，具体的实现类是BackStackRecord。 Nested Fragment（Fragment内部嵌套Fragment的能力）是Android 4.2提出的，support

Vue图片懒加载插件

阅读更多关于 Vue图片懒加载插件

图片懒加载是一个很常用的功能，特别是一些电商平台，这对性能优化至关重要。今天就用vue来实现一个图片懒加载的插件。这篇博客采用“三步走”战略——Vue.use()、Vue.direction、Vue图片懒加载插件实现，逐步实现一个Vue的图片懒加载插件。 Vue.use() 就像开发jQuery插件要用$.fn.extent()一样，开发Vue插件我们要用Vue.use()。其实就是官方内部实现的一个方法，供广大开发者灵活开发属于自己的插件。只需要按照约定好的规则开发就行。用法安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。该方法需要在调用 new Vue() 之前被调用。当 install 方法被同一个插件多次调用，插件将只会被安装一次。注：install方法或者被当做install方法的方法它的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。参考链接： https://cn.vuejs.org/v2/api/#Vue-use https://segmentfault.com/a/1190000012296163 Vue.direction自定义指令用法 ——全局注册和局部注册全局注册 //

#千峰逆战班，拼搏永向前#

阅读更多关于 #千峰逆战班，拼搏永向前#

总结一波： 1,JDBC引入解耦方式工厂模式将编译器依赖变为运行时依赖配置文件 2,传统三层结构面临的问题 new 关键字的使用 3,自定义Spring容器将对象创建交给Spring容器进行管理 Spring容器:反射+xml解析+工厂模式 ①,需要将要创建的对象的信息保存到xml配置文件中配置一个bean标签就对应有一个对象 ②,在自定义Spring容器初始化的时候,将xml文件解析将解析到的对象信息保存到map集合中 ③,根据这些保存的信息使用反射创建对象, ④,提供一个方法对外提供这些对象 4,自定义Spring容器优化版 ①,需要将要创建的对象的信息保存到xml配置文件中 ②,在自定义Spring容器初始化的时候,将xml文件解析 ③,根据解析到信息创建对象,并把对象保存到map集合 ④,提供一个方法对外提供这些对象 5,自定义Spring容器的使用初始化spring容器 getBean 6,IoC控制反转资源的控制权反转了!!! 没有使用Spring容器之前,资源的控制权在java程序手上使用spring容器之后,资源的控制权到spring容器手上了!! 单例模式 ①,私有化构造方法 ②,声明本类对象,并使用private static修饰 ③,提供一个对外访问方法重点： 7,饿汉单例设计模式 11111 效率高浪费内存不支持懒加载线程安全

订阅懒加载