筱葭的博客

浏览器内核主要分成两部分：渲染引擎和JS引擎。①　渲染引擎：决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。②　JS引擎：解析和执行J

1、CDNCDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络"边缘"，使用户可以就近取得所需的内容，解决Internet网络拥塞状况，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因，解决用户访问网站的响应速度慢的根本原因。

有关CDN的介绍请见：http://blog.youkuaiyun.com/zhouziyu2011/article/details/60962103 1、CDNCDN是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容，在优化性能时，会根据距离的远近来选择。CDN将网站的资源发布到离用户最近的网络边缘，用户可以就近取得资源内容。CDN通常部署静态内容：JavaScri

1、什么是前端性能优化？从用户访问资源到资源完整展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。 2、为什么要做前端性能优化？在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利于网站访问速度的因素会产生，从而严重影响网站的性能，导致网站访问速度变慢，用户体验低下，最终导致用户流失

为了得到脚本运行的精确耗时，需要一个高精度时间戳，传统的做法是使用Date对象的getTime方法，其不足之处在于：1) getTime方法及Date对象的其他方法只能精确到毫秒级别，无法得到更小的时间精度；2) getTime方法只能获取脚本运行过程中的时间进度，无法知道一些后台事件的时间进度，比如浏览器用了多少时间从服务器加载网页。为了解决这两个不足之处，ES 5引入高精度时间戳—

如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。获取DOM的跨域解决方案：（1）如果两个窗口一级域名相同，只是二级域名不同，那么设置document.domain属性，即可跨域获取DOM。（2）否则，可以通过window.name和window.postMessage跨域获取DOM2-

1．XSS：跨站脚本（Cross-site scripting）实现XSS攻击可以通过JavaScript、ActiveX控件、Flash插件、Java插件等技术手段实现，下面讨论JavaScript的XSS攻击。1) 通过JavaScript实现的XSS攻击，一般有以下几种：①　Cookie劫持Cookie中，往往会存储着一些用户安全级别较高的信息，如用户的登陆凭证。当用户所访问

1、物理像素设备像素，在同一个设备上，它的物理像素是固定的，这是厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。 2、逻辑像素CSS像素，viewport中的一个小方格，CSS样式代码中使用的是逻辑像素。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px*960px，而逻辑像素数为320*480px。因此，需要使用大

1、MVC架构MVC（Model-View-Controller）是最常见的软件架构之一，应用十分广泛。1) 软件可以分成三个部分：①　视图（View）：用户界面。②　控制器（Controller）：业务逻辑。③　模型（Model）：数据保存。2) 三个部分之间的通信方式：①　用户通过View 传送指令到 Controller或用户直接传送指令到 Controller。

1、gulpgulp是一个前端自动化的构建工具，采用这个工具，可以提升性能和效率。 2、为什么要用gulp1) .js和.css属于静态文件，由于浏览器存在缓存机制，为了避免缓存带来的问题，可以利用构建工具，给每一个静态文件添加一个版本号以区别文件。2) 性能优化：文件合并，减少http请求；文件压缩，减少文件体积，加快下载速度；3) 效率提升：自动添加CSS3的vendo

一、网页内容1、减少http请求次数80%的响应时间花在下载网页内容(图片，CSS样式表，JS脚本，flash等)，因此减少http请求次数是缩短响应时间的关键！将多个JS脚本文件捆绑成一个文件，将多个CSS样式表文件捆绑成一个文件，以此来减少文件的下载次数。把多个图片拼成一张图片，然后通过CSS的background属性来控制具体显示整张图片的什么位置。 2、减少DNS查

1、前端性能优化的一点：对js、css、图片等进行压缩，尽可能减小文件的大小，减少文件下载的时间，从而减少网页响应的时间。 2、前端性能优化的另一点：对HTTP传输进行压缩，即在js，css、图片等资源已经压缩的基础上（其实，文件的压缩与否均可，文件的压缩跟HTTP传输过程的压缩没关系），在HTTP传输过程中的再次压缩。 3、HTTP1.1的Accept-Encoding和

CSS文件放置在head中和放在body底部，对CSS本身的下载时间不会有影响，但对页面的呈现有非常大的影响，与用户体验密切相关。 CSS文件放在顶部的原理：浏览器为了避免样式变化导致页面重绘or重排，会阻塞内容呈现，等待所有CSS文件下载完后才一次性渲染页面。因此，若CSS文件放在底部，由于在CSS文件全部下载完之前，浏览器阻止内容呈现，因而在等待CSS文件下载的过程中，浏览器会出现

方法一：页面1： $(function(){ $("#btn").click(function(){ var name=$("#name").val(); localStorage.setItem("name", name); }); }); 页面2： $(function(){ window.addEventLis

浏览器缓存机制有两种：HTML Meta标签、HTTP头信息1、HTML meta标签可以在HTML页面的节点中加入标签：上述代码的作用是告诉浏览器当前页面不被缓存，每次访问都需要去服务器拉取。使用上很简单，但只有部分浏览器可以支持，而且所有缓存代理服务器都不支持，因为代理不解析HTML内容本身。 2、HTTP头信息浏览器缓存机制，其实主要是HTTP协议定义的缓存机制（

CSS文件放置在head中和放在body底部，对CSS本身的下载时间不会有影响，但对页面的呈现有非常大的影响，与用户体验密切相关。 script的两个属性——async和defer：①　没有defer或async，浏览器会立即加载并执行指定的JS脚本，不等待后续文档元素，读到JS脚本就加载并执行。②　有async，加载后续文档元素的过程将和JS的加载与执行并行进行（异步）。③

1、原因一：http请求次数太多解决：减少http请求次数①　图片地图：把多张图片整合到一张图片中，以位置定位超链接。②　CSS Sprites合并图片，通过指定CSS的backgroud-image和backgroud-position来显示元素。③　合并JS脚本和CSS样式表。④　使用外部JS和CSS文件。 2、原因二：接收数据时间过长，如下载资源过大解决：对H

HTTP Header里的Content-Type一般有3种：①　application/x-www-form-urlencoded：标准的编码格式，数据被编码为名称/值对。②　multipart/form-data： 数据被编码为一条消息，每个控件对应消息中的一个部分。③　text/plain： 数据以纯文本形式(text/json/xml/html)进行编码，不含任何控件或格式字符

前端性能优化中，减少HTTP请求可以提高页面的响应速度。浏览器在第一次访问页面时向服务器请求资源，并缓存起来，下次再访问时会判断在缓存中是否已有该资源且有没有更新过，如果已有该资源且未更新过，则直接从浏览器缓存中读取。原理：通过HTTP 请求头中的 If-Modified-Since（If-No-Match） 和响应头中的Last-Modified（ETag）来实现，HTTP请求把 If-Mo

1、DNS缓存DNS查询过程大约消耗20毫秒，在DNS查询过程中，浏览器什么都不会做，保持空白。如果DNS查询很多，网页性能会受到很大影响，因此需要用到DNS缓存。 不同浏览器的缓存机制不同： IE对DNS记录默认的缓存时间为30分钟，Firefox对DNS记录默认的缓存时间为1分钟，Chrome对DNS记录默认的缓存时间为1分钟。缓存时间长：减少DNS的重复查找，节省时间。缓存时

cookie存储在客户端，伴随着HTTP请求在浏览器和服务器之间传递。除了key-value外，cookie还有max-age，path，domain和httponly属性。httponly属性标识一个客户端JavaScript能否操作该cookie；max-age属性表示缓存时间，单位为秒；domain设置可以访问该Cookie的域名；path设置该domain下可以访问该Coo

1、常用的图像类型1) gif: 适用于动画效果。2) jpg: 使用有损压缩，将图片的每个像素分解成8*8的栅格，然后对每个栅格的数据进行压缩处理，通过特殊的算法用附近的颜色填充栅格。用户可以设置质量级别，从0到100，数字越小，图片质量越差。3) png：使用无损压缩，将图片出现的颜色进行索引，保留在调色板上，在显示图像时会调用调色板的颜色去填充相应位置。png又分为png8、pn

1、图片地图图片地图允许在一个图片上关联多个URL，目标URL取决于用户单击的图片上的位置。1) 优点：把多张图片整合到一张图片中，虽然文件的总体大小不变，但可以减少HTTP请求数。2) 使用条件：只有在图片的所有组成部分在页面中是紧挨在一起时才能使用，如导航栏。3) 缺点：确定图片的坐标比较繁琐且易出错，同时使用图片地图导航也不具有可读性，因此不推荐使用图片地图。

1、SVGSVG 可缩放矢量图形（Scalable Vector Graphics），是一种使用可扩展标记语言（XML）描述2D图形的语言。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG基于XML，意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加 JavaScript 事件处理器。在SVG中，每个被绘制的

1、Ajax的适用场景1) 用Ajax进行数据验证在填写表单内容时，有时需要保证数据的唯一性，如新用户注册填写的用户名，因此必须对用户输入的内容进行数据验证。使用Ajax技术，可以由XMLHttpRequest对象发出验证请求，根据返回的HTTP响应判断验证是否成功，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速而又不加重服务器负担。2) 用Ajax自动更新页面

前端项目发展的四个阶段：1、库/框架库：jQuery框架：vue、React、Angularjs 2、构建优化选择Gulp, Grunt, Webpack 等构建工具，对代码进行压缩、校验，再以页面为单位进行简单的资源合并。 3、JavaScript和CSS模块化开发分而治之是软件工程中的重要思想，模块化是目前前端最流行的分治手段。模块化开发的最大价值不是复用，

1、架构：软件架构，也成称为软件体系结构，简单地说就是一种设计方案，将用户的不同需求抽象成组件，且能够描述组件之间的通信和调用。软件架构会分析工程中的问题，针对问题设计解决方案，针对解决方案分析应具有的功能，针对功能设计软件系统的层次和模块及层次模块之间的逻辑交互关系，确定各个功能如何由这些逻辑实现。开发人员可以根据软件架构分析出来的层次和架构进行软件编写。2、框架：软件框架，

1、详细版1) 浏览器会开启一个线程来处理这个请求，对URL分析判断，如果是HTTP协议，就按照Web方式来处理。2) 调用浏览器内核中的对应方法，比如WebView中的loadUrl方法。3) 通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求。4) 进行HTTP协议会话，客户端发送报头(请求报头)。5) 进入到web服务器上的Web Server，如A

1、viewport移动设备上的viewport是设备屏幕上用来显示网页的那部分区域，再具体一点就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。在默认情况下，移动设备上的viewport都是大于浏览器可视区域的，这是因为移动设备的分辨率相对于PC来说都比较小，所以为了能在移动设备上正常显示那些为

一般来说，GIF图片比JPG图片更小一些，但静态时效果不如JPG图片好。一般来说，颜色较少时用GIF，颜色较丰富时用JPG。 一、GIF图片1、GIF图片的优点①　支持背景透明，如果背景设置为透明，将与浏览器背景相结合，生成非矩形的图片。②　支持动画，在Flash动画出现之前，GIF动画是网页中唯一的动画形式，可以将单帧的图象组合起来，然后轮流播放每一帧而成为动画。虽然并非

JavaScript跨域的解决方案有两种：1、CORS（CrossOrigin Resource Sharing跨域资源共享）当前几乎所有的浏览器（Internet Explorer 8+，Firefox 3.5+，Safari 4+和Chrome）都可通过名为跨域资源共享（Cross-Origin Resource Sharing）的协议支持ajax跨域调用。 对一个简单的请求，没有

1、数据传递方式GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连；POST把提交的数据则放置在是HTTP包的包体中。因此，GET请求的数据会暴露在地址栏中，而POST请求则不会。3、数据大小在HTTP规范中，没有对URL的长度和传输的数据大小进行限制。但是在实际开发过程中，对于GET，特定的浏览器和服务器对

1、以HTML页面为例描述HTML页面渲染的过程1) 用户输入网址，浏览器向服务器发出请求，服务器返回HTML文件； 2) 浏览器开始载入HTML代码，若标签内有一个标签引用外部CSS文件，则浏览器又发出CSS文件的请求。解析过程中，停止页面所有往下元素的下载，阻塞加载；解析完成后，服务器返回CSS文件（注意：CSS是并行下载的，当所有样式表都下载完成以后页面才开始一起解析CSS文件开始渲

1、提前确定好全局样式globe.css，编码模式，如utf-8等。2、编写习惯必须一致，如都采用继承式的写法，单样式都写成一行。3、标注样式编写人，各模块都及时标注，标注关键样式调用的地方。4、对页面进行标注，如模块的开始和结束。5、CSS跟HTML分文件夹并行存放，命名都得统一，如index.css和index.html。6、JS分文件夹存放，命名以该JS功能为准的英文翻译

1、页面可见性：①　一次可以打开好多标签页，标签页可以来回切换，但始终只有一个页面在眼前，其他标签页是隐藏的；②　把浏览器最小化，所有的标签页就都不可见了。2、页面可见性API定义了2个只读的document属性：①　document.hidden：返回一个布尔值，true表示页面可见，false则表示页面隐藏。②　document.visibilityState：

在WebSocket没有出现之前，实现与服务端的实时通讯可以通过轮询来完成任务.。Socket.io将Websocket和轮询（Polling）机制以及其它的实时通信方式封装成了通用的接口，并且在服务端实现了这些实时机制的相应代码。也就是说，Websocket仅仅是Socket.io实现实时通信的一个子集。 Socket.io实现了Polling中的以下通信机制：1. Adobe® F

1、同源策略出于安全方面的考虑，为了保证用户信息的安全，防止恶意的网站盗取数据，不允许跨域调用其他页面的对象。 2、同源1) 协议相同2) 域名相同3) 端口相同域名一域名二是否允许通信http://www.domain.com/a.html http://www.domain.com/b.html同一域名，允许通

1、屏幕尺寸通常所说的iPhone3GS屏幕尺寸为3.5英寸、iPhone4屏幕尺寸为4英寸，指的是显示屏对角线的长度。 2、iOS尺寸单位1) px：像素，是物理屏幕显示的基本单位，即使在程序中使用的不是px，但最后都会转化为px，显示在手机上。2) pt：ios开发单位，即point，绝对长度，1pt=1/72英寸。3) ppi：Pixels Per Inc

WebSocket是一种全新的协议，作为HTML5中进行全双工通讯的网络技术，它能够在浏览器和服务器之间建立双向连接。服务器端和客户端可以同时发送并响应请求，而不再像HTTP的请求和响应。浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。WebSocket不属于HTTP无状态协议，协议名为"ws"。ws不是HTTP，所以传统的web服务器不一定支持，需要服务器与浏览器

1、模块化模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。模块化使得系统被分解为一组高内聚，低耦合的模块，在理想状态下只需要完成自己部分的核心业务逻辑代码，其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可。一个模块化系统所必须的能力：1) 定