前端小计

一、浏览器内核

二、HTML文件的解析过程

1.资源分类（Chrome）

• kMainResource
• kImage
• kCSSStyleSheet
• kScript
• kFont
• …

2.安全策略检查

概念：

开发者通过配置，来告诉浏览器各类外部资源的加载和执行限制，来提高网页的安全性。

配置方式：

• 配置请求头
• 元素设置

3.资源优先级计算

默认优先级：

• html、css、font这三种类型的资源优先级最高
• 然后是preload资源、script、xhr
• 接着是图片、语音、视频
• 最低的是prefetch预读取的资源

根据一定的实际规则，对优先级进行调整。

• XHR优化，同步请求提到最高优先
• 可视区的img优先级提到high
• scirpt。使用了defer、async的降到Low；
• 按照优先级下载文件

三、前端优化

关键请求链

首屏（可视区）加载时，必须的请求

localStorage（LS）

使用storage缓存信息的方式。案例：

• 微信公众号：缓存JS文件。
• 天猫：利用LS来对关键的XHR异步请求进行缓存。
• 京东：利用LS来对非关键请求进行缓存。缓存首屏的内容。当首屏内容加载完毕后，动态添加非首屏内容到文档。

四、js放在头部时，如何避免出错

影响范围：

• 阻塞页面加载，会造成白屏
• 操作DOM节点时，报错，找不到节点

解决方式：

• 将script标签放到body的底部。
• 合并脚本
• 无阻塞脚本
  • defer属性，延时执行脚本。此时，只下载脚本。只有DOM加载完成后，即触发onload之前执行脚本。
  • async属性，延时执行脚本。异步加载脚本，脚本加载完成后，立即执行脚本。
  • 动态加载脚本。无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程

五、回流、重绘的概念描述，如何减少重绘、回流

概念：

回流
当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
重绘
当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

优化

浏览器优化机制

浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中。
如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。
但是，当你获取布局信息的操作的时候，会强制队列刷新。

编码优化：

CSS

• 避免使用table布局。
• 尽可能在DOM树的最末端改变class。
• 避免设置多层内联样式。
• 将动画效果应用到position属性为absolute或fixed的元素上。
• 避免使用CSS表达式（例如：calc()）。
  JavaScript
• 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
• 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
• 也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
• 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
• 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

六、DNS解析

域名www.google.com的解析过程
本地域名 > 根域名(.) > com域的顶级域名服务器(.com) > 第二层域(.google.com) > 子域(.www.google.com)

七、TCP的连接与断开

三次握手

四次挥手

cookie

cookie的属性：

attr	desc
name	一个cookie的名称。
value	一个cookie的值。
domain	可以访问此cookie的域名。
path	可以访问此cookie的页面路径。 比如domain是abc.com,path是/test，那么只有/test路径下的页面可以读取此cookie。
expires/Max-Age	此cookie超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置的话默认值是Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。
Size字段	此cookie大小。
http字段	cookie的httponly属性。若此属性为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie。
secure	字段 设置是否只能通过https来传递此条cookie

svg

动画的过渡处理

浏览器缓存

XSS

跨站脚本攻击
类型：

• 存储型
• 反射型
• DOM型

CSRF

跨站请求伪造

CORS

跨域资源共享

参考文档

浏览器页面资源加载过程与优化
JavaScript 的性能优化：加载和执行
浏览器的回流与重绘
渲染树构建、布局及绘制
前端经典面试题: 从输入URL到页面加载发生了什么？
从输入 URL 到页面加载完成的过程中都发生了什么事情？