博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Web前端开发笔试&面试_04_20161019MTBS
阅读量:4469 次
发布时间:2019-06-08

本文共 3455 字,大约阅读时间需要 11 分钟。

1.运用CSS3 ,实现div 沿Y 轴上下循环运动的动画。

我写是:-webkit-animation:xz 3s linear 1s infinite //即XZ轴变化,Y轴不变

正确答案是:

菜鸟教程(runoob.com)

注意: 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。

原来的这样是实现上右下左-左下右上循环的:

@keyframes myfirst{    0%   {background:red; left:0px; top:0px;}    25%  {background:yellow; left:200px; top:0px;}    50%  {background:blue; left:200px; top:200px;}    75%  {background:green; left:0px; top:200px;}    100% {background:red; left:0px; top:0px;}}@-webkit-keyframes myfirst /* Safari and Chrome */{    0%   {background:red; left:0px; top:0px;}    25%  {background:yellow; left:200px; top:0px;}    50%  {background:blue; left:200px; top:200px;}    75%  {background:green; left:0px; top:200px;}    100% {background:red; left:0px; top:0px;}}

2. 书写高效CSS时会有哪些问题需要考虑? (ref:)

(一)不要直接定义子节点,应把共性声明放到父类。

.mod .inner {...}    // .mod 下面的 inner

.inner {...}    // 不是很建议的声明

(二)结构与皮肤相分离。

<div class="container simpleExt"></div>  //html 结构

    .container {...}  //控制结构的class

    .simpleExt {...}  //控制皮肤的class

(三)容器与内容相分离。

<div class="container"><ul><li>排行</li></ul></div> //html 结构

   .container ul{...}  //ul依赖了容器

<div class="container"><ul class="rankList"><li>排行</li></ul></div> //html 结构

   .rankList ul{...}  //解除与容器的依赖,可以从一个容器转移到其他容器

(四)抽象出可重用的元素,建好组件库,在组件库内寻找可用的元素组装页面。

(五)往你想要扩展的对象本身增加 class 而不是其父节点。

(六)对象应该保持独立性

<div class="container"><div class="mod"></div></div> //html 结构

      .container {...} 

      .container .mod {...} //控制结构的class

   //应该写成如下:

   <div class="container mod"> </div> //html 结构

(七)避免使用ID选择器,权重太高,无法重用。

(八)避免位置相关的样式

#header .container {...}

 #footer .container {...}

//可直接写成 .container {...}

  

   #header h1 {...}

   #footer h1 {...}

   h1,.h1 { }

   h2,.h2 { }

   <h1 class="h6"></h1>

 

(九)保证选择器相同的权重。

(八)类名应该剪短、清晰、语义化,OO CSS 的名字并不影响html 语义化。

 

3. 以下代码:

var a=1;function test() {    alert(a);    a=2;    alert(this.a);    this.a=4;    var a=3;    alert(a);}test();alert(a);

//按顺序输出alert 的值。

我答的是:undefined,1,3,1

答案是:undefined,1,3,4

 

4. jQuery 中 $(document).ready()和window.onload有什么区别。

(ref: )

1)执行时间 

  window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
  $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 
2)编写个数不同
   window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
  $(document).ready()可以同时编写多个,并且都可以得到执行 。
3)简化写法
      window.onload没有简化写法。
    $(document).ready(function(){})可以简写成$(function(){});

 

5. 列举5种以上减少网页加载时间的方法。

(1)  重复的HTTP请求数量应尽量减少,减少调用其他页面、文件的数量。

(2)  压缩Javascript、CSS代码。

(3)  在文件头部放置css样式的定义。

(4)  在文件末尾放Javascript脚本。

(5)  css、javascript改由外部调用。

(6)  尽可能减少DCOM元素。尽可能减少网页中各种<>元素数量,例如<table>的冗余很严重,而我们完全可以用<div>取代之。

(7)  避免使用CSS脚本(CSS Expressions)。

(8)  添加文件过期或缓存头。对于同一用户频繁访问的图片、Js脚本文件等可以在Apache或Nginx设置其缓冲时间,例如设置24小时过期时间,这样用户在访问过该页面之后再次访问时,同一组图片或JS不会再重复下载,从而减少了HTTP请求,用户访问速度明显有所提升,同时服务器负载也会下降。

(9)  使用CDN(Content Delivery Network)网络加速。

(10)服务器启用gzip压缩功能。

(11)Ajax采用缓存调用。

Ajax调用都采用缓存调用方式,一般采用附加特征参数方式实现,注意其中的:<script src=”xxx.js?{VERHASH}”,{VERHASH}就是特征参数,这个参数不变化就使用缓存文件,如果发生变化则重新下载新文件或更新信息。

(12)Ajax调用尽量采用GET方法调用。

 实际使用XMLHttpRequest时,如果使用POST方法实现,会发生2次HTTP请求,而使用GET方法只会发生1次HTTP请求。如果改用GET方法,HTTP请求减少50%!

(13)缩减iframe的使用,如无必要,尽量不要使用。

 

6. 列举几个你擅长的前端技术栈,并重点说一下掌握和应用情况。

My :

1)    bootatrap:自己曾经做过的“网上便利店”,有使用到此技术,能够熟练使用栅格(grid)来制作表格等应用。

2)    AngularJS:是弥补HTML在构建应用的不足。

3)    jQuery:能使用其进行后台数据库的交互。

 

 

 

需要注意的题目:

1)    CSS3增加了哪些新特性(模块)?

CSS3 被划分为模块。其中最重要的 CSS3 模块包括:

  • 选择器
  • 框模型
  • 背景和边框
  • 文本效果
  • 2D/3D 转换
  • 动画
  • 多列布局
  • 用户界面

2)    HTML5有哪些新特性(可包括CSS3)?

HTML5 中的一些有趣的新特性:

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素,比如 article、footer、header、nav、section
  • 新的表单控件,比如 calendar、date、time、email、url、search

 

转载于:https://www.cnblogs.com/shenxiaolin/p/6008631.html

你可能感兴趣的文章
C/C++通过WMI和系统API函数获取获取系统硬件配置信息
查看>>
Javascript Patterns--读书笔记4 (Functions)
查看>>
【运维】使用Serv-U搭建FTP服务器
查看>>
【1414软工助教】在博客中插入代码
查看>>
NuGet包断线续传下载
查看>>
【机器学习】梯度下降法的相关介绍
查看>>
struts.xml配置详解
查看>>
unity3d脚本语言中的引用类型
查看>>
unity 判断物体是否在视角内(巧妙!)
查看>>
java程序配置成windows系统服务
查看>>
如何理解C# 多态中的override和new
查看>>
IIS是如何处理ASP.NET请求的([转]图文并貌)
查看>>
使用kubectl管理k8s集群(二十九)
查看>>
thinkphp 带检索参数分页
查看>>
Oracle子查询(嵌套查询)
查看>>
Spring Data Jpa 初探
查看>>
自定义maven插件
查看>>
本地手动一步步搭建WNMP环境(nginx+php+mysql) Windows平台
查看>>
任务41:Individual authentication 模板
查看>>
Hadoop Mapreduce 中的FileInputFormat类的文件切分算法和host选择算法
查看>>