前端架构

前段时间大致整理了下virtIO后端驱动的工作模式以及原理，今天就从前端驱动的角度描述下目前Linux内核代码中的virtIO驱动是如何配合后端进行工作的。 注：本节代码参考Linux 内核3.11.1代码 virtIO驱动从架构上来讲可以分为两部分，一个是其作为PCI设备本身的驱动，此驱动需要提供一些基本的操作PCI设备本身的函数比如PCI设备的探测、删除、配置空间的设置和寄存器空间的读写等。而另一个就是其virtIO设备本身实现的功能驱动例如网络驱动、块设备驱动、console驱动等。所以我们要看还是分两部分，先介绍PCI设备本身的驱动，然后在介绍实际功能驱动。 一、PCI设备本身驱动 在前面的PCI系列文章中对Linux内核中PCI设备驱动做了分析，所以这里我们只分析和virtIO相关的部分。 二、功能驱动部分 其实大部分的功能在后端驱动已经介绍，只是有些功能是在前端实现的，比如说virtqueue的初始化、avail buffer的添加以及used buffer的消费，还有比较很重要的是前后端vring的同步。 鉴于前面已经有了基本的概念基础，那么我们直接从网络驱动下手，分析驱动从注册到接受数据的整个流程。（参考代码virtio-net.c） 看下网络驱动注册的操作函数： 1 static const struct net_device_ops virtnet_netdev

近年来前端开发趋势 1.旧浏览器 逐渐淘汰，移动端需求增加: 旧浏览器主要指的是IE6-IE8，它是不支持ES5特性的；IE9+、chrome、sarafi、firefox对ES5是完全支持的，移动端大部分浏览器是基于webkit内核，所以ES5在移动端也是全面支持的，因此vue可以在移动端以及现代浏览器中大显身手。 2.前端交互越来越多，功能越来越复杂 : 现在的前端可谓是包罗万象，比如高大上的技术库和框架、酷炫的运营活动页面、H5小游戏，当然前端技术的应用在更多具有商业价值的应用上，比如下图。 3.架构从传统后台MVC向REST API+ 前端 MV*(MVC、MVP、MVVM) 迁移 在传统的MVC下，当前前端和后端发生数据交互后会刷新整个页面，从而导致比较差的用户体验。因此我们通过Ajax的方式和后端REST API作通讯，异步的刷新页面的某个区块，来优化和提升体验，同时把MVC拿到前端来做 MVVM框架 1.MVVM框架基本概念 :它主要包括各部分View、ViewModel、Model,如下图。在MVVM架构下，视图和数据是不能直接通讯的，它会通过ViewModel这个中间件来通讯。ViewModel起的是一个观察者的职位:当数据变化，ViewModel观察到变化，并通知视图做相应的更新；而用户操作视图，ViewModel也能监听到变化，然后通知数据做改动

近年来前端开发趋势 1.旧浏览器 逐渐淘汰，移动端需求增加: 旧浏览器主要指的是IE6-IE8，它是不支持ES5特性的；IE9+、chrome、sarafi、firefox对ES5是完全支持的，移动端大部分浏览器是基于webkit内核，所以ES5在移动端也是全面支持的，因此vue可以在移动端以及现代浏览器中大显身手。 2.前端交互越来越多，功能越来越复杂 : 现在的前端可谓是包罗万象，比如高大上的技术库和框架、酷炫的运营活动页面、H5小游戏，当然前端技术的应用在更多具有商业价值的应用上，比如下图。 3.架构从传统后台MVC向REST API+ 前端 MV*(MVC、MVP、MVVM) 迁移 在传统的MVC下，当前前端和后端发生数据交互后会刷新整个页面，从而导致比较差的用户体验。因此我们通过Ajax的方式和后端REST API作通讯，异步的刷新页面的某个区块，来优化和提升体验，同时把MVC拿到前端来做 回到顶部(go to top) MVVM框架 1.MVVM框架基本概念 :它主要包括各部分View、ViewModel、Model,如下图。在MVVM架构下，视图和数据是不能直接通讯的，它会通过ViewModel这个中间件来通讯。ViewModel起的是一个观察者的职位:当数据变化，ViewModel观察到变化，并通知视图做相应的更新；而用户操作视图，ViewModel也能监听到变化

21、你对Webpack的认识？ webpack是收把项目当作一个整体，通过一个给定的的主文件，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件 22、webpack中的entry是做什么的？ entry: 用来写入口文件，它将是整个依赖关系的根。当我们需要多个入口文件的时候，可以把entry写成一个对象。 var baseConfig = { entry: { main: ‘./src/index.js’ } } 23、webpack中的output是做什么的？ output: 即使入口文件有多个，但是只有一个输出配置，如果你定义的入口文件有多个，那么我们需要使用占位符来确保输出文件的唯一性。 var baseConfig = { entry: { main: './src/index.js' }, output: { filename: '[name].js', path: path.resolve('./build') } } module.exports = baseConfig 24、webpack中的Loader的作用是什么？ 1、实现对不同格式的文件的处理，比如说将scss转换为css，或者typescript转化为js 2、转换这些文件，从而使其能够被添加到依赖图中

Web 前端开发工程师 是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。 简介 2005年以后，互联网进入Web 2.0时代，各种类似桌面 软件 的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。 　　随着Web 2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML和Ajax像一阵旋风，铺天盖地席卷而来，包括新浪、搜狐、网易、腾讯、淘宝等在内的各种规模的IT企业都对自己的网站进行了重构。 为什么它们会对自己的网站进行重构呢？有两个方面的原因： 　第一，根据W3C标准进行重构后，可以让前端的代码组织更有序，显著改善网站的性能，还能提高可维护性，对搜索引擎也更友好； 第二，重构后的网站能带来更好的用户体验，用XHTML+CSS重新布局后的页面，文件更小，下载速度更快。网站重构的目的仅仅是为了让网页更符合Web标准吗？不是！重构的本质是构建一个前端灵活的MVC框架

尤雨溪 vuejs作者 王垠 http://www.yinwang.org/ 20位活跃在Github上的国内技术大牛 1. lifesinger （玉伯） Github主页： https://github.com/lifesinger 微博：@ 玉伯也叫射雕 玉伯（王保平），淘宝前端类库 KISSY 、前端模块化开发框架 SeaJS 、前端基础类库 Arale 的创始人。2003-2006 年，中科院物理所研究生，Fortran 与 C 程序员，喜爱实验模拟和数值计算。 2006-2008 年，在中科院软件所互联网实验室从事项目管理软件的研发，C# 与 Java 爱好者。 2008 年 4 月份加入淘宝，就职于 UED 部门。2009 年起，组建前端 架构 团队，在首页维护、全网性能优化、类库研发、知识沉淀、工具应用等方面取得了丰硕成果。 相关新闻： 【开源专访】Sea.js创始人玉伯的前端开发之路 2. BYVoid （郭家宝） 《 Node.js开发指南 》作者。 Github主页： https://github.com/BYVoid 个人博客： http://www.byvoid.com 微博：@ BYVoid 豆瓣： http://www.douban.com/people/byvoid/ BYVoid（郭家宝），清华大学计算机系2010级本科生，自由意志主义者。《

雅虎给出了 优化网站加载速度 的34条法则（包括Yslow规则22条） 详细说明，下载转发 ponytail 的译文（来自帕兰映像）。 1.Minimize HTTP Requests 减少HTTP请求 图片、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background来定位。 2.Use a Content Delivery Network 利用CDN技术 CDN 确实是好东西，8过服务器提供商的这项服务一般是要收费的，我以前买的国内空间是有这个的但是我当时根本不知道啥用，现在没了。。。 3.Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存 浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。不过这样如果 页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，看自己衡量了~ 这项可以通过修改.htaccess文件来实现。 4.Gzip Components Gzip压缩 Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力

综合/资源 frontend-dev-bookmarks 一个巨大的前端开发资源清单。 star:15000 front-end-collect 分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者。 star:860 Front-end-Interview-questions 史上最全前端开发面试问题及答案 f2e-hub 包含 Animation，UI，dialog，Carousels，color，image，workflow 等。 star:100 awesome-javascript 一系列很棒的 javascript 库，资源。 star:3100 fks 前端技能汇总，包含前端知识架构，后端知识， linux ，书籍推荐等。 star:4000 node123 node.js 中文资料导航。 star:1200 mobile-web-favorites 移动端web开发收藏夹。 star:200 gulp-book Gulp 入门指南 样式/UI Semantic-UI 让你使用任何 HTML 标签 来表现UI控件。 这是一款语义化设计的前端框架，为攻城师而制作的可复用的开源前端框架。 star:17500 primer CSS 风格指南。 star:3600 测试/工具 mocha 一个简单、灵活有趣的 JavaScript 测试框架，用于 Node.js

1、请列举网站开发的多种模式 WebFrom、MVC、前后端分离（后端 Restful API，前端使用前端框架，例如Angular、React、Vue）。 2、列举前后端分离和非前后端分离的区别以及各自的优势 1、前后端不分离 在前后端不分离的开发模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。 这种开发模式比较适合纯网页应用，但是当后端对接App时，App可能并不需要后端返回一个HTML网页，而仅仅是数据本身，所以后端原本返回网页的接口不在适用于前端App应用，为了对接App，后端还需要在开发一套接口。 2、前后端分离 术业有专攻，前端做前端的，后端做后端的。 服务器一分为二，前后端分别部署，静态资源放在前端服务器，业务代码放在后端服务器。前端服务器需要接收HTTP请求。前端服务器需要进行视图解析（可以使用Vue.js、Angular）。前端服务器需要处理路由（也就是页面之间的跳转）。后端服务器只负责返回数据给前端。 3、谈谈为什么现在大部分企业都选择前后端分离模式开发项目 其实这还是由前后端分离后的优势决定的：术业有专攻，前端做前端的，后端做后端的。服务器一分为二，前后端分别部署，静态资源放在前端服务器，业务代码放在后端服务器。前端服务器需要接收HTTP请求。前端服务器需要进行视图解析（可以使用Vue

作者：暗灭 链接：https://www.zhihu.com/question/26669731/answer/466936797 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 想了想,还是先画一系列的图,再来解释一下什么是WEB开发. 第一层 入门介绍图 适合:刚入门互联网,没多少基础知识和专业知识. 为嘛这个图上传的不清楚?算了.我也不知道 对于大多数刚刚接触到互联网这个职业的人来说,对于软件是怎么编写的,大概的职业是怎么划分的,理解到这个程度就够了. 整个系统架构可以分成三层(分层是码农必备思维). 第一层,叫展示层,又被称之为前端.展示层这个名字,其实有点不精确,确切的来说,应该叫用户层,或者是输入输出层,或者叫用户交互层. 它的目标很简单,就是接受用户的输入,并将结果反馈给用户. 什么叫做输入呢?键盘,鼠标,声音,图像等等都是输入,最简单的输入就是键盘和鼠标,你们如果看过各种黑客电影,不管是在键盘上啪啪啪,还是在空气中点点点,都是输入. 输出就是展示出来的结果,在屏幕上就是文字动画,在音箱就是声音之类的. 叫展示层的原因,是因为大部分的情况下,都是用户只需要看,少部分才是操作. 所以通常是用展示层来代指用户的输入输出层. 为什么要分层? 其实最早在互联网没有出现之前,分层是一个相对而言,软件设计里的概念.但是在现在,就很简单了