注意:相对路径必须加 ./ 可以省略后缀名(.js) 相对路径中的./不能省略,否则报错,省略代表的是核心模块
在研究SEO优化的过程中,有网友问昝辉老师,关于网站JavaScript的使用和SEO注意事项,今天我们也一起学习学习。JS的SEO是很重要的问题,无论是异步调用内容,还是增加页面互动,现在的网站几乎无法避免使用JS脚本。但JavaScript使用不当的话可能会对SEO造成非常大的影响,JS造成SEO问题的症结在于,搜索引擎不一定执行JS脚本。
CommonJS模块的加载机制是,输入的是被输出的值的拷贝。也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。
最近测试了几个 ES module 和 Commonjs 的例子,理解了之前不太理解的概念,记录一下。要是想多了解的可以去看看阮老师的 Module 那部分。会贴一小部分的代码,不会贴所有验证的代码。
1.CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。2.CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
第4章 Node模块化及CommonJS规范 通过前面几个章节的学习, 我们基本掌握了NodeJS编程的基础知识, 但是我们也直观的发现了一个问题,和我们之前学习浏览器编程时JS, 差异还是很大的;
代码运行的性能优化需要用 Performance 工具记录某段时间的代码运行情况,分析出 long task,定位到耗时高的代码,针对性的优化它。
随着前端模块化的兴起,特别在 vue、react等一些热门框架的崛起,越来越多的公司加入了这一阵营。提及前端的模块化(这里主要说的是Javascript语言的模块化),就不得不说 es6标准提出的 export 和 import 两个命令了。当然还有 commonJS里的 module.exports 和 require 这一对组合了,这里暂不介绍这两组命令的具体用法。以后 我会专门写一篇文章介绍这两个命令的用法。我们以 es6中的 export 和 import 为例,介绍一下:
通过服务端渲染的概念以及它的两个特点:首屏加载速度快、SEO优化 我们知道,服务端渲染其实就是由浏览器做的一些事情,我们放到了服务端去做,那么对于掘金、简书、CSDN、知乎等网站的搭建,这种在网上一搜搜出一堆东西的网站,SEO做的很好,应该多少都用到服务端渲染了吧?当然,做服务端渲染成本是高昂的。 vue全家桶或者react全家桶,都是推荐通过服务端渲染来实现路由的。 服务端渲染并非完全之策(服务器稀少而宝贵),关于首屏渲染体验以及SEO的优化方案很多,在不使用服务端渲染这个操作下,我们最好的处理方式就是找寻替代优化方案。
模块是Node.js里面一个很基本也很重要的概念,各种原生类库是通过模块提供的,第三方库也是通过模块进行管理和引用的。本文会从基本的模块原理出发,到最后我们会利用这个原理,自己实现一个简单的模块加载机制,即自己实现一个require。
首先看一张访问TT猫首页的截图: 1.png 测试环境为谷歌浏览器,暂且不讨论其它浏览器,截图下方我们可以观察到以下参数: DOMContentLoaded:1.42s | Load:2.31s 以上
以上参数是在CTRL+F5下测试的,也就是说不存在浏览器本地缓存一说,DOM渲染时间为1.42s,整个页面load时间为2.31s。
渐进式 JavaScript 框架,一款用于构建 Web 界面,易学易用,性能出色且功能丰富的框架。
刚开始给项目接入 qiankun 的时候,时不时就会报 Application died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in xxx entry:
此时可以看到dist目录的文件图标由 W 变成了 A,说明此时的web项目已经变成了移动APP项目 ,而且此时生成了一个新的文件manifest.json
Node程序由许多个模块组成,每个模块就是一个文件。Node模块采用了CommonJS规范。
我所在团队是做toB业务的,技术栈是Vue,团队目前有十多个典型的toB业务(菜单+内容布局),这些业务都是服务于一个大平台的,因为历史原因,每个业务都是独立的,都有一个html入口,所以当用户在这个大平台上使用这十多个业务的时候,每当切换系统时,页面都会刷新,体验很差;在开发层面,这十多个业务又有太多共同之处,每次修改成本都很高。
事实上Emscripten的诞生早于WebAssembly,在WebAssembly标准出现前的很长一段时间内,Emscripten的编译目标是asm.js。自1.37.3起,Emscirpten才开始正式支持WebAssembly。
2、引入外部js文件:通过 src 引入,此时 script 标签内添加任何js代码都不起效果。
市面上播放器千千万,比如我们常见的有Video.js、hls.js、点播超级播放器等。其中点播超级播放器是基于 video.js 框架并结合腾讯云点播业务而开发的视频播放器,采用以 HTML5为主,Flash 为辅的播放方式,在浏览器不支持 HTML5的情况下采用 Flash 播放、PC端兼容很好。最近收到客户反馈,在接入使用Web超级播放器时,嵌入到对应页面时出现报错。接下来以腾讯云点播为例,来看下如何解决。
如果能使网页中的JavaScript代码隐密的加载、隐密的执行,那对于保护JavaScript代码来说是很有利的。
今天,我们接着讨论图片图片懒加载。这是前端性能优化中老生常谈的话题了。旨在提升页面初始化渲染性能和用户体验。
上一篇《前端科普系列(2):Node.js 换个角度看世界》,我们聊了 Node.js 相关的东西,Node.js 能在诞生后火到如此一塌糊涂,离不开它成熟的模块化实现,Node.js 的模块化是在 CommonJS 规范的基础上实现的。那 CommonJS 又是什么呢?
我们都知道在Android中是通过webView来加载html页面的,根据HTML文件所在的位置不同写法也不同:
vue项目打包后,在非首次线上替换dist文件时,某些手机/浏览器在之后首次打开页面,可能出现白屏情况。那么该问题产生原因是什么呢?我们又该如何应对呢?
作为前端开发,模块化我们已经耳熟能详,我们平时接触到的 ES6 的 import,nodejs中的require他们有啥区别?
用WordPress搭建的外贸网站通常都会安装几十个不同功能的插件,然后访问网站就会感觉速度比较慢,我们可以使用Asset CleanUp这款优化插件来帮忙让网站速度变得快一点。
看到github issue 分析,可以利用webpack externals解决这个问题。
我所在团队是做 toB 业务的,技术栈是 Vue,团队目前有十多个典型的 toB 业务(菜单+内容布局),这些业务都是服务于一个大平台的,因为历史原因,每个业务都是独立的,都有一个 html 入口,所以当用户在这个大平台上使用这十多个业务的时候,每当切换系统时,页面都会刷新,体验很差;在开发层面,这十多个业务又有太多共同之处,每次修改成本都很高。
声明项目的全局类型,同时不需要在各个Ts文件中import {XXX} from 'xxx' ,就能直接引用!方法是:
事情是这样的,在我看完w3c的介绍和很有说服力和教学力的demo后,本着实践出真知的思想决定上手一试,这一试不要紧~
介绍 首先,写给所有移动端开发的同学:PWA(Progressive Web Apps) 一定是将来的移动开发趋势,且学且珍惜。 Progressive Web Apps 比小程序还要方便,对于首次访问的用户可以直接在浏览器中进行访问,不需要安装应用。即使在比较糟糕的网络环境下,也能够快速地加载,且能够推送相关消息, 也可以像原生应用那样添加至桌面或浏览器主屏,能够有全屏浏览的体验。 PWA 和 Service Worker 是什么关系?Service Worker 是一个运行在浏览器后台进
这两天遇到一个新需求:一个一镜到底的h5动画。因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕。即处理预加载。
seajs遵循CMD规范,requirejs遵循AMD规范。AMD规范是预加载,CMD规范是赖加载。 下文举例假设有文件 b.js, c.js如下 //b.js define(function(require, exports, module){ console.log('b is loaded') function run(){ console.log('b run'); } exports.run = run; }) //c.js define(fun
前几天成功对接了跳转第三方小程序的功能,今天有个页面有需要对接。但是奇怪的是用的和上次一模一样的配置,但就是死活不显示wx-open-launch-weapp这个开放标签的按钮,看不到任何效果(这个问题真的是让人欲哭无泪,相同的代码不同的页面就不显示了),下面就说说我的排查解决过程。
微信小程序在创建初期会给一个获取用户信息的示例代码,我们今天就来解析一下小程序全局app.js运行方式及用户数据存储建议。
前端的同学如果用 window.onerror 事件做过监控,应该知道,跨域的脚本会给出 "Script Error." 提示,拿不到具体的错误信息和堆栈信息。
小程序一般需要用token,去识别用户身份,每次获取到token之后,再进行下一步操作。再获取到token之后,将token同步缓存 app.js:
之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的。
loading也是通过hidden属性控制显示,这样使用起来并没有js.alert方便。要在每个页面里定义一下,还要控制显示的文本。
在爬虫中,我们在爬取某些网页时,需要的数据中有时间日期,静态的网页直接就可以爬取,但碰到动态加载的对应的时间可能就是 js 代码生成的,直接爬取得不到。小编给大家带来了两个例子来爬取对应的时间日期。
window.onload 、$(function()function())、;(function(){}());三个的执行顺序:
最近做的项目大量用到了 webview ,用网页来布局。 Android 的 webview 是基于 webkit 内核,不过他的运行效果和 firefox 上一模一样,所以写的时候都是先用 firefox 测试,测试 OK 了再放到程序里面看效果,基本上不会有什么问题。其实 android 的 webview 跟 iphone 的 webview 差不多, iphone 上的 webview 比 android 上的强大多了。
Next.js是一个构建于Node.js之上的开源Web开发框架,支持基于React的Web应用程序功能,例如服务端渲染和生成静态网站。 React于官方文件内的“推荐的工具链”中提及Next.js,建议将其作为“使用Node.js构建服务器渲染网站”的解决方案。
领取专属 10元无门槛券
手把手带您无忧上云