浏览器端-服务器端-网络、兼容、内核、优化

从url到页面呈现中间发生了什么？

用户访问网页，进行DNS域名解析（找到对应的ip地址）
请求TCP连接
发送HTTP请求
HTTP响应，服务器处理请求并返回数据
生成Render Tree并进行页面渲染（1，浏览器会解析 HTML 成树形的数据结构DOM，生成 DOM Tree 2，下载CSS，并应用在DOM树上,生成CSS Rule Tree 3, DOM Tree和CSS Rule Tree生成Render Tree 4，浏览器下载js并解析）

浏览器内核

webkit

使用webkit内核的浏览器
chrome
Safari
搜狗 (双核)所有网页由webkit内核处理,只有银行网站用IE内核。
遨游浏览器3
QQ浏览器
360极速浏览器
世界之窗浏览器
阿里云浏览器
Nokia S60平台的默认浏览器
Apple手机的默认浏览器
Android手机的默认浏览器。

Trident(IE)

Gecko(firefox)

网页优化

怎么进行页面渲染的优化：
1，将css文件的引入放在头部。（我们本可以将css文件的引入或内联放在底部，这样会使页面加载的速度更快，但这对用户体验十分不友好，就像一些低级过时的网站那样，当css文件被放到了底部，页面加载时会先将内容展现出来，最后执行到css时，浏览器才对DOM使用样式，如果时间较短的话，这样的行为叫做：无样式之闪烁。）（还有的情况就是，上下都有css文件，当浏览器解析上面的css时就已经生成了样式，但执行到后面的css文件时，浏览器会再执行一遍，这样的行为叫做：重绘（样式改变）和回流（布局发生了变化）。（一般是两个都有，因为有的只改变样式，有的布局发生了变化，有的两个都变化。）
2，写出高效的css代码（避免使用通配符；多用class 和 id 选择符，少用标签选择符；不要把id和class或是将标签和class 连着写；尽量避免用后代选择符，去除不必要的祖先元素，使用 class来替换后代选择符。），同时避免使用css表达式（不推荐使用，会严重影响页面性能）。
3，合并多个css 文件。（减少http的请求个数，减少服务器端的压力。）
3，指定页面图片的尺寸（现在新版的百度图片不再使用以前不固定的图片尺寸，而是同意了大小，大概是这个原因做的优化，以前做瀑布流的时候还不理解。）
4，页面头部标明文档编码。（html文档是以包含文档编码信息的数据流方式在网络中传输的。编码信息一般存放在http响应的头部或是html标记中。客户端浏览器只有只有确定了正确的文档编码才能正确渲染页面。大部分的浏览器都会缓冲一定字节的数据，从中查找编码信息，不同的浏览器当中预缓冲的字节数是不一样的。如果浏览器接收到了设定的预缓冲数据量后，还没有找到页面的编码信息，就会用自己的默认编码渲染页面，直到接受到了正确的编码，那时候就会重新渲染，甚至重新获取数据。）
5，使用外部引入的js文件。（使用浏览器缓存，减少http请求。）
6，将script脚本或外部引入放在底部。「这里有一个问题：js可能会修改DOM, 因此在js完成前，资源下载可能是没有必要的，这也是js阻塞资源的根本原因。例如：document.write().人们对此的解决办法是将外部引用的js文件放到前面。 」（值得注意的是，不论是外部引入还是内联，只要遇到script,页面解析就会中断，去解析js,使得整个页面处在等待的状态中，当js资源加载并解析完成后，才会继续执行html的渲染线程。（这是因为大部分浏览器都是使用的是单进程来处理js文件的。）而当遇到css外部文件，或是html中图片资源加载时，都会进行异步处理。 ）

网络请求的性能优化：

1， 静态资源的压缩合并（webpack构建工具）。
2 ，Gzip压缩原理。使用Gzip压缩js css文件。
3， 静态资源缓存。
4 ，前端图片的选型。
5， 使用SSR后端渲染，数据直接输出到html中。（例如react的renderTostring）。
6，懒加载，需要的时候再加载。
7，减少DOM查询，对DOM查询做缓存；减少DOM操作，多个操作尽量合并到一起。
8，进行防抖和事件节流。
9， 尽早执行操作。
10， 减少http请求。减少http请求次数：本地存储技术：浏览器存储，离线缓存。
11， 使用CDN（内容分发机制）的地址，替换.js库文件地址。

服务端推送的优劣及解决方案

1、Ajax 轮询
利用 XHR，通过 setInterval 定时向后端发送请求
1、优点：实现简单
2、缺点：数据同步不及时，增加后端处理压力
3、场景：适用于对消息及时性要求不高且服务器资源充足的开发

2、Ajax 长轮询
在 Ajax 轮询的基础上做的改进，在后端数据没有更新的时不再返回空响应，而且后端一直保存连接，直到后端有数据变化，则相应请求并且关闭连接，前端收到数据后，再次向后端发起请求，并处理刚刚收到的数据
1、优点：通信及时，服务端资源消耗低
2、缺点：请求交替时消息会延迟
3、场景：扫码登录

3、WebSocket
WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议，允许服务端主动向客户端发送数据，浏览器和服务器只需要完成一次握手，就可以创建持久性的连接，并进行双向数据传输
1、优点：通信及时，采用双工的通信模式
2、缺点：服务端资源消耗高
3、场景：对及时性要求高，如股票系统

存储技术

浏览器端：cookie
webStorage(localStorage sessionStorage)
userData
indexedDB
服务器端：seesion
区别：
cookie和webStorage的区别
cookie有大小限制，每次请求页面都会发送cookie(http请求)，会浪费带宽，而且cookie不能跨域。但是cookie不仅仅是用来存储，他是http规范的一部分，是用来与服务器进行交互的。cookie要提前设置一个过期时间。flash cookie可以跨域。
webStorage分为localStorage sessionStorage，sessionStorage是会话级数据储存，会话结束后数据销毁。localStorage 是长期本地储存的，数据被删除后才会消失。

跨域

利用跨域获取数据。
什么是同源策略及限制
只要协议 、 域名 、 端口 有任何一个不同, 都被当作是不同的域。
限制：这个源的文档没有权利去操作另一个源的文档。
Cookie、LocalStorage和IndexDB无法获取。
无法获取和操作DOM。
不能发送Ajax请求。我们要注意，Ajax只适合同源的通信。
前后端如何通信
前后端实现通信的方式，即实现数据交互，靠的是HTTP。
服务端渲染、Ajax（不支持跨域）、JSONP、comet、SSE EventSource）：就是SSE（服务端推送）技术，从HTTP演变而来、Web Socket（不受同源策略的限制，支持跨域。）
1、JSONP
JSONP的原理：

通过<script>标签的异步加载来实现的。比如说，实际开发中，我们发现，head标签里，可以通过<script>标签的src，里面放url，加载很多在线的插件。这就是用到了JSONP。
2、WebSocket
3、CORS
CORS 可以理解成是既可以同步、也可以异步*的Ajax。
跨域时，浏览器会拦截Ajax请求，并在http头中加Origin。
4、Hash
url的#后面的内容就叫Hash。Hash的改变，页面不会刷新。这就是用 Hash 做跨域通信的基本原理。
5、postMessage
H5中新增的postMessage()方法，可以用来做跨域通信。

更多