Skip to main content

积累的问题

2009 年一直工作到现在开发和日常学习中能想起来的并且已经解决的 HTML 中积累的问题， 已经被淘汰或者不值得一提的例如 frame，table 就不会再提起了

DOM 优化​

  • 减少 DOM

    • 可以使用伪元素，阴影实现的内容尽量不使用 DOM 实现，如清除浮动、样式实现等；
    • 按需加载，减少不必要的渲染；
    • 结构合理，语义化标签；

  • 大量 DOM 的优化

    • 缓存 DOM
    • createDocumentFragment()

  • innerHTML 代替 appendChild

  • requestAnimationFrame

  • 虚拟 DOM

defer 和 async​

  • defer：浏览器指示脚本在⽂档被解析后执⾏，script 被异步加载后并不会⽴刻执⾏，⽽是等待⽂档被解析完毕后执⾏。
  • async：同样是异步加载脚本，区别是脚本加载完毕后⽴即执⾏，这导致 async 属性下的脚本是乱序的，对于 script 有先后依赖关系的情况，并不适⽤。
webpack.config.js
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: "./dist",
    filename: "[name].js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      scriptLoading: "defer",
    }),
  ],
};

meta viewport​

<!DOCTYPE html>
<!--H5标准声明，使⽤ HTML5 doctype，不区分⼤⼩写-->

<!--标准的 lang 属性写法-->
<head lang="en">
  <!--声明⽂档使⽤的字符编码-->
  <meta charset="utf-8" />
  <!--优先使IE-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <!--⻚⾯描述-->
  <meta name="description" content="不超过150个字符" />
  <!-- ⻚⾯关键词-->
  <meta name="keywords" content="" />
  <!--⽹⻚作者-->
  <meta name="author" content="name, email@gmail.com" />
  <!--搜索引擎抓取-->
  <meta name="robots" content="index,follow" />
  <!--iOS 设备 begin-->
  <meta name="apple-mobile-web-app-title" content="”标题”" />
  <!--添加到主屏后的标是否启⽤ WebApp 全屏模式，删除苹果默认的⼯具栏和菜单栏-->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <!--添加智能 App ⼴告条 Smart App Banner（iOS 6+ Safari）-->
  <meta
    name="”apple-itunes-app”"
    content="app-id=myAppStoreID,"
    affiliate-data=""
  />
  <!--设置苹果-->
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telphone" ="no," email="no" />
  <!-- 启⽤360浏览器的极速模式(webkit)-->
  <meta name="renderer" content="webkit" />
  <!--避免IE使⽤兼容模-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!--不让百度转码-->
  <meta http-equiv="Cache-Control" content="no-siteapp" />

  <meta name="”HandheldFriendly”" content="true" />
  <!--针对⼿持设备优化，主要是针微软的⽼式浏览器-->
  <meta name="MobileOptimized" content="320" />

  <meta name="screen-orientation" content="portrait" />
  <!--uc强制竖屏-->

  <meta name="x5-orientation" content="portrait" />
  <!--QQ强制竖屏-->

  <meta name="full-screen" content="yes" />
  <!--UC强制全屏-->

  <meta name="x5-fullscreen" content="true" />
  <!--QQ强制全屏-->

  <meta name="browsermode" content="application" />
  <!--UC应⽤模式-->

  <meta name="x5-page-mode" content="app" />
  <!-- QQ应⽤模式-->

  <meta name="msapplication-tap-highlight" content="no" />
  <!--windows phone设置⻚⾯不缓存-->

  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
</head>