性能篇

---

• 1、请谈谈你对性能优化的认识？

    1) 网页内容

    2) 减少http请求次数

    3) 80%的响应时间花在下载网页内容(images, stylesheets, javascripts,scripts, flash等)。减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数，但页面内容较多可以采用CSS Sprites（也就是常说的雪碧图或者精灵图）。

    4) 减少DNS查询次数
      DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问响应速度有所影响。下面是我清空本地dns后访问博客园主页dns的查询请求。

    5) 缓存Ajax

      Ajax可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如ajax的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高ajax的响应速度。

    6) 延迟加载

      这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。

    7) Javascript是典型的可以延迟加载内容。
        一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。

    8) 延迟加载

        这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。

    9) Javascript是典型的可以延迟加载内容。
    一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。

• 2、如何避免XSS？

    1、基于特征的防御
      XSS漏洞和著名的SQL[注入漏洞]一样，都是利用了Web页面的编写不完善，所以每一个漏洞所利用和针对的弱点都不尽相同。这就给XSS漏洞防御带来了困难：不可能以单一特征来概括所有XSS攻击。

      传统XSS防御多采用[特征匹配]方式，在所有提交的信息中都进行匹配检查。对于这种类型的XSS攻击，采用的模式匹配方法一般会需要对“javascript”这个[关键字]进行检索，一旦发现提交信息中包含“javascript”，就认定为XSS攻击。这种检测方法的缺陷显而易见：骇客可以通过插入字符或完全编码的方式躲避检测：

      方法1)在javascript中加入多个tab键，得到

      `< IMG SRC="jav ascript:alert('XSS');" >;`

      
      方法2) 在javascript中加入(空格)[字符]，得到


      `< IMG SRC="javascri pt:alert('XSS');" >;`

      

      躲避方法3) 在javascript中加入(回车)字符，得到


      `< IMG SRC="jav``ascript:alert('XSS');" >;`

      

      躲避方法4)在javascript中的每个[字符]间加入回车换行符，得到


      `< IMG SRC="javascrip\r``\nt:alert('XSS');" >`


      躲避方法5)对"javascript:alert('XSS')"采用完全编码，得到


      `< IMGSRC=javascrip?74:alert('XSS') >`

      上述方法都可以很容易的躲避基于特征的检测。而除了会有大量的漏报外，基于特征的

      还存在大量的误报可能：在上面的例子中，对上述某网站这样一个地址，由于包含了关键字“javascript”，也将会触发报警。

    2、基于代码修改的防御

      和SQL注入防御一样，XSS攻击也是利用了Web页面的编写疏忽，所以还有一种方法就是从Web应用开发的角度来避免：

      步骤1、对所有用户提交内容进行可靠的输入验证，包括对URL、查询关键字、HTTP头、POST数据等，仅接受指定长度范围内、采用适当格式、采用所预期的字符的内容提交，对其他的一律过滤。

      步骤2、实现Session标记(session tokens)、CAPTCHA系统或者HTTP引用头检查，以防功能被第三方网站所执行。

      步骤3、确认接收的的内容被妥善的规范化，仅包含最小的、安全的Tag(没有javascript)，去掉任何对远程内容的引用(尤其是样式表和javascript)，使用HTTP only的cookie。

      当然，如上操作将会降低Web业务系统的可用性，用户仅能输入少量的制定字符，人与系统间的交互被降到极致，仅适用于信息发布型站点。并且考虑到很少有Web编码人员受过正规的安全培训，很难做到完全避免页面中的XSS漏洞。

    3、综论

      XSS攻击作为Web业务的最大威胁之一，不仅危害Web业务本身，对访问Web业务的用户也会带来直接的影响，如何防范和阻止XSS攻击，保障Web站点的业务安全，是定位于业务威胁防御的入侵防御产品的本职工作。

• 3、平时如何管理项目？

        所谓项目，简单地说，就是在既定的资源和要求的约束下，为实现某种目的而相互联系的一次性工作任务。一般来说，项目具有如下的基本特征：

        1）明确的目标其结果只可能是一种期望的产品，也可能是一种所希望得到的服务。

        2）独特的性质每一个项目都是唯一的。

        3）资源成本的约束性每一项目都需要运用各种资源来实施，而资源是有限的。

        4）项目实施的一次性项目不能重复。

        5）项目的不确定性在项目的具体实施中，外部和内部因素总是会发生一些变化，因此项目也会出现不确定性。

• 4、请谈谈项目的迭代周期？

        软件项目开发，一般都会采用增量、迭代、（或者叫进化、演化、演进）的软件开发模型，众多的软件开发模型大多是以经典的瀑布模型为基础进行改进、变形，
改进原则是：
      增加客户在整个项目周期中的参与度，降低软件开发过程中的风险，增强软件项目的后期可维护性。
      不同的软件开发模型，迭代周期长短也不相同，有的是一个月，有的是两周，我们一般都是根据实际情况确定，一个周期完成，将项目成果（可运行的软件）提交给用户（或进行内部评审），通过后就进入下一个迭代开发周期

• 5、工作中用过什么构建工具？

答：用过webpack。

第一步：安装node和npm,搭建node环境。

第二步：安装webpack和webpack-cli

第三步：现在打开 package.json 并添加一个 dev(运行) 脚本：


 "scripts":  {
 "build":  "webpack"
 }



第四步：新建webpack.config.js文件，配置入口、出口、loader和plugins,运行webpack

安装依赖，提醒下，如果以上命令提示权限错误，需要添加 sudo 再次尝试。

• 6、谈谈你对模块化的理解？

   1、 什么是模块化？

            •       模块化就是为了减少系统耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计。

            •       让开发者便于维护,同时也让逻辑相同的部分可复用

            •       模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、

            api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。

            任何事物都有一个过程，那么模块化的过程通俗点讲就是：

            模块化的过程就是：

    2、拆分

           将整个系统按功能,格式,加载顺序,继承关系分割为一个一个单独的部分.
           
           注意:拆分的粒度问题,可复用问题,效率问题.如何这些问题处理的不好，就有可能出现不想要的后果。
           
           将功能或特征相似的部分组合在一起,组成一个资源块.
           
           将每个资源块按找需求,功能场景以及目录约束放到固定的地方以供调用.
           
           模块的历程
           
           模块化的发展也是从草根一步一步走过来的。从最开始到现在成熟方案：
           
           1.      namespace
           
           2.      sass,less
           
           3.      AMD&CMD
           
           4.      html模版
           
           5.      grunt,gulp,webpack
           
           6.      FIS,YUI,KISSY

• 7、平时都用什么第三方框架和库？

  react 、vue、jQuery、Bootstrap、…

• 8、请描述一下cookie，sessionStorage和localStorage的区别？

cookies兼容所有的浏览器，Html5提供的storage存储方式。

•       Document.cookie

•       Window.localstorage

•       Window.sessionstorage

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

• 9、如何使用缓存？

可以基于http的头信息控制缓存

ajax请求对早期的IE浏览器默认就是缓存的，可以通过时间戳防止缓存

• 10、谈谈你对预加载的理解？

Web预加载指的是在网页全加载完成之前，在页面优先显示一些主要内容，以提高用户体验。对于一个较庞大的网站，如果没有使用预加载技术，用户界面就会长时间显示一片空白，直到资源加载完成，页面才会显示内容。

例如，可以通过js预先从服务加载图片资源(动态创建Image，设置src属性)，只要浏览器把图片下载到本地，就会被缓存，再次请求相当的src时就会优先寻找浏览器缓存，提高访问速度。

• 11、缓存和预加载的区别是什么？

缓存就是把请求过的数据缓存起来，下次请求的时候直接使用缓存内容，提高响应速度

预加载指的是提前把需要的内容加载完成，访问的时候可以明天提高响应效率，比如图片的预加载（可以提前加载一定数量的图片，当用户访问图片的时候一般只看前几张，由于是预加载好的，所以速度比较快）

• 12、图片如何压缩？

可以使用一些在线的图片压缩工具

优先用 png 而不是 gif

压缩 png

去掉 jpg 的 metadata

压缩 gif 动画

尝试使用 png8

避免使用 AlphaImageLoader

压缩动态生成的图像

使 favicon 更小 可缓存

使用 CSS Sprites(精灵图)

• 13、压缩文件有哪些方法？

  使用webpacl、Grunt、Sass、ant压缩

• 14、如何区分静态页面和动态页面？

  静态页面和动态页面区别在于：
      1、 静态网站一般都是写死，不便于维护，迭代麻烦吗，但是SEO比较好 便于搜索和加载
      2、 动态网页的在于数据依赖于后台的交互获取 然后到前台渲染，数据俩源于后台，维护和迭代方便

• 15、字符串拼接和模板引擎，项目中会如何操作？模板引擎会不会利于SEO优化？

    简单的数据渲染，拼接字符串即可，稍微复杂的业务逻辑使用前端模板引擎，过于复杂的页面基本上使用后台渲染的方式；
    模板引擎会影响SEO优化，为了解决这个问题，需要关注SEO的页面最好采用后台渲染的方式。

• 16、前台兼容性问题有哪些？

    答：主要是常用浏览的（前端）API差异，渲染差异，等等

• 17、你如何对网站的文件和资源进行优化?期待的解决方案包括？

       文件合并

       文件最小化/文件压缩

       使用CDN托管

       缓存的使用

• 18、内存泄漏怎么理解？

        答： IE6时代有bug，闭包会造成内存泄漏，这个现在已经无须考虑了。
        其次，闭包本身不会造成内存泄漏，但闭包过多很容易导致内存泄漏。
        这句话很矛盾，技术上讲，闭包是不会造成内存泄漏的，浏览器的bug除外。
        但是，闭包会造成对象引用的生命周期脱离当前函数的上下文，因此，
        如果不仔细考虑闭包函数的生命周期，的确有可能出现意料之外的内存泄漏，当然，从严格意义上讲，这是程序员自己的bug，而不是闭包的错。

• 19、微格式到底是做啥用？

         答：   是开放的数据格式，面向的是普通用户，任何用户可以透过简单的程序读取微格式内容。
               而不是像Flickr、Amazon、Google等提供特定的面向技术人员的API（一般基于XML-PRC、REST，相对复杂）。
               RSS具有微格式的部分优点，但限制还是比较多的，比如有限的元数据（标题、描述、URL等），
               不能更好地描述语义，不太容易与已存在的工具结合等。
               用微格式可以来聚合外部Blog，Flickr，YouTube，MapQuest，甚至MySpace里的内容。
               微格式实际就是为现有的(X)HTML元素添加元数据和其他属性，增强语义。

• 20、懒加载是用滚轮判断高度好还是用插件？

        使用插件比较好，插件考虑的问题比较全面，仅仅通过滚轮高度判断很容易导致一些副作用（比如一次性请求多次）

• 21、如何缓存整个页面，在没有网络的时候可以来回的跳转？

    使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

    如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性。

    每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

    manifest 文件的建议的文件扩展名是：".appcache"。

    manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

    manifest 文件可分为三个部分：

            CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

            NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

            FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

    实例 - 完整的 Manifest 文件

            CACHE MANIFEST
            # 2012-02-21 v1.0.0
            /theme.css
            /logo.gif
            /main.js
             
            NETWORK:
            login.asp
             
            FALLBACK:
            /html5/ /404.html
 

• 22、CDN是啥？

CDN的全称：是Content DeliveryNetwork，即内容分发网络，加速的意思，那么网站CND服务就是网站加速服务。

CDN加速原理：CDN加速将网站的内容缓存在网络边缘（离用户接入网络最近的地方），然后在用户访问网站内容的时候，通过调度系统将用户的请求路由或者引导到离用户接入网络最近或者访问效果最佳的缓存服务器上，有该缓存服务器为用户提供内容服务；相对于直接访问源站，这种方式缩短了用户和内容之间的网络距离，从而达到加速的效果。

CDN的特点：

        1、本地加速 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度，并大大提高以上性质站点的稳定性

        2、镜像服务 消除了不同运营商之间互联的瓶颈造成的影响，实现了跨运营商的网络加速，保证不同网络中的用户都能得到良好的访问质量。

        3、远程加速 远程访问用户根据DNS负载均衡技术 智能自动选择Cache服务器，选择最快的Cache服务器，加快远程访问的速度

        4、带宽优化 自动生成服务器的远程Mirror(镜像)cache服务器，远程用户访问时从cache服务器上读取数据，减少远程访问的带宽、分担网络流量、减轻原站点WEB服务器负载等功能。

        5、集群抗攻击 广泛分布的CDN节点加上节点之间的智能冗于机制，可以有效地预防黑客入侵以及降低各种D.D.o.S攻击对网站的影响，同时保证较好的服务质量。

• 23、浏览器一次可以从一个域名下请求多少资源？

        浏览器的并发请求数目限制是针对同一域名的，同一时间针对同一域名下的请求有一定数量限制，
        不同浏览器这个限制的数目不一样，超过限制数目的请求会被阻塞；

        目前的话，所有浏览器的并发数目一般限制在10以内。

• 24、什么是垃圾回收机制Garbage Collection （GC）？

        早期的计算机语言，比如C和C++，需要开发者手动的来跟踪内存，这种机制的优点是内存分配和释放的效率很高。
        但是它也有着它的缺点，程序员很容易不小心忘记释放内存，从而造成内存的泄露。

        新的编程语言，比如JAVA、javascript、Python , 都提供了所谓“垃圾回收的机制”，
        运行时自身会运行相应的垃圾回收机制。程序员只需要申请内存，而不需要关注内存的释放。
        垃圾回收器(GC)会在适当的时候将已经终止生命周期的变量的内存给释放掉。
        GC的优点就在于它大大简化了应用层开发的复杂度，降低了内存泄露的风险。

• 25、image和canvas在处理图片的时候有什么区别？

        image是通过对象的形式描述图片的

        canvas通过专门的API将图片绘制在画布上

        image可以借助canvas画布来实现图片压缩上传

• 26、简述移动开发的注意点,如何做好不同手机的适配,你以前的项目是怎么做的?

        1、单独做移动端项目，rem布局，保证不管什么手机都可以渲染出相同的效果

        2、采用响应式的方式做适配

        3、尽量不过多的使用新特性 因为在老版本的手机上支持不是特别好 还会造成很多车祸。(如果想深入了解可以观看我的移动端技巧整理)

• 27、响应式布局的时候，轮播图使用两张不同的图片去适配大屏幕和超小屏幕，还是一张图片进行压缩适配不同终端，说明原因？

      最好使用两张不同大小的图片去适配大屏幕和超小屏幕，这样可以针对不同设备的屏幕大小，
      来加载响应的图片，减少超小屏幕设备的网络流量消耗，加快响应速度。
      同时防止图片在大屏幕下分辨率不够导致失真的问题。

• 28、http和tcp有什么区别？

        TPC/IP协议是传输层协议，主要解决数据如何在网络中传输，是一种“经过三次握手”的可靠的传输方式；

        HTTP协议即超文本传送协议(Hypertext Transfer Protocol )，是应用层协议，是Web联网的基础，
        也是手机联网常用的协议之一，HTTP协议是建立在TCP协议之上的一种应用。

• 29、向git中添加一个文件并commit，然后push到remote server,请写出相关命令？

        $ git add README.md
        $git commit -m "add README.md"
        $ git push origin master

• 30、请把以下HTML文档翻译成MarkDown格式？

         <h3>Header</h3>

         <p>Hello world!<ahref="https://www.google.com">Google</a></p>

         <ol>

                   <li>NumberOne</li>

                   <li>NumberTwo</li>

         </ol>

        ### Header

        Hello world![Google](https://www.google.com)

        1.  Number One

        2.  Number Two

• 31、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

  Ie(Ie内核) 火狐（Gecko）谷歌（webkit） opear(Presto)，移动端几乎都是webkit

• 32、写出几种IE6 BUG的解决方法？

         1.双边距BUG float引起的使用display

         2.3像素问题使用float引起的使用dislpay:inline-3px

         3.超链接hover 点击后失效使用正确的书写顺序 link visitedhover active

         4.Iez-index问题给父级添加position:relative

         5.Png 透明使用js代码改

         6.Min-height最小高度！Important 解决’

         7.select在ie6下遮盖使用iframe嵌套

         8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08line-height:1px）

• 33、图片优化 项目中图片处理相关的优化，项目中用到的优化方案，图片大小达到多少的时候选择处理？

    1、首先了解在web开发中常见的图片有那些格式。

             JPG 通常使用的背景图片，照片图片，商品图片等等。这一类型的图片都属于大尺寸图片或较大尺寸图片一般使用的是这种格式。

             PNG 这种格式的又分为两种一种PNG-8，一种 PNG-24。

             PNG-8格式不支持半透明，也是IE6兼容的图片存储方式。

    PNG-24图片质量要求较高的半透明或全透明背景，保存成PNG-24更合适（为了兼容IE可以试用js插件pngfix）一般是背景图标中使用的多。

    GIF 这种格式显而易见的是在需要gif动画的时候使用了。
 

    2．优化方案

    l  样式代替图片

    例如：半透明、圆角、阴影、高光、渐变等。这些效果主流的浏览器都能够完美支持，而对于那些低端浏览器，我们并不会完全抛弃他们，“渐进增强”则是一个很好的解决方案。

    l  精灵图

    CSS Sprites，将同类型的图标或按钮等背景图合到一张大图中，减少页面请求。

    l  字体图标

    Icon Font，将图标做成字体文件。优点是图标支持多个尺寸，兼容所有浏览器，减少页面请求等。美中不足的是只支持纯色的icon。SVG，对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！

    l  Base64

    将图片转化为base64编码格式，资源内嵌于CSS或HTML中，不必单独请求。

             Base64格式

        data:[][;charset=][;base64],

             Base64 在CSS中的使用

        .demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAA    L...."); }

             Base64 在HTML中的使用

        <imgwidth="40"height="30"    src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />

    l  图片响应式

    通常图片加载都是可以通过lazy加载的形式来的，那么可以在加载的时候来判断屏幕的尺寸来达到加载大图还是小图的目的来达到优化。

• 34、你知道有哪些方法可以提高网站的性能？

我们从两个方面来讲：

        1.      资源加载

                        CSS顶部, JS底部

                        CSS JS文件压缩

                        尽量使用图片使用精灵图，字体图标

                        图片加载可通过懒加载的方式。

                        总之就是减少资源体积减少资源请求次数。

        2.      代码性能

                 Css:

                        使用CSS缩写，减少代码量；

                        减少查询层级：如.header .logo要好过.header .top .logo；

                        减少查询范围：如.header>li要好过.header li；

                        避免TAG标签与CLASS或ID并存：如a.top、button#submit；

                        删除重复的CSS；

                        ….

                Html:

                        减少DOM节点：加速页面渲染；

                        正确的闭合标签：如避免使用<div/>，浏览器会多一个将它解析成<div\></div\>的过程；

                        减少页面重绘。比如给图片加上正确的宽高值：这可以减少页面重绘，

                        ……

                Js：

                        尽量少用全局变量；

                        使用事件代理绑定事件，如将事件绑定在body上进行代理；

                        避免频繁操作DOM节点；

                        减少对象查找，如a.b.c.d这种查找方式非常耗性能，尽可能把它定义在变量里；

• 35、设计模式有哪些？列举你在前端开发工作中自己应用到或者了解到其他框架所用到的设计模式？

   单例、工厂、观察者、适配器、代理模式

• 36、请描述你熟悉的语言的垃圾回收(GC)机制，他们对循环引用是如何处理的？如何查找内存泄漏(MemoryLeak)?

    JavaScript的垃圾回收机制主要是根据数据是否还存在引用，没有引用的数据空间可能在某个时间被回收；
    在java中垃圾回收机制采用对象遍历来解决循环引用；windows的任务管理器就可以查看到内存泄露