1.DOCTYPE作用
- 设置文档模式
- 指定后会以标准模式
- 不存在或格式不正确会导致文档以兼容模式呈现
- html5开始不再基于SGML，无需引用DTD
兼容模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作
标准模式：渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行
SGML：是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源
XML：可扩展标记语言。标签可以自己创建且数量无限多
HTML：超文本标记语言。标签都是固定的而且数量有限
XHTML：html严格版。标签必须用小写且闭合
DTD（Document Type Definition）：文档定义类型，定义XML或HTML的特定版本中所有允许元素及它们的属性和层次关系的定义
2.link & @import
| 区别 | link | @import |
|---|---|---|
| 从属关系 | html标签，可引用icon、css、tag等 | css语法，只能导入css |
| 加载顺序 | 引入同时加载 | 页面加载完毕后加载 |
| 兼容性 | HTML元素，全部兼容 | CSS2.1加入的语法，IE5+支持 |
| 可控性 | 支持js操作dom修改link标签 | 不支持操作 |
3.浏览器内核
（1）浏览器可分为两个部分，shell和内核。
- shell 是指浏览器的外壳：例如菜单，工具栏等。主要是提供 给用户界面操作，参数设置等等。它是调用内核来实现各种功能的
- 内核是浏览器的核心。是基于标记语言显示内容的程序或模块。
（2）浏览器内核主要分为两个部分，渲染引擎和js核心
- 渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。可以显示html、xml、图片等数据，也可以借助插件渲染pdf等格式
- JS引擎：解析和执行 javascript 来实现网页的动态效果
（3）常见内核
- Trident : IE浏览器
- Gecko： Firefox 和 Flock
- Presto：Opera-v 15之前的版本
- Webkit：Safari 和 Chrome-v 28之前的内核
- Blink：Chrome28+ 和 Opera15+
4.浏览器渲染原理
- 解析文档，构建一棵由DOM元素及属性节点组成的DOM树
- 对CSS进行解析，行程CSSOM规则树
- 根据DOM树和CSSOM规则树构建渲染树。渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种 对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。
- 渲染对象被加入到树中没有位置和大小，所以浏览器生成渲染树后会根据渲染树来进行布局（也叫回流）
- 布局结束后，遍历渲染树并调用渲染对象的paint方法将他们的内容显示在屏幕上，绘制使用的UI基础组件。因为绘制是逐步完成，所以渲染引擎将尽可能早的将内容呈现到屏幕上。解析完成一部分就渲染一部分，同时可能还再通过网络下载其它内容。
一般来说样式表不会改变dom树，所以文档解析无需等待CSSOM的解析完成。但是可能出现JS脚本请求样式信息失败。所以浏览器在CSSOM未完成时想运行脚本会延迟JS脚本的执行和文档的解析。
5.JS文件渲染
（1）渲染流程
JS的加载、解析与执行会阻塞文档的加载。构建DOM时若HTML解析器遇到了JS，就会暂停文档解析，将控制权移交给JS引擎，等JS执行完毕，浏览器在从中断的地方继续解析文档。
想优化首屏渲染时间，应该把script标签放在body标签的底部，或者是给script标签添加defer或者async属性
（2）async、defer使用对比
- 没有defer或者async，浏览器会立即加载并执行指定的脚本（遇到就加载并执行）
- defer会造成js脚本延迟执行。即js加载时HTML不停止解析，这两个过程并行进行。在document解析完毕后再执行脚本文件，多个脚本按顺序执行。
- async 异步执行引入的JS。加载阶段不会造成文档的阻塞，加载完成后会立即执行，执行阶段还是会造成文档解析的阻塞。（多个脚本的执行顺序将无法保证）
（3）文档预解析
与js的预解析无关。
预解析：当执行 JavaScript脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。Webkit 和 Firefox 都做了这个优化。
文档预解析也可能失败，比如在js中document.write() 或者 document.createElement()改变了dom结构，document就需要去重新做一次解析。
6.白屏与FOUC
白屏
- css放在html尾部，由于css未加载完成浏览器延迟渲染会导致白屏（Chrome）
- js放在html头部，js脚本加载阻塞了后边文档内容的解析会导致白屏
FOUC （flash of unstyled content）
主要指样式闪烁问题。在css加载完成之前先呈现了html，（Firefox）会导致展示出无样式的内容。主要导致该问题的原因为css加载实践过长或css放在了文档底部。
7.浏览器渲染过程优化
为尽快完成首次渲染，我们需要最大限度减小以下三种可变因素
- 关键资源的数量。
- 关键路径长度。
- 关键字节的数量。
常规优化方案
- 资源数、字节数、长度分析
- 减少资源数量（删除或是延迟下载，标记为异步）
- 优化关键字节数缩短下载时间
- 优化关键资源加载顺序
8.重绘与回流
重绘
当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而 不会影响布局的操作，比如 background color，我们将这样的操作称为重绘。
回流
当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流。
- 任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。
- 回流必定会发生重绘，重绘不一定会引发回流。
减少回流
- 使用 transform 替代 top
- 不要再循环中修改修改节点属性
- 慎用table布局（一个小改动就会引起table重新布局）
- dom离线后修改
- 不要一条一条的修改dom（可以与先定义一个css的class，最后修改dom的className）
9.H5新增
- 绘画 canvas
- 用于媒介回放的 video 和 audio 元素
- 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
- sessionStorage 的数据在浏览器关闭后自动删除
- 语意化更好的内容元素，比如 article、footer、header、nav、section;
- 表单控件，calendar、date、time、email、url、search
- 新的技术 webworker, websocket
- 新的文档属性 document.visibilityState
- 纯表现的元素：basefont，big，center，font, strike，tt，u;
- 对可用性产生负面影响的元素：frame，frameset，noframes
10.SEO优化
- title、description、keywords 这三项的权重应逐个减小
- 使用语义化标签
- 重要内容放在前边，爬虫不会爬取js的内容
- 非装饰性的图片需加alt
- 提高网站速度
11.离线缓存
HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
使用离线缓存
-
创建一个和 html 同名的 manifest 文件，然后在页面头部像下面一样加入一个 manifest 的属性。
<html lang="en" manifest="index.manifest"> -
在如下 cache.manifest 文件的编写离线存储的资源。
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
//offline.html
- CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线 存储，所以不需要把页面自身也列出来。
- NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离 线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一 个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
- FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上 面 这 个 文 件 表 示 的 就 是 如 果 访 问 根 目 录 下 任 何 一 个 资 源 失 败 了 ， 那 么 就 去 访 问 offline.html 。
- 在离线状态时，操作 window.applicationCache 进行离线缓存的操作
12.iframe缺点
- 阻塞主页面的 onload 事件（window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发）
- 搜索引擎无法解读iframe
- 浏览器的后退按钮失效
- 小型设备无法显示完全
13.Page Visibility API
可用于判断页面是否可见，若不可见可以做暂停轮询、暂停动画、音频视频播放暂停等优化。
- document.visibilitychange
- hidden 页面彻底不可见
- visible 页面一部分不可见
- prerender 页面即将或正在渲染，处于不可见状态
14.浏览器架构
- 用户界面
- 主进程
- 内核
- 渲染引擎
- JS 引擎
- 执行栈
- 事件触发线程
- 消息队列
- 微任务
- 宏任务
- 消息队列
- 网络异步线程
- 定时器线程
15.常见mate标签
<head lang=”en”>标准的 lang 属性写法<meta charset=’utf-8′>声明文档使用的字符编码- 优先使用 IE 最新版 本和 Chrome
<meta name=”description” content=”不超过 150 个字符”/>页面描述<meta name=”keywords” content=””/>页面关键词<meta name=”author” content=”name, email@gmail.com”/>网页作者<meta name=”robots” content=”index,follow”/>搜索引擎抓取<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”>移动设备配置 viewport<meta name=”apple-mobile-web-app-title” content=”标题”>iOS 设备 begin- ` 添加到主屏后的标题（iOS 6 新增） 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/><meta name=”format-detection” content=”telphone=no, email=no”/>设置苹果工具栏颜色<meta name=”renderer” content=”webkit”>启用 360 浏览器的极速模式(webkit) <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>` 避免 IE 使用兼容模式<meta http-equiv=”Cache-Control” content=”no-siteapp” />不让百度转码<meta name=”HandheldFriendly” content=”true”>针对手持设备优化，主要是针对一些 老的不识别 viewport 的浏览器，比如黑莓<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”>不使用缓存- ``` 设置缓存过期时间（0表示立即过期）
扫一扫
496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
