使用localstorage及js模版引擎 开发 m站设想

目前 m站开发的方式,依然请求完整的html,这样造成的问题就是每次请求的数据量过大过多,在没有wifi的情况下,导致页面打开的速度很慢,耗费的流量也较多;访问m站的多是移动端设备,其浏览器的版本都较高,所以其html5属性localstorage支持性也较好,并且m站页面较为简单,结构性较好,如果使用localstorage+js解析模版+json数据的方式来实现m的结构,其访问速度应该会大幅度提升。

具体实现方式如下:

1.把页面的html节点存储在localstorage中,因为m站结构简单,主要分的页面基本上就首页/频道页面/分类页面/搜索结果页面/产品详情页面/预订页面,并且页面本身也较为简单,所以整体的数据量不会大

2.访问页面时,后台推送json数据过来,然后使用js模版解析工具把json 与 localstorage中的数据拼装整合,填充在页面中

如果使用这种方式实现,访问页面时,返回的数据量就会很少,只有一个json对象。

优点:返回的数据量少,页面打开的速度块

缺点:不利于页面的seo

时间: 2024-08-28 21:47:53

使用localstorage及js模版引擎 开发 m站设想的相关文章

js模版引擎开发实战以及对eval函数的改进

简介 前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用,同时也算是之前学习的知识的一种总结吧! 首先我们先了解一下模版引擎的工作原理吧! 1. 模版引擎其实就是将指定标签的内容根据固定规则,解析为可执行语句字符串: 2. 执行可执行解析后的语句字符串,即生成我们想要的页面结构. 具体实现方法: 1. 最终效果 1 /* 解析前 2 <ul> 3 {{for(var i = 0; i < data.todos.length; ++i)}} 4 {{if(data.to

js模版引擎handlebars.js实用教程

一.为什么选择Handlebars.js 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是:根据页面需要的信息,构造出一个实体,这个实体中包含了界面需要的所有属性,通常这个实体是由N个表中的字段构成的,俗称vo.由于vo的属性可以是String.List.Map等等等,又可以vo套vo,因此这种方式非常灵活,也非常好用. 在后台对vo进行赋值,通过strut

前后端数据交互处理基于原生JS模板引擎开发

json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那里断点,观察是否有错误. <!DOCTYPE html> <html> <head> <title>前后端数据交互处理原生JS模板引擎开发</title> <meta charset ='utf-8'> <script type=&

如何在前端模版引擎开发中避免使用eval函数

前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用.于是根据自己对模版引擎的理解,定义自己的模版格式,然后,根据自己定义的格式,编写处理函数,将模版标签中的字符串,解析成可执行的字符串,然后再用eval函数执行该可执行的字符串. 然后问题就出现了!eval等价于evil! 为什么呢?各大js权威书籍上都不提倡使用eval.下面我详细的解释一下为什么不提倡. 首先,大家需要知道,js并不是一门解释型语言.它和其他大家熟知的编程语言(c,java,c++)一样,是编译型语言.但是

js模版引擎—nodetpl

这个是公司内部使用的一个模版引擎,主要应用在pc. 根据模版,返回一个js文件.大概是这个样子的js. (function(N, undefined){ var PATH = 'http://core.pc.lietou-static.com/tpls/common/plugins/localdata/city.js'; if(!N || !N._tpls) return false; N._tpls[PATH] = N._tpls[PATH] ||{......}; })(window.Nod

handlebars.js模版引擎随记

前台的模版引擎有许多种,相比较而言 我个人更觉得handlebars更为轻便 首先github上下载自新版本的handelbars.js http://handlebarsjs.com 下载下来之后呢 我们需要在页面引入js 1 <script type="text/javascript" src="script/jquery.js"></script> 2 <script type="text/javascript"

webpack4 使用pug模版引擎开发

项目地址 why 前几天有一个同事拿了几张html的文件问我怎么把公共的头部提取出来进行样式修改,我没有办法,也没查出该怎么解决,然后就思考. 怎么样才能实现多个页面共用相同的html代码呢? 于是有了这篇文章. 初始化 npm init -y 安装webpack npm install webpack webpack-cli --save-dev 安装pug-html-loader html-loader npm install pug-html-loader html-loader --sa

为什么要使用JS模板引擎

我之前在写一个输入联想控件的时候,改过好几个版本,每个版本不是因为性能不好就是因为代码凌乱而被推翻,最后用了understore模板引擎,效果有明显改善.整好这两天在研究互联网技术架构,发现很多的开发框架前端都是使用js模板引擎,感悟真的是大道至简,殊途同归啊,哈哈. 关于为什么使用js模板引擎,在博客园发现园友的一片文章<js模版引擎handlebars.js实用教程——为什么选择Handlebars.js>,该文已经做了详细解答.下面内容转自该文: 据小菜了解,对于java开发,涉及到页面

Springboot 系列(五)Spring Boot web 开发之静态资源和模版引擎

前言 Spring Boot 天生的适合 web 应用开发,它可以快速的嵌入 Tomcat, Jetty 或 Netty 用于包含一个 HTTP 服务器.且开发十分简单,只需要引入 web 开发所需的包,然后编写业务代码即可. 自动配置原理? 在进行 web 开发之前让我再来回顾一下自动配置,可以参考系列文章第三篇.Spring Boot 为 Spring MVC 提供了自动配置,添加了如下的功能: 视图解析的支持. 静态资源映射,WebJars 的支持. 转换器 Converter 的支持.