在pc端和移动端是分为两套代码来写的。
pc端：
布局：整体的布局是从上往下的布局方式，没有特定的两栏、三栏布局，而是从上到下交错式排列。整体的思想是width固定为1000px（无响应式），两边的margin是auto，这样，可以在浏览器大小发生变化时，实现一部分margin的响应式，但是内容没有实现响应式。整体看上去还是比较朴素。
用户体验：
性能：整体加载网页的速度较快，但是也是存在一个问题。首页的加载，发送了各种请求287个。并且去查看图片的请求可以发现多达134个，所以这个请求量还是非常巨大的，因为其中只有部分经常不变的图片使用了雪碧图的方式，还有很多没有使用雪碧图的方式，导致请求量较大。并且雪碧图的合并也是有问题的，占用了较多的空间。
js使用：通过查看network，可以发现js的数量为40个左右，还是比较多的，比较好的是大部分js都是经过压缩的，只有一些没有压缩。可以看到www.qq.com首页使用的主要是jquery以及sea.js，前者使用的时1.11左右的版本，可以看出qq首页已经至少3年左右没有改版，而是继续沿用之前的技术，后者是一种cmd模块化解决方案，是阿里的玉伯开源的，但是目前也不是很火的。
问题：报错较多。
移动端：
布局：移动端使用的就是普通的百分比布局，rem使用的非常少，但是看上去也比较舒服。
特点：移动端也是浏览性质的偏多，对于item和图片使用的都是懒加载的方式，当图片还没有请求到的时候，背景是使用的企鹅的logo图片来代替的，所以用户体验较好。但是在后台中可以发现报错比较严重。
问题：导航栏的设计比较奇怪，共有很多的内容，但是如果希望看到更多的内容只能通过滑动的方式，如果可以添加一些按钮，将所有导航铺满全屏，这种形式在体验上可能会好很多。对于链接的下划线其实也是不好的，因为下划线是紧贴着字体下方的，有一种入侵的感觉，我更喜欢的方式还是取消下划线，使用其他hover的方式来代替。
总结:
在技术上，腾讯的qq.com并没有追求太先进的技术，整体表现也是中规中矩。在体验上，有一些地方做的还是不错。
移动端的手法也是类似的，即在点击的时候，一个list是一个整体来体现的，而不是单独的，体验还是不错的。
问题也是很明显，无论是腾讯的pc端还是移动端，一直呈现加载没有完成的状态。
整体感受非常的陈旧，没有新颖的感觉。
同样的，网易的163.com也是分为PC端和客户端来写的。
PC端：
布局：网易的布局在代码结构上还是没有问题的，首先使用一个div将所有的内容包裹起来。然后对于最上面的导航条使用铺满的通用方式，对于下面的内容部分使用的是960px的固定宽度，同样margin为auto。整体也是从上到下进行布局的，大多为两栏布局。
性能：
即对于js结尾的文件我们非常容易理解，在右方点进去之后可以看到返回的都是一些项目运行所需要的js代码，但是，还有很多js不是以js结尾的，而是添加了后缀，多是callback等于某个值、mode=2等等等等，点击这些response的数据，我们不难发现，这些返回的数据都是为了填充在首页的数据，并且不是同源的，所以这就是所谓的JSONP来进行跨域的方式，比如其中的index_pic_jsonp.jsINDEX_DATA_PIC_JSON这个js就是一个跨域请求，返回的数据显示callback后面的这个变量实际上是一个函数，response就是在调用这个函数，然后将一个包含了我们想要的数据的对象。然后我们就可以使用这些数据了，并成功完成了跨域。对于夏敏的几个函数也都是如此，无一例外。我们这里所说的跨域就是指不是同源（同协议、同端口号、同域名）的请求，这样，我们就可以将其他源的数据拿到了。当然，有时候可能不仅仅是通过callback=某一个函数，有时候还会传递一些额外的参数进行更精确的控制:如
当然，有些代码可能就不会使用callback的方式，既然js就是一个请求，那么我完全可以直接在js里写好数据，使用callback只是为了更加精确的确定使用哪一部分数据，如果没有这么精确，那么我们就完全可以直接请求一个js。就像之前在写socket.io的时候，一个src就是一个get请求。
并且这些请求往往不是你一进来就发出请求的，很多都是在你滑动页面的过程中，到了某一个版块，比如特定区域的版块如陕西然后再接着发出这么一个跨域的请求，大部分跨域都是www.163.com下面的子域名，如new.163.com，但是这些也都属于跨域，只能通过JSONP这种方式来请求了。
在这些js中，我们还会发现其中有一部分并不是js结尾，而是api结尾的，最后也会传递一个参数即callback=某个函数的名称，同样返回数据就是这个函数被调用，传递了某些数据。
在网易的netword下我们又打开了xhr，发现xhr下面竟然什么都没有！！！！也就是说，整个页面上的所有数据，都是通过js进行请求的，而没有使用xhr进行请求，即所有的请求都是get请求，毕竟这是用于展示的。
在source中，我们就可以看到如下所示的源：
其中，只有第一个www.163.com，在对这个接口发出请求的时候不是跨域的，其他的都不是同源的，但是都是和163.com类似的，所以很多采用了JSONP跨域的策略。
js使用：
在js的压缩层面来说，做的还是不错的。但是网易目前具体使用的是什么框架、方法还不得而知，在element中，我们可以截取到下面的片段：
即对于每一个模块，我们都可以看到在div中有一个属性ne-module，后面是一个js文件，至于什么时候发出请求，发出的请求得到的响应是什么，我们都不得而知，但是我认为也是js请求到的数据包含了网易首页想要填充的内容，这种方法还是第一次见到。。。但是应该也是有懒加载的成分在的，就是当我们不断向下滑的时候，然后发出更多请求，获取数据。
pc端js主要使用的都是网易自己封装的框架，没有什么名气的，对于我们使用的主流的框架网易似乎都没有采用。
在布局上主要使用的时百分比布局加rem布局，都是一些比较常规的布局方式。
移动端使用的主要就是zepto加上网易自己的一些框架。
由于使用在移动端，所以使用了大量的html5的标签，这些具有语义化的标签使用还是我们非常推荐的。
另外，在用户体验上，也是单纯的和腾讯比较，网易确实做得不错，的确是一家有态度的企业。
在移动端，也是几乎没有没有用到ajax请求，和pc端一样，都是通过js来发送get请求的，并传递一些参数，这里还是可以多学习一下的。
布局：总体的布局为从上到下的布局，没有特别的规则，和腾讯的非常类似，对于每一个模块宽度限定，为990px，可以看到，这几个网站的做法基本上都是一致的，就是宽度在950px到1000px之间，然后margin设置为0auto。另外，淘宝的首页整体的布局颜色为橙色。看上去开始挺舒服的。
用户体验：整体较好，因为阿里巴巴的网站在加载之后，首先整体框架（从上至下）会显示出来，然后如果有更多的内容会开始渲染出来，速度还是比较快的，另外，在上下滑动的过程中，在顶部的淘宝logo和搜索栏会fixed，这样可以方便我们实时进行搜索，这里做的还是不错的。
在性能方面，我只能说淘宝做的真是不错。相对于腾讯、网易的首页可能需要很多的内容信息，但是淘宝的也不少啊，第一页全是内容、商品。但是，进入首页之后，淘宝的请求数最开始也就是68个左右，就算是稳定了下来也不会超过100个请求。当然，如果你一直向下拉，那么请求就会迅速到几百个，但是这种懒加载的方式就很好地保证了首页的加载速度，这对于用户体验是至关重要的！而无论是腾讯还是网易，在进入首页的时候，请求都会直接超过200个，这差距，不言而喻！
另外，对于js而言，所有的js文件都是经过了压缩和混淆的，压缩的好处很清楚，就是减少不必要的空格、字符等，这样可以减少需要传输的字节数，而混淆之后，就可以把比较长的变量使用更短的变量来代替，这样，显示也可以减少传递的字节数的。
其内部的js更新的还是非常快的，今天是8月17日，但是我们可以看到8月15日的js代码，可见内部对js的升级、维护还是很快的。
通过看代码，可以发现，在pc端，淘宝对node也是有使用的，但是具体使用的程度还无法做出判断。
js代码中，很多都是使用define()这种形式来定义一个模块的，作为前端的模块化，这个在我看腾讯和网易的时候感觉是不一样的。
和网易一样，阿里在请求内容的时候，为什么也不使用xhr呢而是使用js、JSONP的方式？比如我们拿出来一个分析吧：
实际上在network下的js中，我们只能看到_ksTS=1502949060247_252&callback=jsonp253&appid=2952&from=PCtaobao，至于前面是怎么添加上去的，暂时不考虑。
存在的问题：
之所以淘宝在性能上如此追求极致，是因为淘宝用户的访问量是巨大的，所以对于性能的要求要很高，而像alibaba.com这种网站，他面对的用户都是大用户，成交金额一般都是在几百上千万的，但是访问的频率却不高，所以，对这种网站而言，并不需要像淘宝那样追求速度，而是能够保证稳定性，保证资金的安全就可以了。
今天和阿里的何幻聊了很多，收获很多。其实这一路走来，还是挺幸运的，遇到了一心一意、循循善诱的学长，遇到了主动帮忙、无私的前辈，那么自己也只有很努力，才能继续下去了。所以啊，加油向目标出发，一定可以走向远方。
相比于网易使用的H5的标签，淘宝这里做的就不是很好了，淘宝并没有采用h5标签，而是使用的一般的div，这样的问题就是语义化不够。但是整体上还是比较清楚的，包括嵌套等。
进入网站之后，请求数还是可以的，一共也就不要50个，所以，淘宝在性能上做的还是不错的，毕竟面临着这么大的需求，这一块是不能出现问题的。
在js这一块，我们可以发现，淘宝还是使用了方便操作DOM的zepto的，这个和网易是类似的，并且，我们可以看到，在head中加载js，但是使用了async属性，这样就可以保证异步加载了。并且在head中的所有js都添加了async属性。
另外，我们可以看到，在淘宝的head中的js的加载方式很多使用的都是cdn，即内容分发网络，这样可以保证数据的及时请求。
除此之外，为了保证首屏的加载速度，有些js代码直接通过内联的方式写在了html中，这样的好处肯定是直接解析了，速度比较快，但问题是这样的做法导致我们不能很好地去保证js的模块化。
另外，css也是如此，为了少发送一个请求，resetcss也没有外联，而是通过style的方式写在了head中。并且我们看到还不只一条，而是有很多都是直接内联的。
html,body,.page-content{-webkit-overflow-scrolling:touch;}.zebra-oversea-toolbars{height:112px;}.app-download{position:fixed;left:0;bottom:0;width:100%;height:60px;padding:12px;background:rgba(0,0,0,.7)}.app-download.d-close-btn,.app-download.d-logo{float:left;margin-right:12px;height:100%;line-height:36px}.app-download.d-close-btnimg{height:16px;width:16px}.app-download.d-btn{float:right;height:100%}.app-downloadimg{max-height:100%;max-width:100%}.app-download.text{height:100%;color:#fff;overflow:hidden}.app-download.texth2{font-size:16px}.app-download.textspan{display:block;font-size:12px;line-height:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.appshell.hide{opacity:0;-webkit-transition:all.2slinear;-moz-transition:all.2slinear;transition:all.2slinear}整体的布局用的就是百分比布局，没有更多的特色。
所有的js都是经过压缩和混淆的，这样才能保证一定的性能。
并且在移动端还使用了menifest方式，即PWA，我们在chrome浏览器中可以保存网页到手机桌面，然后再打开的时候，就会发现有一个启动logo，并且不再有浏览器的限制，而是像一个app，这就是好的体验，和饿了么是一样的。但是目前的体验还是有问题的，并不是很好。
如下所示：
另外，我们还可以看到手淘中使用了很多先进的技术，包括localstorage、sessionStorage等等，比如我们首先打开sessionStorage，可以看到：
然后我们再到源码中查看，可以发现几乎所有的展示型图片都是使用的webp格式的，这也算是提高性能的一种方式吧。并且这些图片使用的都是cdn的方式来引入的。
另外，我们还可以看看淘宝首页的localStorage是怎么样的？
这个结果一目了然，存储了一些经纬，存储了一些其他的基本信息。
当时cookie使用的是最多的。
并且在淘宝内部还使用了serviceworker这个技术。
至于使用的框架，还不能直接判断出来。
请求：整个网站的xhr请求还是比较正常的，与淘宝和网易不同，这两个网站几乎没有使用xhr，而全部使用的js，但是mail.qq.com不仅使用了xhr，也是用了js，只是js都是纯的js，而没有使用jsonp，所以的跨域都使用在了xhr中进行跨域，我们可以打开其中一个跨域的请求，如下所示：
即rl.mail.qq.com和mail.qq.com显然不是同一个域的，所以使用了CORS跨域请求，相比于JSONP，使用cors可以发送post请求（这里就是），并且从响应头可以看到这里是使用了cookie的。
布局：在整体布局方面，搜狐也是采用的主流做法，即宽度固定，然后使用margin:0auto；来居中，但是搜狐在宽度方面还是和其他网站都不同的，即header采用的是完全覆盖，然后下面的内容是一个整体，使用一个div包裹起来，固定宽度为1200px，与主流网站的950px到1000px，搜狐的做法可谓与众不同，标新立异。
特点：
css使用：使用了bootstrap。
ｊｓ使用：
可以看到，这个就是jsonp的使用了，值得注意的是，jsonp并不意味着一定要使用js来请求，因为这里还可以看到很多json和一些直接没有后缀的请求，甚至没有js！嗯，长见识了。
另外，这里的jsonp有的返回格式是：code、message、data，这是一种比较合适且通用的返回格式，这个也是我经常使用的后端返回格式，通过code来做判断，通过message来表示信息，通过data来表示得到的数据，不错。
搜狐移动端分析：
布局：在html中，搜狐竟然使用了大量的id，这个是非常不可思议的，另外，可以看到在命名规范上面，搜狐做的似乎也不尽如人意，还有许多需要改善的地方。但是整个代码结构还是值得鼓励的，并且注释也比较清楚，这是比较好的地方。
性能：只能说还好，在进入首页之后，大约会加载160个左右的请求。
用户体验：一般啦
js使用：从element可以看出搜狐的移动端已经大量使用了vue框架，从data-v-ghlkads这种形式就是可以看出来的，并且从js的main.js可以看出，搜狐使用了webpack进行打包，这些也都是比较好的做法，虽然在pc端使用了require.js，但是在移动端能及时作出改变还是不错的。
搜狐在使用的过程中存在这么一个bug，就是我比如我在chrome浏览器上浏览器移动版的搜狐，然后再切换为正常的pc，再去请求网页的时候，返回的网页是pc端的，就算我在百度里搜索之后，再去打开网页版的搜狐，还是无法奏效！
同样地，知乎也是分为移动端和pc端两套代码，但是让我感到非常困惑的是，看了这么多的网站为什么只有知乎的网站，
pc端的知乎在代码结构上整体还是比较舒服的，至少和前面的一些网站相比是这样的，一个主要原因也是知乎在架构上不是很复杂，下面分为几个方面来具体分析。
布局方面知乎也未能免俗，也是使用的最为一般的做法，在header上是width:100%的，在下面的主题部分采用的是固定宽度1000px，然后maigin:10pxauto；所以，这些主流网站的做法都是固定死宽度，并且也不会太宽，这样可以保证在小屏幕的电脑上也不会出现横向的滚动条，另外，可以发现，这种做法似乎是一种趋势，因为这样做在布局方面也会简单一些。
下面，我们再看一条关于大数据的应用的：
可以看到，当我们的鼠标滑过某一个list的时候，右上角会出现一个X，然后呢，如果我们滑动到这个X上，就可以发现提示如果点击这个X就代表对这条内容不感兴趣。下面的那条就是我已经点过X的，可以发现，提示如下：
已屏蔽该条，还不想看见以下的那些内容？
然后给出了一些选项，另外，我们甚至还可以撤销，通过撤销，我们就可以继续回到初始的页面了！
首页加载的过程中，一共有大约40个请求，整体还是不错的，下面我们具体分析这些请求。
可见，这里使用的就是CORS跨域，messaging.zhihu.com显然和www.zhihu.com不是同一个域的，另外，通过Access-Control-Allow-Credentials可以知道，这是需要发送cookie的，通过Access-Control-Allow-Origin可以知道，只有www.zhihu.com这个域才能跨域请，还有一些缓存的设置等。
可以发现，请求的url是wss，ws即websocket，第二个s表示的是secure，加密的意思。
可以看到一般的请求如下：
connection:upgrade
upgrade:websocket
sec-websocket-key:4A........A==
sec-websocket-version:13
sec-websocket-Extensions:permessage-deflate;client_max_window_bitsn
其中connection和upgrade都是使用websocket所必须的，而sec-websocket-key的作用就是作为一种通信的key。而version是指明使用的websocket的版本，这样大家通信才是顺畅的。extensions是其他的一些扩展，可以不去了解。
而响应如下所示：
sec-websocket-accept:BhfhOfTOEVYvEfgEnbI9+iQr54=
另外，通过观察，我们可以看到，每隔一分钟左右，就会发送一条websocket信息。
移动端使用的域名同样也是www.zhihu.com/。
布局：知乎总体使用的是百分比布局。整体中规中矩。
请求：
请求共70个左右，勉强可以接受。
xhr---同样使用了CORS跨域，并且跨域使用的非常广泛。
js---移动端主要使用的还是jquery，非常普通的方式。所有的js都是经过了压缩了的，还是可以接受的。
css---只有一个m.css，可以接受。
图片---使用了大量的雪碧图，值得鼓励。
ws---移动端也使用了websocket,这样，在推送消息的时候就会带来很好的用户体验。可以看到websocket请求也是大约1分钟会请求1次。
体验：一般。较之于pc端还是存在差距的，毕竟像hover这种移动端还是做不了。
布局：整体布局搅乱，简直没有办法看。
代码规范：
体验:
优点：
安全：
JS使用：
布局：网站整体使用的是rem布局，所以在适配方面应该还是非常不错的，html的font-size是根据js来设定的。但是没有使用html5标签，而是使用的一般的div。
体验：
通过观察，可以发现，很多质量要求不是太高的，一般都会使用webp格式，而质量要求很高的，可能就会使用png或者是jpg格式，而webp格式的图片是非常清楚的。
总结：
蘑菇街至少在移动端和pc端没有出现报错的情况，所以整体还是非常不错的，说明了前端一定的功底。