Job:前端基础

Bertha 。 2022-06-09 00:15 151阅读 0赞

## 1.你能描述一下渐进增强和优雅降级之间的不同吗? ##

`优雅降级 ：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.`

`渐进增强 ：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。`

## 2.线程与进程的区别 ##

一个程序至少有一个进程，一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。

另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。

线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

## 3.说说你对语义化的理解？ ##

*  1：去掉或样式丢失的时候能让页面呈现清晰的结构：html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
 *  2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。
 *  3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）。
 *  4.`有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。`
 *  6.`便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。`

## 4.你如何对网站的文件和资源进行优化？ ##

期待的解决方案包括：文件合并文件最小化/文件压缩使用CDN托管缓存的使用（多个域名来提供缓存）其他。

1、利用浏览器缓存你的 [js][] 和 CSS 文件：

2、把 .js 库文件地址替换成 Google CDN的地址：随着 [jQuery][] 和 mootools 等js库的使用需要加载的.js文件越来越多也越来越大，通常传统的网站是上传到网站本身的目录。但对于一个接近70多KB的[jquery][jQuery].js体积确实不利于网站响应速度的提升，此时就应该使用Google API 。

3、精简和优化你的 js 和 CSS：4、GZIP 压缩你的 JS 和 CSS 文件：

5、使用css sprites合并图片

6、优化你网站图片：，jpg是一种有损压缩格式，而png虽然是无损的，但缺憾是体积颇大。

## 5.为什么利用多个域名来提供网站资源会更有效？ ##

*  1.CDN缓存更方便
 *  2.突破浏览器并发限制（一般每个域名建立的链接不超过6个）
 *  3.Cookieless，节省带宽，尤其是上行带宽一般比下行要慢
 *  4.对于UGC的内容和主站隔离，防止不必要的安全问题(上传js窃取主站cookie之类的)。正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。
 *  5.数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事。这个可能被用的不多。

PS:关于Cookie的问题，带宽是次要的，安全隔离才是主要的。关于多域名，也不是越多越好，虽然服务器端可以做泛解释，浏览器做dns解释也是耗时间的，而且太多域名，如果要走https的话，还有要多买证书和部署的问题。

## 6.请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间） ##

*  1.优化图片
 *  2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
 *  3.优化CSS（压缩合并css，如margin-top,margin-left...)
 *  4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）
 *  5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）
 *  6.减少http请求（合并文件，合并图片）。

## 7.如果你参与到一个项目中，发现他们使用Tab来缩进代码，但是你喜欢空格，你会怎么做？ ##

*  建议这个项目使用像EditorConfig([http://editorconfig.org/][http_editorconfig.org] )之类的规范
 *  为了保持一致性，接受项目原有的风格
 *  直接使用VIM的retab命令

## 8.请写一个简单的幻灯效果页面 ##

如果不使用JS来完成，可以加分。（如：纯CSS实现的幻灯片效果）

<!doctype html>
    <html>
      <head>
        <style>
        img {
          display: none;
          width: 100px;
          height: 100px;
        }
      
        input:checked + img {
          display: block;
        }
      
        input {
          position: absolute;
          left: -9999px;
        }
      
        label {
          cursor: pointer;
        }
        </style>
      </head>
      <body>
        <div id="cont">
          <input id="img1" name="img" type="radio" checked="checked">
          <img src="a.png">
          <input id="img2" name="img" type="radio">
          <img src="b.png">
        </div>
        <div id="nav">
          <label for="img1">第一张</label>
          <label for="img2">第二张</label>
        </div>
      </body>
    </html>

## 9.你都使用哪些工具来测试代码的性能？ ##

Profiler,JSPerf（[http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout][http_jsperf.com_nexttick-vs-setzerotimeout-vs-settimeout] ）,Dromaeo。

## 10.如果今年你打算熟练掌握一项新技术，那会是什么？ ##

nodejs，html5，css3，less等。

[js]: http://lib.csdn.net/base/javascript
[jQuery]: http://lib.csdn.net/base/jquery
[http_editorconfig.org]: http://editorconfig.org/
[http_jsperf.com_nexttick-vs-setzerotimeout-vs-settimeout]: http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout