ES6 babel 转码
生产环境应直接使用 babel 已经转换好的代码，而不是引用 babel 实时转码。
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// ES6 代码
</script>根据不同类型客户端加载不同的图片
<picture>
<source srcset="img.jpg" media="max-width:750px" /> // 手机显示
<source srcset="img-large.jpg" /> // 电脑显示
<img src="img.jpg" /> // 不支持 picture 元素的设备
</picture>@media screen and (max-width: 750px) { // 手机
.img {
background: url(img.jpg) center center contain;
}
}
@media screen and (min-width: 750px) { // 电脑
.img {
background: url(img-large.jpg) center center contain;
}
}图片压缩和懒加载，使用字体图标
<img data-src="img.jpg" alt="img">
<img data-src="img-large.jpg" alt="img">let imgs = document.querySelect("img");
imgs.forEach(function(img) {
img.src = img.dataset.src;
})阿里云 iconfont：链接
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}<i class="iconfont">3</i>使用 webpack 将 js、css 压缩打包合并，将小图片转换成 base64
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: [/node_modules/, __dirname + "app/js/lib"],
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
]
},使用服务端渲染
从服务端直接返回最终呈现给用户的 html 文件，而不用返回 html 和 js，在浏览器里处理后显示给用户。
vue 服务端渲染
预加载和缓存
// 当页面完全加载后，开始预加载
window.onload = function () {
setTimeout(function () {
// 获取 html head 对象
var head = document.getElementsByTagName('head')[0];
// 创建 css
var css = document.createElement('link');
css.type = "text/css";
css.rel = "stylesheet";
css.href = "http://domain.tld/preload.css";
// 创建 js
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "http://domain.tld/preload.js";
// 预加载 js 和 css
head.appendChild(css);
head.appendChild(js);
// 预加载图片
new Image().src = "http://domain.tld/preload.png";
}, 1000);
}; 使用 manifest 离线缓存：
<html lang="zh-CN" manifest="product.appcache">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
...
</body>
</html>product.appcache
# 第一次加载后会被缓存的内容
CACHE MANIFEST
# 2020-04-02 v1.0.0
/index.css
/reset.css
/logo.png
/main.js
# 不缓存的内容
NETWORK:
/usr/login
# 无法访问时跳转的页面
FALLBACK:
/m/ /404.html防止 js 阻塞
js 应放到最后面引入，或者使用异步引入。在 js 脚本中，应该防止因为 js 代码执行等待而导致页面处于不可操作状态。比如 jquery 的 ajax 不要把 async 参数设置为 false，对于需要一定时间处理的 js 代码应该使用回调方式异步执行。
使用 X-UA-Compatible 和 renderer 申明来兼容不同浏览器
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。