前端工作面试问题(上)(3)

    当然,从渐进增强的角度讲,鼓励使用高级特性,只是同时要做到优雅降级,让低端用户代理上,也能保留低保真的体验。(除了用户代理,还有什么方法检测客户端设备?特性检测,css3媒体查询)

  (讲讲我在平时项目中,在“渐进增强”和“优雅降级”的努力)

如果提到了特性检测,可以加分。

      

假若你有5个不同的 CSS 文件, 加载进页面的最好方式是?
文件拼合,减少http请求。

  用一个大的CSS文件替代多个小体积的CSS文件这是一个很好的实践,可以获得更好的可维护性,但是在网站性能方面会产生一定的影响(这里指的是随着文件体积的增大,随之消耗服务器的内存也会增加)。尽管你应该把CSS文件拆分成小块,但是当浏览器请求这些文件时,会产生同等数量的http请求。每个http请求都会产生一次从你的浏览器到服务器端网络往返过程并且导致推迟到达服务器端和返回浏览器端的时间,我们称之为延迟。因此,如果你有4个Javascript和3个css文件在页面中被加载,你浪费掉了7次因网络往返过程产生的时间。在美国,延迟平均是70毫秒,这样你就浪费了7*70 = 490毫秒,大致延迟了半秒的时间。在美国之外的国家访问你的页面,平均延迟大约是200毫秒,这意味着你的页面有1400毫秒的时间是在等待中度过。浏览器在你的CSS完全加载完成之前是不能很好的渲染你的页面的。因此越多的延迟让你的页面载入越慢。

请解释一下什么是“语义化的 HTML”

  分离结构和表现的另一个重要方式是使用语义化的标记来构造文档内容。一个XHTML元素的存在意味着被标记内容有相应的结构化意义,例如<p>是用来标记段落<h1>标记标题<ul><li>标记列表,不能过分使用<div>

  语义化的标签往往与默认样式有所联系,像是Hx系列 表示标题,会被赋予默认的块级加粗居中样式;<strong>,<em>用来区别于其他文字,起到了强调的作用。用来明确告诉你它们的用途。

  语义化标签让大家更直观认识标签和属性的用途。语义化的网页,对搜索引擎友好,更容易被搜索引擎抓取,有利于推广。

*你如何对网站的文件和资源进行优化?

期待的解决方案包括:

文件合并(同上题“假若你有5个不同的 CSS 文件, 加载进页面的最好方式是?”

        减少调用其他页面、文件的数量。一般我们为了让页面生动活泼会大量使用background来加载背景图,而每个 background的图像都会产生1次HTTP请求,要改善这个状况,可以采用css的1个有用的background-position属 性来加载背景图,我们将需要频繁加载的多个图片合成为1个单独的图片,需要加载时可以采用:background:url(....) no-repeat x-offset y-offset;的形式加载即可将这部分图片加载的HTTP请求缩减为1个。

文件最小化/文件压缩

        即将需要传输的内容压缩后传输到客户端再解压,这样在网络上传输的 数据量就会大幅减小。通常在服务器上的Apache、Nginx可以直接开启这个设置,也可以从代码角度直接设置传输文件头,增加gzip的设置,也可以 从 负载均衡设备直接设置。不过需要留意的是,这个设置会略微增加服务器的负担。建议服务器性能不是很好的网站,要慎重考虑。

使用 CDN 托管

        CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。

缓存的使用

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/1287c5e455583263de605555e03a89e2.html